Router angular dell’interfaccia utente – Stati annidati con layout multipli

Voglio avere più layout (1-col, 2-col, 3-col) che voglio cambiare per percorsi diversi in base al layout necessario.

Al momento ho uno stato root che usa per default un determinato layout e quindi all’interno di quel layout contiene direttive con ui-view denominate per sezioni come l’intestazione, il piè di pagina, la barra laterale ecc.

Mi stavo chiedendo se è ansible modificare il layout per gli stati nidificati, poiché attualmente non funziona e non vengono visualizzati errori all’interno della console o del linter.

Attualmente non ottengo alcun output nel browser, il che mi fa pensare di aver implementato l’approccio in modo errato, poiché tutte le rotte non ereditano dallo stato del percorso.

Ecco il codice:

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

 

Apprezzo l’aiuto

Anche se non esiste un plunker che mostri il tuo esempio, ne condividerò uno con te: esempio di layout di lavoro . Per favore osservalo per vedere in azione ciò che cercherò di spiegare qui

Se il nostro stato root dovrebbe essere l’unico stato root, inserito in index.html , abbiamo bisogno di una definizione leggermente diversa:

Quindi per index.html

 // index.html  

avremmo bisogno di questa 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' } } }) 

Che cos’è: 'header@root' ? è un nome assoluto. Controlla qui:

  • Visualizza nomi – Nomi relativi e assoluti (piccola citazione sotto)
  • e qui ho cercato di esporlo in dettaglio

Dietro le quinte, a ogni vista viene assegnato un nome assoluto che segue uno schema di 'viewname@statename' , dove viewname è il nome utilizzato nella direttiva view e il nome dello stato è il nome assoluto dello stato, ad esempio contact.item. Puoi anche scegliere di scrivere i nomi delle tue viste nella syntax assoluta.

Lo stesso vale per le definizioni degli altri stati. Poiché “root.signup” ha una “radice” principale diretta, la syntax esistente funzionerebbe

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

Ma potremmo usare la denominazione assoluta e funzionerebbe altrettanto bene

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

perché è così che funziona comunque.

Per favore, osserva l’esempio di layout per maggiori dettagli