How to use ng-include Directive in AngularJS

In HTML you cannot embed one HTML page within another HTML page. In PHP, there is include or require statement for it which takes the file name as a parameter and embed the file at the specified location.

Similarly, in AngularJS there is the ng-include directive that allows us to embed existing HTML pages within another HTML page.

Embedding Pages
With Controller
Conclusion

1. Embedding Pages

There are two ways to use ng-include directive –

(1). Adding ng-include attribute to element

Need to pass the file name when using ng-include as an attribute.The file name should be within quotes.

Example

<header ng-include="'header.html'"></header>

(2). Using ng-include tag

You can also define it with tag where you need to pass the file name in the src attribute. The file name should be within quotes.

Example

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

Example

Create a simple example, which has 3 files – index.html, header.html, and footer.html. Include the header.html and footer.html in index.html file.

Completed Code (header.html)

<ul class='menu'>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#blog">Blog</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Completed Code (footer.html)

&copy 2018 Makitweb.com

Embed above-created files in index.html.

Completed Code (index.html)

<!doctype html>
<html ng-app=''>
  <head>
     <title>How to use ng-include directive in AngularJS</title>
     <link href="style.css" rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

  </head>
  <body >
     <!-- header section -->
     <header ng-include="'header.html'"></header>
     <div class='content'>

     </div>
     <!-- footer section -->
     <footer ng-include="'footer.html'"></footer>

  </body>
</html>

Completed Code (style.html)

/* header */
header{
 width: 90%;
 height: auto;
 margin: 0 auto;
}

/* footer */
footer{
 width: 90%;
 padding-top: 20px;
 padding-bottom: 20px;
 text-align: center;
 margin: 0 auto;
 background-color: darkturquoise;
 color: white;
}

/* content */
.content{
 width: 88%;
 margin: 0 auto;
 height: 400px;
 border: 1px solid black;
 margin-top: 10px;
 margin-bottom: 10px;
 padding: 10px;
}

/* Menu */
.menu {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color: darkturquoise;
}

.menu li {
 float: left;
}

.menu li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

.menu li a:hover {
 background-color: lightskyblue;
}

Output

Download

2. With Controller

With controller dynamically change the ng-include directive value.

Create a new controller.js file.

Define 3 properties –

The friends and languages property contains objects
ListPage contains page name that needs to be embedded. Use this in the ng-include and ng-model directive.

Completed Code (controller.js)

var app = angular.module('myApp',[]);

app.controller('myController',function($scope){
 
 $scope.friends = [
 {name:'Yogesh Singh',age:22,gender:'Male'},
 {name:'Sonarika Bhadoria',age:22,gender:'Female'},
 {name:'Vishal Sahu',age:24,gender:'Male'},
 {name:'Sanjay Singh',age:23,gender:'Male'}
 ];
 
 $scope.languages = [
 {name:'PHP',extension:'.php'},
 {name:'Python',extension:'.py'},
 {name:'JavaScript',extension:'.js'},
 {name:'C',extension:'.c'}
 ];
 
 $scope.ListPage = "friend.html";
 
});

Include content.html file.

Completed Code (index.html)

<!doctype html>
<html ng-app='myApp'>
 <head>
 <title>How to use ng-include directive in AngularJS</title>
 <link href="style.css" rel='stylesheet' type='text/css'>
 <script src='controller.js' type='text/javascript'></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 </head>
 <body ng-controller="myController"> 
 
      <ng-include src="'content.html'"></ng-include>
 
 </body>
</html>

Create a <select> element with ng-model='ListPage' and use file name as the options.

Use <div ng-include='ListPage'> container to show page according to the selection in the <select> element.

Completed Code (content.html)

<div class='content'>
 <select ng-model='ListPage' >
    <option value='friend.html'>Friend List</option>
    <option value='prolang.html'>Programming Languages List</option>
 </select>
 <br/><br/>
 <div ng-include='ListPage'></div> 
</div>

Creating <table> row, by looping on friends objects using ng-repeat directive.

Completed Code (friend.html)

<table border='1' style='border-collapse: collapse;'>
 <tr>
 <th>Name</th>
 <th>Age</th>
 <th>Gender</th>
 </tr>
 <tr ng-repeat="friend in friends">
 <td>
 {{ friend.name }}
 </td>
 <td>
 {{ friend.age }}
 </td>
 <td>
 {{ friend.gender }}
 </td>
 </tr>
</table>

Creating another table structure of languages, by looping on languages object.

Completed Code (prolang.html)

<table border='1' style='border-collapse: collapse;'>
 <tr>
 <th>Name</th>
 <th>Extension</th>
 </tr>
 <tr ng-repeat="lang in languages">
 <td>
 {{ lang.name }}
 </td>
 <td>
 {{ lang.extension }}
 </td>
 </tr>
</table>

Output

Select option from the dropdown.

Download

3. Conclusion

With ng-include directive, you can easily insert existing HTML pages within your web page.

You can either use directive or tag way to embed the files.

Contents

1. Embedding Pages

Example

2. With Controller

3. Conclusion