ng-include directive in AngularJS

ng-include directive in AngularJS is used to include html content from another file.It is useful when we want to split the html in multiple files.There can be multiple reasons of placing html in different files:

• To split a complex UI into simpler html pages
• To display html conditionally

To use ng-include use it as:

<element ng-include="file" ></element>

For example to display html content of file1.html in a div use:

<div ng-include="file.html"  ></div>

To split the html content into different files use:

<div element ng-include="file1.html" ></div>
<div element ng-include="file2.html" ></div>
<span element ng-include="file3.html" ></span>
<span element ng-include="file4.html" ></span>

To conditionally display html content of file1.html in a div use:

<div ng-if="expression" ng-include="file.html"  ></div>

expression can be any valid expression returning boolean value.For example employee.html will be included if isEmployee variable is true.Otherwise the div element will be completely removed from DOM.

<div ng-if="isEmployee" ng-include="employee.html"  ></div>

The contents of the file employee.html will be inserted as child elements of div element.

We can separate UI into different html files and include them in the main html page using ng-include directive.

Follow on: