stateparams - ui-view angularjs

¿Estados anidados o vistas para el diseño con barra izquierda en el enrutador ui?

Question

Tengo el siguiente diseño:

La barra lateral y la barra de encabezado siempre estarán presentes aunque su contenido sea específico del contexto.

Creo que hay dos opciones aquí: estados anidados (sidenav> Barra de encabezado> Contenido) o con vistas (si lo entiendo correctamente). Todavía estoy luchando por comprender mi enrutador ui, independientemente de cuántos videos y artículos haya leído.

Al hacer clic en Sidenav se cargaría un estado (o vista) en el Contenido y la Barra de encabezado ajustaría su contenido en función de lo que se carga en el Contenido.

Mi sensación es que los estados anidados parecen ser el enfoque directo más simple, particularmente cuando se piensa en la herencia.

Mirándolo desde otro punto de vista, parece que podrían ser hermanos (aunque los problemas de herencia probablemente me equivoquen). Mi idea es que las vistas me permitirían una mayor flexibilidad en el futuro con subelementos y demás.

Y, por supuesto, ng-include y las directivas podrían jugar en esto.

Siendo nuevo en el enrutador ui, ¿alguien podría abofetearme en la dirección correcta? Donde estoy atascado es cargar la vista de inicio. Quiero que mis usuarios vean su tablero en la sección Contenido una vez que inicien sesión. Y luego, ¿cómo cargo nuevos elementos en el Contenido a medida que el usuario navega desde la Barra lateral?

Answer 1

Solo me gustaría compartir mi experiencia. Ahi esta

• Preguntas y respuestas similares: enrutador de interfaz de usuario angular : estados anidados con múltiples diseños
• y un enlace a un pillador de trabajo

El fragmento del estado def:

$stateProvider
    .state(''index'', {
        url: ''/'',
        views: {
          ''@'' : {
            templateUrl: ''layout.html'',
            controller: ''IndexCtrl''
          },
          ''top@index'' : { templateUrl: ''tpl.top.html'',},
          ''left@index'' : { templateUrl: ''tpl.left.html'',},
          ''main@index'' : { templateUrl: ''tpl.main.html'',},
        },
      })
    .state(''index.list'', {
        url: ''/list'',
        templateUrl: ''list.html'',
        controller: ''ListCtrl''
      })
    .state(''index.list.detail'', {
        url: ''/:id'',
        views: {
          ''detail@index'' : {
            templateUrl: ''detail.html'',
            controller: ''DetailCtrl''
          },
        }

En pocas palabras, uso el enfoque de anidamiento .

Es similar al "ejemplo central" disponible aquí http://angular-ui.github.io/ui-router/sample/#/ . Es jerárquico (lista de entidades / detalle)

Y lo que es más, uso el estado raíz oculto de la cena:

• verifique los detalles aquí Actualización de objetos resueltos en estados primarios ui.router
• el enlace de examen

que maneja cosas relacionadas con la seguridad, una vez, y se comparte entre todos los estados secundarios:

$stateProvider
  .state(''root'', {
    abstract: true,
    template: ''<div ui-view></div>'',
    resolve: {objectX : function() { return {x : ''x'', y : ''y''};}},
    controller: ''rootController'',
  })
  .state(''home'', {
    parent: "root",
    url: ''/home'',
    templateUrl: ''tpl.example.html'',
  })
  .state(''search'', {
    parent: "root",
    url: ''/search'',
    templateUrl: ''tpl.example.html'',
  })

Espero que aclare esto un poco, porque el poder de UI-Router que veo en multiviews, ver anidamiento, herencia de alcance y la máquina de estado lógica

Answer 2

Una forma de diseñar un escenario con 1) barra lateral, 2) sección de acción y 3) área principal podría ser como en este ejemplo de trabajo

Primero el estado raíz . Aquí está el estado raíz llamado ''índice''. Es abstracto y podría resolve un poco. No afecta a los nombres de estado secundarios y no extiende la URL (porque no está definida)

$stateProvider
    .state(''index'', {
        abstract: true,
        //url: ''/'',
        views: {
          ''@'' : {
            templateUrl: ''layout.html'',
            controller: ''IndexCtrl''
          },
          ''top@index'' : { templateUrl: ''tpl.top.html'',},
          ''left@index'' : { templateUrl: ''tpl.left.html'',},
          ''main@index'' : { templateUrl: ''tpl.main.html'',},
        },
      })

El primer estado real es list, y hereda del padre pero con un atributo parent: ''index'' , por lo que el nombre del padre no afecta el nombre del estado.

La ventaja es que podría heredar muchas cosas resueltas. Además, el estado raíz podría cargarse una vez, para todos los demás estados principales

    .state(''list'', {
        parent: ''index'',
        url: ''/list'',
        templateUrl: ''list.html'',
        controller: ''ListCtrl''
      })

Este es el verdadero poder de UI-Router, porque ahora podemos ver que el niño está inyectando cosas en dos lugares: 1) sección de acción y 2) área principal

    .state(''list.detail'', {
        url: ''/:id'',
        views: {
          ''detail@index'' : {
            templateUrl: ''detail.html'',
            controller: ''DetailCtrl''
          },
          ''actions@index'' : {
            templateUrl: ''actions.html'',
            controller: ''ActionCtrl''
          },
        },
      })

De esta manera, podemos usar vistas con nombre y vistas múltiples en el escenario del mundo real. Por favor, nunca olvide cómo va la definición del alcance:

Herencia de alcance solo por jerarquía de vista

Tenga en cuenta que las propiedades del alcance solo se heredan en la cadena de estado si las vistas de sus estados están anidadas. La herencia de las propiedades de ámbito no tiene nada que ver con la anidación de sus estados y todo que ver con la anidación de sus vistas (plantillas).

Es completamente posible que tenga estados anidados cuyas plantillas llenen vistas ui en varias ubicaciones no anidadas dentro de su sitio. En este escenario, no puede esperar acceder a las variables de alcance de las vistas de estado primario dentro de las vistas de estados secundarios.

Comprueba que todo en acción aquí