Routeur d'interface utilisateur angulaire - États imbriqués avec plusieurs mises en page

Je veux avoir plusieurs mises en page (1-col, 2-col, 3-col) qui je veux passer pour des itinéraires différents en fonction de la disposition nécessaire.

J'ai actuellement une racine de l'état qui, par défaut, à l'aide d'un certain modèle, puis à l'intérieur de cette disposition contient nommé ui-view directives pour les articles tels que les en-tête, pied de page, la barre latérale etc.

Je me demandais juste si il est possible de changer la mise en page pour imbriqués les états, tel qu'il est actuellement ne fonctionne pas et aucune erreur dans la console ou linter apparaissent.

Je suis actuellement aucun résultat dans le navigateur à tout ce qui me fait penser que j'ai mis en application l'approche de mal, que toutes les routes ne sont pas hériter de la route de l'état.

Voici le code:

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>

Apprécions l'aide

source d'informationauteur PI.

  1. 20

    Alors qu'il n'y a pas de plunker montrer votre exemple, je vais partager avec vous: travail exemple de disposition. Veuillez observer pour le voir en action ce que je vais essayer d'expliquer ici

    Si notre root de l'état devrait être la seule racine de l'état, injecté dans index.htmlnous avons besoin d'un peu différent définition:

    Donc pour index.html

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

    nous aurions besoin de cette syntaxe:

    $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'est-ce: 'header@root'? il est absolu dénomination. Vérifiez ici:

    Derrière les scènes, chaque vue est attribué un nom absolu qui suit un schéma de 'viewname@statename'où viewname est le nom utilisé dans l'affichage de la directive et nom de l'état est l'état absolu de nom, par exemple, communiquer avec.de l'élément. Vous pouvez également choisir d'écrire vos noms de vue dans l'absolu de la syntaxe.

    Il en va de même pour les autres membres de définitions. Parce que " la racine.l'inscription' a diriger les parents 'root', la syntaxe serait de travailler

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

    Mais on pourrait utiliser absolue de nommage et cela fonctionne ainsi

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

    parce que c'est la façon dont il fonctionne en arrière de toute façon.

    S'il vous plaît, respectez les disposition exemple pour plus de détails