AngularJs (1.X) Include Partial Template

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.

Answer

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>

Leave a Reply

Your email address will not be published. Required fields are marked *