Угловой UI-маршрутизатор Как создать «макет»?

Один из способов – создать глобальное «корневое» состояние. Таким образом, каждое государство будет его ребенком. Как root.pages, root.pages.edit, root.settings и т. Д. Затем вы можете предоставить шаблоны по умолчанию для верхнего и нижнего колонтитула.

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

Btw. Я использую отдельный controller в header.tpl.html, который является дочерним элементом основного AppCtrl .:

 
 .... 

попробуйте это, практически ваши верхние и нижние колонтитулы являются статическими шаблонами, но вы можете добавить controllerы, если вам нужно добавить к ним динамические функции, заголовок и нижний колонтитул будут включены по умолчанию, так как маршрут «’, поэтому попробуйте это :

  app.config(['$stateProvider', function($stateProvider){ $stateProvider .state('root',{ url: '', abstract: true, views: { 'header': { templateUrl: 'header.html', controller: 'HeaderCtrl' }, 'footer':{ templateUrl: 'footer.html', controller: 'FooterCtrl' } } }) .state('root.home', { url: '/', views: { '[email protected]': { templateUrl: 'homePage.html' } } }) .state('root.other', { url: '/other', views: { '[email protected]': { templateUrl: 'other.html' } } }); }]); 

Изменить: для меня лучшее место для установки представлений должно быть в index.html и что-то вроде этого кода:

На самом деле это очень простой способ сделать это.

1. Создайте состояние макета

 $stateProvider .state('master', { abstract: true, views: { layout: { templateUrl: '/layouts/master.html', } } }); 

2. Использование состояния неназванного представления в макете

3. Создайте состояние представления

 $stateProvider .state('home', { url: '/', templateUrl: '/views/home.html', parent: 'master', }); 

4. Использовать именованное расположение макета как корневое состояние

Основываясь на ответе Jack.the.ripper, я создал это решение.

Casus: У меня есть небольшая вариация, что я действительно хочу 2 макета. Один публичный и один частный. В Meteor с Blaze и Iron Router было хорошее решение, которое можно было бы определить, какой мастер-шаблон будет использоваться для определенного маршрута. Это я теперь смог создать благодаря Джеку!

ПРИМЕЧАНИЕ: Код будет в Jade и Coffee, и это проект Meteor + Angular. Используйте http://js2.coffee/ для преобразования в Javascript.

 # the ROUTER part # angular.module( 'myApp' ).config( ( $urlRouterProvider, $stateProvider, $locationProvider ) -> $locationProvider.html5Mode true $stateProvider .state( 'private', url: '' abstract: true views: 'app': templateUrl: 'client/views/layouts/privateLayout.html' ) .state( 'public', url: '' abstract: true views: 'app': templateUrl: 'client/views/layouts/publicLayout.html' ) .state( 'private.home', url: '/' views: "[email protected]": templateUrl: 'client/views/home/home.html' ) .state( 'public.login', url: '/login' views: "[email protected]": templateUrl: 'client/views/session/login.html' ) $urlRouterProvider.otherwise '/' ) 

Это индексный файл, в котором определено представление приложения, которое будет использовать абстрактное состояние, определенное в маршрутизаторе.

 head meta(name="viewport" content="width=device-width, initial-scale=1") base(href="/") body(layout="column") div(ui-view="app" layout="column" flex) 

Затем приватный макет с видом контейнера.

 div(layout="column" flex) div(ng-controller="AppCtrl" layout="row" flex) //- some private Layout stuff happening here.... md-content(flex layout-padding) div(ui-view="container" layout="column") 

и, наконец, публичный макет с его видом контейнера

 div.public-layout(layout="column" flex) div(ui-view="container" layout="column" flex) 

С помощью этой настройки я могу установить страницу входа в систему с использованием абстрактного открытого макета, указав в представлении этого маршрута, что он должен использовать view container @ public, то есть из Public view, использовать контейнер Contain. В этом представлении загрузите login.html.

То же самое касается домашней страницы, которая загружает контейнер @ private, что означает представление контейнера Private view.

Это похоже на обаяние.

Большое спасибо Джек, а также автор ответа на Angular UI Router – вложенные государства с несколькими макетами, которые помогли мне добраться до окончательного решения.

ура

Подобно способу jack.the.ripper, вы также можете сделать это так, как он работает для меня.

 app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('root', { /* The Root State */ views: { '': { abstract: true, templateUrl: 'master.html', controller: 'mainController' }, '[email protected]': { templateUrl: 'header.html', controller: 'headerController', }, '[email protected]': { templateUrl: 'footer.html', controller: 'footerController' }, }, }) .state('root.index', { /* The Index State */ url: '/', views: { 'content': { templateUrl: 'index.html', controller: 'indexController' } }, .state('root.other', { /* The Other State */ url: '/', views: { 'content': { templateUrl: 'other.html', controller: 'otherController' } }, }); }); 

В нашем index.html мы будем иметь только

master.html будет выглядеть так:

Почему я выбрал этот подход, мне не нужно создавать отдельный глобальный controller, и мой mainController будет глобальным controllerом.

Вместо того, чтобы использовать маршруты для верхнего и нижнего колонтитулов, я бы использовал угловые компоненты теперь, когда они доступны в 1,5 раза.

Это более гибкий подход, и вам не нужно иметь дело с root.whatever или ngInclude. Более подробно я расскажу здесь: https://stackoverflow.com/a/41093339/2416007 , но по существу вы:

1. Создать компонент

 (function () { 'use strict'; angular .module('layout') .component('layoutHeader', { templateUrl: 'layout/header.html', bindings: {}, controller: Controller }); Controller.$inject = []; function Controller() { var ctrl = this; initialize(); //////////////////// function initialize(){ } } }()); 

2. Добавьте его на страницу index.html или аналогичную страницу.

3. То же самое для нижнего колонтитула

4. Результат в теле