angularjs - tutorial - Ui-enrutador angular: ui-views vs directivas?

ui view ui router

Question

El ui-router angular permite múltiples vistas anidadas . El papel de estos puntos de vista intercambiables parece superponerse al papel de las directivas.

¿Cuáles son los pros / contras de usar (múltiples, anidadas) ui-view s vs directivas de angular?

ACTUALIZAR

Los estados y el enrutamiento son 2 funciones diferentes. Los estados le permiten cambiar las plantillas partial.html y sus controladores, y puede (optionally?) Especificar una URL / ruta correspondiente.

En una respuesta por correo electrónico de Tim Kindberg (un desarrollador de ui-router ):

ui-view es una directiva, por lo que si la usa está usando una directiva que ha sido trabajada específicamente para funcionar bien con el resto del módulo ui-router. No puedo imaginar que sea fácil rodar su propia directiva para reemplazar esta funcionalidad.

Y a esto, parece que podría tener 2 opciones:

Directivas normales:

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

vs ui-view "Directivas"

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

Pregunta extra:

¿Están disponibles las características de directivas angulares normales para las vistas? Como:

• Transclude
• Reemplazar
• Aislar el alcance
• Funciones de compilación / enlace

Si las directivas de ui-views SON, parece claro que su uso es diferente. ¿No tendría sentido armonizar estos modelos?

Answer 1

¿Qué tal si utilizó las vistas en línea del enrutador de UU angular para señalar las directivas?

Supongamos que tiene una directiva para una tabla que maneja operaciones CRUD en cuentas de usuario. Diremos que la directiva se llama user-admin . Nuestro archivo de rutas se vería así:

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

Esto te daría muchas cosas buenas:

• Le permite tener una url que apunta directamente a una directiva
• Elimina la duplicación de la necesidad de dos plantillas (ver plantilla y plantilla de directiva) cuando un estado es solo una directiva
• Le permite comenzar a mover más lógica de controlador a directivas en preparación para Angular 2.0. Mira here y here .

Answer 2

Después de un poco de pensamiento / correspondencia, aquí está mi conclusión:

ui-views define los contenedores y los estados definen lo que entra en esos contenedores

Cuando coloca una directiva ui-view=''containerName'' en un elemento, está configurando un contenedor que contiene algo. Todavía no has dicho nada sobre lo que entra allí.

Cuando crea $stateProvider.state(...) , especifica lo que se incluye en estos contenedores:

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

¿Puede usar todas las funciones de directivas tradicionales (transcluir, reemplazar, aislar el alcance, compilar / vincular funciones) con sus vistas de usuario? No estoy seguro. Por ejemplo:

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

En conclusión, parece que cada opción tiene sus compensaciones. Las directivas tienen algunas características adicionales, sin embargo, las ui-views son intercambiables y pueden tener rutas asociadas.

Answer 3

Parece que puedes hacer algo como esto con relativa impunidad:

    $stateProvider.state(''general'', {
        url: ''/general'',
        views: {
            main: {
                template: ''<general-directive></general-directive>''
            }
        }
    });

Answer 4

**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'',
    };
});