Question

我在我的主要布局文件

中有这个

<body>
    <header id="header" ng-controller="HeaderController"></header>
    <div class="container" ng-view></div>

我的目录结构中有一个header.html部分模板。

如何在我的应用中包含此模板？我认为angular在处理控制器后会自动包含模板，但它不起作用。

标题节点应替换为此文件的内容。

Answer 1

从外部文件中包含模板/ html片段的一种方法是使用ng-include指令（doc）。

<ng-include src="'/path/to/the/header.html'"></ng-include>

或

<div ng-include src="'/path/to/the/header.html'"></div>

Answer 2

来自Angular 2，ngInclude已removed，首选自定义指令。这是我提出的方式

定义应用的主要组件，链接到母版页

    @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>Loading ...</app> </body>

现在，最后一步是定义Navigation和Footer的组件，例如MainComponent，它指向您的部分模板

AngularJs包含部分模板

2 个答案: