Enrutador angular UI: estados nesteds con diseños múltiples

Quiero tener varios diseños (1-col, 2-col, 3-col) que quiero cambiar para diferentes rutas en función del diseño necesario.

Actualmente tengo un estado de raíz que se predetermina a usar un diseño determinado y luego dentro de ese diseño contiene directivas ui-view nombradas para secciones como el encabezado, pie de página, barra lateral, etc.

Me preguntaba si es posible cambiar el diseño de los estados nesteds, ya que actualmente no funciona y no aparecen errores dentro de la consola o linter.

Actualmente no obtengo ningún resultado en el navegador, lo que me hace pensar que he implementado el enfoque incorrectamente, ya que todas las rutas no heredan del estado de la ruta.

Aquí está el código:

My-module.js

'use strict'; angular.module('my-module', ['ngResource', 'ui.router']) // Routing for the app. .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('root', { url: '', views: { 'layout': { templateUrl: 'partials/layout/1-column.html' }, 'header': { templateUrl: 'partials/layout/sections/header.html' }, 'footer': { templateUrl: 'partials/layout/sections/footer.html' } } }) .state('root.home', { url: '/' }) .state('root.signup', { url: '/signup', views: { 'step-breadcrumb': { templateUrl: 'partials/signup/step-breadcrumb.html' } } }) ; $urlRouterProvider.otherwise('/'); }) ; 

Index.html

     My Test App           

1-column.html

 

Apreciar la ayuda

Si bien no hay ningún plunker que muestre tu ejemplo, voy a compartir uno contigo: ejemplo de diseño de trabajo . Por favor, obsérvala para ver en acción lo que trataré de explicar aquí

Si nuestro estado de root debe ser el único estado raíz, inyectado en index.html , necesitamos una definición un poco diferente:

Entonces para index.html

 // index.html  

necesitaríamos esta syntax:

 $stateProvider .state('root', { url: '', views: { 'layout': { templateUrl: 'partials/layout/1-column.html' }, 'header@root': { templateUrl: 'partials/layout/sections/header.html' }, 'footer@root': { templateUrl: 'partials/layout/sections/footer.html' } } }) 

¿Qué es esto: 'header@root' ? es un nombre absoluto. Verifíquelo aquí:

  • Ver nombres – Nombres relativos vs. absolutos (cita pequeña a continuación)
  • y aquí traté de ampliar eso en detalle

Detrás de escena, a cada vista se le asigna un nombre absoluto que sigue un esquema de 'viewname@statename' , donde viewname es el nombre utilizado en la directiva view y el nombre de estado es el nombre absoluto del estado, por ejemplo, contact.item. También puede optar por escribir sus nombres de vista en la syntax absoluta.

Lo mismo aplica para otras definiciones de estados. Debido a que ‘root.signup’ tiene padre directo ‘root’, la syntax existente estaría funcionando

 .state('root.signup', { url: '/signup', views: { 'step-breadcrumb': { // working AS IS ... 

Pero podríamos usar nombres absolutos y también funcionaría

 .state('root.signup', { url: '/signup', views: { 'step-breadcrumb@root': { // absolute naming ... 

porque así es como funciona detrás de todos modos.

Por favor, observe el ejemplo de diseño para más detalles