Angular UI Router – Nested States mit mehreren Layouts

Ich möchte mehrere Layouts (1-col, 2-col, 3-col) haben, die ich für verschiedene Routen basierend auf dem benötigten Layout ausschalte.

Ich habe derzeit einen Stammzustand, der standardmäßig ein bestimmtes Layout verwendet und dann innerhalb dieses Layouts benannte ui-view-Direktiven für Abschnitte wie Kopfzeile, Fußzeile, Seitenleiste usw. enthält.

Ich habe mich nur gefragt, ob es möglich ist, das Layout für verschachtelte Zustände zu ändern, da es momentan nicht funktioniert und keine Fehler in der Konsole oder dem Linter auftreten.

Ich bekomme derzeit überhaupt keine Ausgabe im Browser, was mich denken lässt, dass ich den Ansatz falsch implementiert habe, da alle Routen nicht vom Routenstatus erben.

Hier ist der Code:

Mein-Modul.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-Spalte.html

 

Schätze die Hilfe

Während es keinen Plünderer gibt, der Ihr Beispiel zeigt, werde ich einen mit Ihnen teilen: Beispiel eines Arbeitslayouts . Bitte beachten Sie es, um in Aktion zu sehen, was ich hier versuchen werde zu erklären

Wenn unser root Status der einzige Root-Status sein soll, der in index.html eingefügt wird, benötigen wir eine etwas andere Definition:

Also für index.html

 // index.html  

Wir würden diese Syntax benötigen:

 $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' } } }) 

Was ist das: 'header@root' ? es ist absolute Benennung. Überprüfen Sie es hier:

  • Namen anzeigen – relative vs. absolute Namen (kleine zitieren unten)
  • und hier habe ich versucht, das im Detail zu erklären

Hinter den Kulissen wird jeder Ansicht ein absoluter Name zugewiesen, der dem Schema 'viewname@statename' folgt, wobei viewname der Name ist, der in der View-Direktive verwendet wird und state name der absolute Name des Status ist, zB contact.item. Sie können Ihre Ansichtsnamen auch in der absoluten Syntax schreiben.

Das gleiche gilt für andere Staaten Definitionen. Da die ‘root.signup’ direkten Eltern ‘root’ hat, würde die existierende Syntax funktionieren

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

Aber wir könnten absolute Namen verwenden und es würde auch funktionieren

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

Denn so funktioniert es sowieso.

Bitte beachten Sie das Layoutbeispiel für weitere Details