AngularJs Include Partial Template

2019-01-13 12:34发布

站内问答 / 前端开发
1127 2 4

I've this in my main layout file

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

I've a header.html partial template in my directory structure.

How to include this template in my app? I thought angular automatically includes the template after processing the controller, but it doesnt work.

The header node should be replaced with the content of this file.

2条回答
不美不萌又怎样
2楼-- · 2019-01-13 12:50

One way of including templates/html fragments from external files is to use the ng-include directive (doc).

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

or

<div ng-include src="'/path/to/the/header.html'"></div>
查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-01-13 13:02

From Angular 2, ngInclude has been removed and custom directives are preferred. This is the way I come up with

  1. Define the main component for your app, which link to the master page 

        @View({
        templateUrl:   'client/app/layout/main.html',
        directives: [ROUTER_DIRECTIVES, Navigation, Footer]
    })
    @Component({selector: 'app'})
    @RouteConfig(
        routerConfig
    )
    class MainComponent {
    }

And this is the main template 

<!---- Navigation bar ---->
<navigation></navigation>
<!----/ Navigation bar ---->

<!---- Main Part ---->
<router-outlet>
</router-outlet>
<!----/ Main Part ---->

<!---- Footer ---->
<footer></footer>
<!----/ Footer ---->
  1. Define a base.html, which will contain the body tag and the app tag

<body> <app>Loading ...</app> </body>

  1. Now, final step is defining the components for Navigation and Footer like the MainComponent, which point to your partial templates
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)