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.

How to use ng-include Directive in AngularJS


Contents

  1. Embedding Pages
  2. With Controller
  3. 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 2016 Makitweb.com

Embed above 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


 

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


 

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.

Related Post

Spread the love

4 Comments

  1. Q said:

    this helps

    May 6, 2017
    Reply
  2. vishal mule said:

    If I want to use jquery in the header and footer…your examples didn’t work.can help me get this out

    June 29, 2017
    Reply
    • Yogesh Singh said:

      There is no issue while using AngularJS and jQuery together on the same page.

      Try to use “jQuery” instead of “$” in the script it may solve your problem.

      June 29, 2017
      Reply
  3. vamsi said:

    Hai,
    I am the new one to learn angular js. Please give a best techniques of me to learn.

    September 7, 2017
    Reply

Leave a Reply

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