use*_*716 53 templates include partial angularjs
我在我的主布局文件中有这个
<body>
<header id="header" ng-controller="HeaderController"></header>
<div class="container" ng-view></div>
Run Code Online (Sandbox Code Playgroud)
我的目录结构中有一个header.html部分模板.
如何在我的应用中包含此模板?我认为angular在处理控制器后自动包含模板,但它不起作用.
标题节点应替换为此文件的内容.
Suv*_*jah 91
从外部文件中包含模板/ html片段的一种方法是使用ng-include指令(doc).
<ng-include src="'/path/to/the/header.html'"></ng-include>
Run Code Online (Sandbox Code Playgroud)
要么
<div ng-include src="'/path/to/the/header.html'"></div>
Run Code Online (Sandbox Code Playgroud)
从Angular 2,ngInclude已被删除,自定义指令是首选.这就是我提出的方式
定义应用程序的主要组件,链接到母版页
@View({
templateUrl: 'client/app/layout/main.html',
directives: [ROUTER_DIRECTIVES, Navigation, Footer]
})
@Component({selector: 'app'})
@RouteConfig(
routerConfig
)
class MainComponent {
}
Run Code Online (Sandbox Code Playgroud)这是主要模板
<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->
<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->
<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
Run Code Online (Sandbox Code Playgroud)
base.html,它将包含body标签和app标签<body> <app>Loading ...</app> </body>
Navigation并Footer指向您的部分模板