AngularJs包含部分模板
我在我的主布局文件中有这个
<body> <header id="header" ng-controller="HeaderController"></header> <div class="container" ng-view></div> 我在我的目录结构中有一个header.html部分模板。
如何在我的应用程序中包含此模板？ 我认为angular度自动包含处理控制器后的模板，但它不工作。
头节点应该被replace为这个文件的内容。
从外部文件中包含模板/ html片段的一种方法是使用ng-include指令（ doc ）。
<ng-include src="'/path/to/the/header.html'"></ng-include>
要么
<div ng-include src="'/path/to/the/header.html'"></div>
从Angular 2 ， ngInclude已经被删除 ，自定义指令是首选。 这是我提出的方式
-
定义您的应用程序的主要组件，链接到母版页
@View({ templateUrl: 'client/app/layout/main.html', directives: [ROUTER_DIRECTIVES, Navigation, Footer] }) @Component({selector: 'app'}) @RouteConfig( routerConfig ) class MainComponent { }
这是主要的模板
<!---- Navigation bar ----> <navigation></navigation> <!----/ Navigation bar ----> <!---- Main Part ----> <router-outlet> </router-outlet> <!----/ Main Part ----> <!---- Footer ----> <footer></footer> <!----/ Footer ---->
- 定义一个
base.html，它将包含body标签和app标签
<body> <app>Loading ...</app> </body>
- 现在，最后一步是定义
Navigation和Footer的组件，如MainComponent，它指向您的部分模板
