AngularJs Include Partial Template

angularjs templates include partial
user3403716 picture user3403716 · Mar 11, 2014 · Viewed 78.8k times · Source

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

Suvi Vignarajah picture Suvi Vignarajah · Mar 11, 2014

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>

Related questions

How to dynamically change header based on AngularJS partial view?

I am using ng-view to include AngularJS partial views, and I want to update the page title and h1 header tags based on the included view. These are out of scope of the partial view controllers though, and so I …

Read More
Angularjs Template Default Value if Binding Null / Undefined (With Filter)

I have a template binding that displays a model attribute called 'date' which is a date, using Angular's date filter. <span class="gallery-date">{{gallery.date | date:'mediumDate'}}</span> So far so good. However at the moment, …

Read More
angularjs make a simple countdown

I would like make a countDown with Angular js. this is my code: Html File <div ng-app ng-controller = "countController"> {{countDown}} <div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ js File function countController($scope){ $scope.countDown = 10; var timer = setInterval(function(){$scope.countDown--; console.log($…

Read More