Угловой UI-маршрутизатор - вложенные состояния с несколькими макетами

Я хочу иметь несколько макетов (1-col, 2-col, 3-col), которые я хочу отключить для разных маршрутов на основе необходимого макета.Угловой UI-маршрутизатор - вложенные состояния с несколькими макетами

Я в настоящее время имеют корневой состояние, которое по умолчанию использует определенную схему, а затем в этом макете содержит имени щ ракурса директивы для разделов, таких как заголовок, колонтитул, боковая панель и т.д.

Я просто интересно, если это можно изменить компоновку для вложенных состояний, так как она в настоящее время не работает и ошибок в консоли или linter не появляются.

В настоящее время я не получаю вывод в браузере, что заставляет меня думать, что я применил этот подход неправильно, поскольку все маршруты не наследуются от состояния маршрута.

Вот код:

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>

высоко ценит помощь

источник

2014-09-04 PI.

Пока нет plunker показывая свой пример, я поделюсь с вами одним: working layout example. Пожалуйста, соблюдайте его, чтобы увидеть в действии, что я попытаюсь объяснить здесь

Если наше root государство должно быть единственным корневое состояние, впрыскиваемого в index.html, нам нужно немного другой дефиниция:

Так index.html

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

мы должны были бы этот синтаксис:

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

что это: '[email protected]'? это абсолютное именование. Проверьте это здесь:

View Names - Relative vs. Absolute Names(небольшой процитировать ниже)
и here я попытался expain, что подробно

За кулисами, каждый вид получает назначение абсолютное имя, следует схеме '[email protected]', где viewname - это имя, используемое в директиве view, а имя состояния - это абсолютное имя состояния, например contact.item. Вы также можете написать имена имен в абсолютном синтаксисе.

То же самое относится к определениям других состояний. Потому что «корень.Регистрация»имеет прямой родительский„корень“, существующий синтаксис будет работать

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

Но мы могли бы использовать абсолютное именование и он будет работать, а

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

, потому что это то, как он работает за так или иначе.

Пожалуйста, обратите внимание на layout пример для более подробной информации

источник

2014-09-05 04:57:17

Благодаря Радим. Извинения в отношении того, чтобы не приводить пример в Plunkr. –

Рад, если это так или иначе помогло! Если плунжер, который я посылаю, помог ... тогда здорово;) Наслаждайтесь ui-router, сэр;) –

Большое спасибо за это. Вместе с другим ответом я смог создать идеальное решение с публичным и частным расположением маршрутов. См. Мое решение: http://stackoverflow.com/questions/22104893/angular-ui-router-how-to-create-a-layout-state/32196068#32196068 – Mattijs

Угловой UI-маршрутизатор - вложенные состояния с несколькими макетами

ответ

Смежные вопросы