Angularny router UI - zagnieżdżone stany o wielu układach

Chcę mieć wiele układów (1-col, 2-col, 3-col), które chcę przełączać dla różnych tras w zależności od potrzebnego układu.Angularny router UI - zagnieżdżone stany o wielu układach

Obecnie mam stan korzeni, które domyślnie używając pewnego układu, a następnie w tym układzie o nazwie ui zawiera widokiem dyrektyw w sekcjach takich jak nagłówek, stopkę, sidebar itp

Zastanawiam się, czy to można zmienić układ stanów zagnieżdżonych, ponieważ obecnie nie działa i nie pojawiają się żadne błędy w konsoli lub lince.

Aktualnie nie uzyskuję żadnych danych wyjściowych w przeglądarce, co powoduje, że uważam, że zaimplementowałem podejście błędne, ponieważ wszystkie trasy nie dziedziczą ze stanu trasy.

Oto kod:

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

<!doctype html> 
<html class="no-js" ng-app="my-module"> 
    <head> 
    <meta charset="utf-8"> 
    <title>My Test App</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 

    <!-- build:css({.tmp,app}) styles/main.css --> 
    <link rel="stylesheet" href="styles/main.css"> 
    <!-- endbuild --> 

    <!-- build:js scripts/modernizr.js --> 
    <script src="bower_components/modernizr/modernizr.js"></script> 
    <!-- endbuild --> 
    </head> 
    <body> 

    <div ui-view="layout"> 
    </div> 

    <!-- build:js({app,.tmp}) scripts/vendor.js --> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-resource/angular-resource.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
    <!-- endbuild --> 

    <script src="scripts/config.js"></script> 

    <!-- build:js({app,.tmp}) scripts/main.js --> 
    <script src="scripts/my-module.js"></script> 
    <!-- inject:partials --> 
    <!-- endinject --> 
    <!-- endbuild --> 

    </body> 
</html>

1-column.html

<div class="one-column"> 

    <!-- page header --> 
    <div ui-view="header"> 
    </div> 
    <!--/page header --> 

    <!-- state breadcrumb (optional) --> 
    <div ui-view="step-breadcrumb"> 
    </div> 
    <!--/state breadcrumb --> 

    <!-- page-container --> 
    <div class="page-container"> 

    <!-- main content --> 
    <div ui-view="main-content"> 
    </div> 
    <!--/main content --> 

    </div> 
    <!--/page-container --> 

    <!-- page footer --> 
    <div ui-view="footer"> 
    </div> 
    <!--/page footer --> 

</div>

Doceń pomocą

Źródło

2014-09-04 PI.

Choć nie ma plunker pokazując swój przykład, będę dzielić się z wami jedną working layout example. Należy zwrócić uwagę, aby zobaczyć go w akcji, co postaram się wyjaśnić tutaj

Jeśli nasz stan root powinna być jedynym stanem korzeni, wtryskiwanego do index.html, potrzebujemy trochę inny Definition:

Więc dla index.html

// index.html 
<body> 
    <div ui-view="layout"> 
    </div> 
</body>

musielibyśmy tę składnię:

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

Co to jest: '[email protected]'? to jest bezwzględne nazywanie. Sprawdź to tutaj:

View Names - Relative vs. Absolute Names(mały przytoczyć poniżej)
i here Próbowałem expain że szczegółowo

Za kulisami każdy widok zostanie przydzielony bezwzględną nazwę jest zgodny ze schematem '[email protected]', gdzie viewname jest nazwą używaną w dyrektywie view, a nazwa stanu to bezwzględna nazwa stanu, np. contact.item. Możesz także zapisać swoje nazwy widoków w absolutnej składni.

To samo dotyczy innych definicji stanów. Ponieważ "root.zarejestruj”ma bezpośredni dominująca«korzeń», istniejący składnia będzie pracować

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

Ale moglibyśmy wykorzystać absolutną nazewnictwo i to działa tak dobrze

.state('root.signup', { 
    url: '/signup', 
    views: { 
     '[email protected]': { // absolute naming 
     ...

ponieważ jest to w jaki sposób to działa za każdym razie.

Proszę obserwować przykład layout więcej szczegółów

Źródło

2014-09-05 04:57:17

Dzięki Radim. Przepraszamy za to, że nie podajemy przykładu w Plunkr. –

Cieszę się, że to pomogło! Jeśli plunker, który wysłałem, pomógł ... to świetnie;) Ciesz się ui-routerem, sir;) –

Dziękuję bardzo za to. Wraz z kolejną odpowiedzią udało mi się stworzyć idealne rozwiązanie z publicznym i prywatnym układem tras. Zobacz moje rozwiązanie: http://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state/32196068#32196068 – Mattijs

Angularny router UI - zagnieżdżone stany o wielu układach

Odpowiedz

Powiązane problemy