Roteador de interface do usuário angular – Estados nesteds com vários layouts

Eu quero ter vários layouts (1-col, 2-col, 3-col) que eu quero mudar para diferentes rotas com base no layout necessário.

Eu atualmente tenho um estado de raiz que usa um layout padrão e, em seguida, dentro desse layout contém diretivas nomeadas ui-view para seções como o header, rodapé, barra lateral etc.

Eu só queria saber se é possível alterar o layout para estados nesteds, como atualmente não funciona e não há erros dentro do console ou linter estão aparecendo.

No momento, não estou obtendo nenhuma saída no navegador, o que me faz pensar que implementei a abordagem errada, já que todas as rotas não estão herdando do estado da rota.

Aqui está o 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

 

Aprecie a ajuda

   

Enquanto não houver plunker mostrando seu exemplo, compartilharei um com você: exemplo de layout de trabalho . Por favor, observe para ver em ação o que vou tentar explicar aqui

Se o nosso estado de root deve ser o único estado de raiz, injetado em index.html , precisamos definir um pouco diferente:

Então, para index.html

 // index.html  

precisaríamos dessa 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' } } }) 

O que é isso: 'header@root' ? é nomeação absoluta. Confira aqui:

  • Exibir nomes – relativos versus nomes absolutos (pequena referência abaixo)
  • e aqui eu tentei explicar isso em detalhes

Nos bastidores, cada view recebe um nome absoluto que segue um esquema de 'viewname@statename' , onde viewname é o nome usado na diretiva view e state name é o nome absoluto do estado, por exemplo, contact.item. Você também pode optar por escrever seus nomes de exibição na syntax absoluta.

O mesmo vale para outras definições de estados. Como o ‘root.signup’ tem um pai direto ‘root’, a syntax existente estaria funcionando

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

Mas poderíamos usar nomenclatura absoluta e funcionaria bem

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

porque é assim que funciona atrás de qualquer maneira.

Por favor, observe o exemplo de layout para mais detalhes