当谈到 ui.router 模块时，我可以想到三种不同的方法来为每个 View 设置默认页眉和页脚:
DEFAULT HEADER
<CONTENT>
DEFAULT FOOTER
1。 ng-include - 将页眉/页脚附加到初始 .html 文件 (index.html)。
<html>
<div ng-include src="'header.html'"></div>
<div id="content" ui-view></div>
1.1。将代码粘贴到 index.html
<html>
<div><!-- my header code here --></div>
<div id="content" ui-view></div>
2。使用指令解析页眉和页脚。
主页.html
<!-- content -->
<!-- /content -->
<footer></footer>
footerDirective.js
module.directive('footer', function () {
return {
restrict: 'E',
replace: true,
templateUrl: "footer.html",
controller: ['$scope', '$filter', function ($scope, $filter) {
}]
}
});
http://gon.to/2013/03/23/the-right-way-of-coding-angularjs-how-to-organize-a-regular-webapp/
3。在没有 url 的情况下在 ui.router 上创建一个额外的状态。
State wrapper 将包含页眉和页脚，并且不可调用。
$stateProvider
.state('wrapper', {
templateUrl: 'wrapper.html', // contains html of header and footer
controller: 'WrapperCtrl'
})
.state('wrapper.home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl'
});
哪一个是首选？或者，是否有更理想的方法来使用 Angular 1.x？
最佳答案
还有另一种方法可以利用状态的 views 属性。它使人们能够为特定状态定义多个命名 View 。 UI docs .
考虑以下示例，其中状态 myapp 具有三个命名 View ，其中内容 View 将是具有动态内容的 View 。
$stateProvider
.state('myapp', {
views: {
'header': {
template:'header <hr />',
controller:'mainController as main'
},
'content': {
template:'<div ui-view></div>'
},
'footer': {
template:'<hr /> footer',
controller:'mainController as main'
}
}
})
//States below will live in content view
.state('myapp.one', {
template:'View 1 <button ui-sref="myapp.two">next page</button>',
controller:'firstController as first',
})
.state('myapp.two', {
template:'Another page <button ui-sref="myapp.one"> Go back</button>',
controller:'secondController as second',
})
HTML 看起来像这样:
<div ui-view="header"></div>
<div ui-view="content"><!-- Where your content will live --></div>
<div ui-view="footer"></div>
关于javascript - Angular ui.router 默认页眉页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34515006/