我刚刚阅读了Angular JS的介绍,但我没有看到任何关于编写HTML头代码和页脚代码的方法,只是将其包含在所有页面中.
是否有官方/推荐的方式来做到这一点?
Mar*_*cok 35
如果要创建单页Web应用程序(例如,使用$ routeProvider使用可收藏的视图/页面),可以将页眉和页脚直接放入index.html(或使用ng-include),然后使用ng-view切换在views/pages之间:
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
... header here, or use ng-include ...
<div ng-view></div>
... footer here, or use ng-include ...
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
rai*_*7ow 31
正式的方法是使用ngInclude指令"fetches, compiles and includes an external HTML fragment".
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<div ng-include src="'header.url'"></div>
...
<div ng-include src="'footer.url'"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
有了这个,你可以重复使用相同的header.url
,并footer.url
在所有网页.
bol*_*y38 10
我刚刚发现了另一种在多个视图中包含相同代码的方法:
=>创建并使用自己的Angular'指令'
1)定义一个指令:
angular.module('myApp')
.directive('appfooter', function() {
return {
templateUrl: 'widgets/footer.html'
};
});
Run Code Online (Sandbox Code Playgroud)
2)创建名为'widgets/footer.html'的模板.
3)使用你的新指令:
<div appfooter></div>
Run Code Online (Sandbox Code Playgroud)
使用的参考文献:
希望这可以帮助
归档时间: |
|
查看次数: |
23273 次 |
最近记录: |