web-dev-qa-db-de.com

Angular ui-router: ui-views vs directives?

Der Angular Ui-Router erlaubt mehrere verschachtelte Ansichten. Die Rolle dieser austauschbaren Ansichten scheint sich mit der Rolle von Richtlinien zu überschneiden.

Was sind die Vor-/Nachteile der Verwendung von (mehrfach, verschachtelt) ui-views vs winkligen Direktiven ?

AKTUALISIEREN

Zustände und Routing sind 2 verschiedene Funktionen. Mit States können Sie die Vorlagen partial.html und deren Controller austauschen und (optional?) eine entsprechende URL/Route angeben.

In einer E-Mail-Antwort von Tim Kindberg (a ui-router dev):

ui-view ist eine Direktive. Wenn Sie es also verwenden, verwenden Sie eine Direktive, die speziell für den Rest des ui-router-Moduls entwickelt wurde. Ich kann mir nicht vorstellen, dass es einfach ist, eine eigene Direktive zu erstellen, um diese Funktionalität zu ersetzen.

Und dazu könnten Sie anscheinend zwei Optionen haben:

Normale Anweisungen: 

app.directive('myDir1', {/*  controller: ... */})
   .directive('myDir2', {/*  controller: ... */})

vs ui-view "Direktiven" 

$stateProvider.state('route1', {
     /*  url: "/route1", // optional?? */
      views: {
        "myDir1": { templateUrl: "myDir1.html" /* , controller: ... */ },
        "myDir2": { templateUrl: "myDir2.html" /* , controller: ... */ }
      }
    })

Bonus-Frage:

Sind normale angular Direktiven für Ansichten verfügbar? Zum Beispiel:

  • Transclude
  • Ersetzen
  • Scoping isolieren
  • Kompilieren/Verknüpfen von Funktionen

Wenn UI-Views-Anweisungen sind, scheint es klar, dass ihre Verwendung anders ist. Wäre es nicht sinnvoll, diese Modelle zu harmonisieren?

angularjsangular-uiangular-ui-router
59
Michael Lewis

Wie wäre es, wenn Sie Angular Inline-Ansichten des UI-Routers verwenden, um auf Anweisungen zu verweisen?

Angenommen, Sie haben eine Direktive für eine Tabelle, die CRUD-Operationen für Benutzerkonten verarbeitet. Wir werden sagen, die Direktive heißt user-admin. Unsere Routendatei würde folgendermaßen aussehen:

.state('users', {
  url: '/users',
  template: "<user-admin>"
});

Das würde dir viele nette Dinge bringen:

  • Ermöglichen Sie es Ihnen, eine URL zu haben, die direkt auf eine Direktive verweist
  • Die doppelte Verwendung von zwei Vorlagen (Ansichtsvorlage und Anweisungsvorlage) wird entfernt, wenn ein Status nur eine Anweisung ist
  • Ermöglichen Sie es Ihnen, mehr Steuerungslogik in Direktiven in Vorbereitung für Angular 2.0 zu verschieben. Siehe hier und hier .
37
Aaron Gray

Nach einigem Nachdenken/Korrespondenz, hier ist meine Schlussfolgerung:

I-Ansichten definieren Container und Zustände definieren, was in diesen Containern passiert

Wenn Sie einem Element eine ui-view='containerName' - Direktive zuweisen, richten Sie einen Container ein, der etwas enthält. Sie haben noch nichts darüber gesagt, was da reingeht.

Wenn Sie Ihre $stateProvider.state(...) -Definitionen erstellen, geben Sie an, was in diesen Containern enthalten ist:

$stateProvider.state('someState', {
  views: {
    "containerName": { templateUrl: "someContents.html" /* , controller: ... */ },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

Können Sie alle herkömmlichen Direktivenfunktionen (Transclude-, Replace-, Isolate-Scoping-, Compile-/Linking-Funktionen) mit Ihren UI-Views verwenden? Ich bin mir nicht sicher. Beispielsweise:

$stateProvider.state('someState', {
  views: {
    "containerName": { 
              templateUrl: "someContents.html",
              scope: { localVar: "@" },  // can you
              transclude: true,          // do this?
              controller: function(){}
    },
    "container2": { templateUrl: "otherContents.html" /* , controller: ... */ }
  }
})

Zusammenfassend scheint es, als ob jede Option ihre Nachteile hat. Direktiven verfügen über einige zusätzliche Funktionen. Die Benutzeroberflächenansichten sind jedoch austauschbar und können mit Routen verknüpft sein.

7
Michael Lewis

Es scheint, dass Sie so etwas relativ ungestraft tun können:

    $stateProvider.state('general', {
        url: '/general',
        views: {
            main: {
                template: '<general-directive></general-directive>'
            }
        }
    });
5
btk
**In Config function:**
.state('list', {
            url:'/list',
            template:'<user-info-table></user-info-table>',
            controller:'UserInfoTableController',
        });

**In Directive:**
angular.module('UserInfo').directive("userInfoTable", function() {
    return {
       templateUrl:'templates/UserInfoTable.html',
       restrict:'EA',
    };
});
0
Suraj