Angular UI-Router如何创build一个“布局”状态？
给定一个像这样的HTML文件：
<html> <header ui-view="header"></header> <div class="main" ui-view></div> <footer ui-view="footer"></footer> </html> 如何创build一个布局状态，填充“标题”模板，页脚与页脚模板，然后允许子状态填充空的UI视图？
我猜想空的ui-view也可以被命名为ui-view =“main”。
一种方法是build立一个全球性的“根”状态。 所以， 每个州都是小孩。 像root.pages，root.pages.edit，root.settings等，然后你可以提供默认模板的页眉和页脚。
另一种方式，我个人使用的不同方法是使用ng-include作为页眉和页脚。
<body ng-controller="AppCtrl"> <div id="header" ng-include="'header.tpl.html'"></div> <div class="main_container" ui-view> </div> </body>
顺便说一句。 我在header.tpl.html中使用了独立的控制器，这是主AppCtrl的一个子元素。
<div id="header" ng-controller="HeaderCtrl"> ....
尝试这个，实际上你的页眉和页脚是静态模板，但是你可以添加控制器，以防需要添加一些dynamicfunction，默认情况下，由于path是''，所以页眉和页脚将被包含在内，所以试试看：
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: { 'container@': { templateUrl: 'homePage.html' } } }) .state('root.other', { url: '/other', views: { 'container@': { templateUrl: 'other.html' } } }); }]);
编辑：对我来说，最好的地方设置的意见应该是在index.html和这样的代码：
<header> <div ui-view="header"></div> </header> <div ui-view="container"> </div> <footer id="mainFooter" ui-view="footer"> </footer>
实际上有一个非常简单的方法来做到这一点。
1.创build布局状态
$stateProvider .state('master', { abstract: true, views: { layout: { templateUrl: '/layouts/master.html', } } });
2.在布局中使用未命名的视图状态
<!-- layouts/master.html --> <div ui-view></div>
3.创build一个视图状态
$stateProvider .state('home', { url: '/', templateUrl: '/views/home.html', parent: 'master', });
4.使用命名的布局状态作为根状态
<!-- home.html --> <body ui-view="layout"></body>
根据Jack.thepper的回答，我创build了这个解决scheme。
卡斯：我有一个微小的变化，我真的想要2布局。 一个公众和一个私人。 在使用Blaze和Iron Router的Meteor中，有一个很好的解决scheme，您可以定义哪个主模板将用于某个path。 现在，我已经能够设立谢谢杰克！
注：代码将在翡翠和咖啡，这是一个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: "container@private": templateUrl: 'client/views/home/home.html' ) .state( 'public.login', url: '/login' views: "container@public": 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")
最后是容器视图的Public Layout
div.public-layout(layout="column" flex) div(ui-view="container" layout="column" flex)
通过这个设置，我可以设置login页面使用抽象的公共布局，在这条路线的视图中指出，它应该使用视图容器@公共，意味着从公共视图，使用视图容器。 在这个视图中加载login.html。
主页也一样，这个加载容器@私人意味着私人看法的容器视图。
这似乎是一种魅力。
非常感谢Jack，也是Angular UI路由器上的答案的作者- 具有多种布局的嵌套状态帮助我实现最终解决scheme。
干杯
类似jack.the.ripper的方式，你也可以按照它为我工作的方式来做。
app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('root', { /* The Root State */ views: { '': { abstract: true, templateUrl: 'master.html', controller: 'mainController' }, 'header@root': { templateUrl: 'header.html', controller: 'headerController', }, 'footer@root': { 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我们只有一个<ui-view></ui-view>
master.html将如下所示
<div ui-view="header"></div> <div ui-view="content"></div> <div ui-view="footer"></div>
为什么我select这种方法，是我不必创build一个单独的全局控制器，而我的mainController将是全局控制器。
而不是使用path在所有的页眉和页脚，我会使用Angular组件，现在它们是可用的1.5倍。
这是更灵活的方式，你不必处理root.whatever或ngInclude。 我在这里更详细地进入它： https : //stackoverflow.com/a/41093339/2416007 ，但基本上你：
1.创build组件
(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页面或类似的
<layout-header></layout-header>
3.页脚一样
<layout-footer></layout-footer>
4.在身体的结果是
<layout-header></layout-header> <main ui-view></main> <layout-footer></layout-footer>
