web-dev-qa-db-fra.com

Angular ui-router: ui-views vs directives?

Le routeur ui angulaire permet plusieurs vues imbriquées. Le rôle de ces vues interchangeables semble chevaucher le rôle des directives.

Quels sont les avantages/inconvénients de l'utilisation (multiple, imbriquée) ui-views vs les directives angulaires ?

MISE À JOUR

Les états et le routage sont 2 fonctions différentes. Les états vous permettent d'échanger les modèles partial.html et leurs contrôleurs, et vous pouvez (éventuellement?) spécifier une URL/route correspondante.

Dans une réponse par courriel de Tim Kindberg (un ui-router dev):

ui-view est une directive, donc si vous l'utilisez vous utilisez une directive qui a été travaillée en particulier pour bien fonctionner avec le reste du module ui-router. Je ne peux pas imaginer qu'il soit facile de lancer votre propre directive pour remplacer cette fonctionnalité.

Et pour cela, il semble que vous pourriez avoir 2 options:

Directives normales: 

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

vs ui-view "Directives" 

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

Question bonus:

normal angular angulaire sont-elles disponibles pour les vues? Telles que:

  • Transclude
  • Remplacer
  • Isoler la portée
  • Fonctions de compilation/liaison

Si les directives ui-views ARE, il semble clair que leur utilisation est différente. Ne serait-il pas logique d'harmoniser ces modèles?

angularjsangular-uiangular-ui-router
59
Michael Lewis

Que diriez-vous si vous avez utilisé Angular du routeur de l'interface utilisateur pour pointer vers des directives?

Disons que vous avez une directive pour une table qui gère les opérations CRUD sur les comptes d'utilisateurs. Nous dirons que la directive est nommée user-admin. Notre fichier de routes ressemblerait à:

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

Cela vous donnerait beaucoup de belles choses:

  • Vous permet d'avoir une URL qui pointe directement vers une directive
  • Supprime la duplication d'avoir besoin de deux modèles (modèle de vue et modèle de directive) lorsqu'un état n'est qu'une directive
  • Vous permet de commencer à déplacer plus de logique de contrôleur dans des directives en préparation pour Angular 2.0. Voir ici et ici .
37
Aaron Gray

Après quelques réflexions/correspondances, voici ma conclusion:

les vues ui définissent les conteneurs et les états définissent ce qui se passe dans ces conteneurs

Lorsque vous mettez une directive ui-view='containerName' Sur un élément, vous configurez un conteneur qui contient quelque chose. Vous n'avez encore rien dit sur ce qui s'y passe.

Lorsque vous créez vos définitions $stateProvider.state(...), vous spécifiez ce qui se trouve dans ces conteneurs:

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

Pouvez-vous utiliser toutes les fonctionnalités de directive traditionnelles (transclude, remplacer, isoler la portée, compiler/lier des fonctions) avec vos ui-vues? Je ne suis pas sûr. Par exemple:

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

En conclusion, il semble que chaque option ait ses compromis. Les directives ont des fonctionnalités supplémentaires, mais les vues ui sont interchangeables et peuvent avoir des routes associées.

7
Michael Lewis

Il semble que vous puissiez faire quelque chose comme ça en toute impunité:

    $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