How to use ng-include Directives 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 you has to add on the section following with file name where you want to insert the content.

Where can I use it ?

Using embedding, you can reuse the same code within another page and it saves our time. For example, you are creating a project which contains the number of pages, all pages need the common header and footer. So, you have to write header and footer code on all pages and later in future, you need to add one more menu item in the header so, you go to all pages and add a new item to it.

For solving these types of problem you can create the separate file of it and include in your where it required.

AngularJS allow us to embed HTML page within another HTML page using ng-include directive.

ng include directives in angularjs


Contents

  1. Embedding Pages
  2. Using with Controllers
  3. Conclusion

 


 

1. Embedding Pages

For embedding pages, we are using ng-include directive. Before working on we first need to now how we can use it on our web page.

We can we use ng-include directive in two ways –

(1). Adding ng-include attribute to element

While using ng-include as an attribute in this case we need to pass page name, for example – header.html. The page name should be within quotes.

Here, is an example of it –

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

Note that page name will be within quotes, for example – if you write code as <header ng-include="index.html"></header> it would be wrong. If you are using double quotes in ng-include then your page name should be within single quotes otherwise within double quotes.

(2). Using ng-include tag

We can also use it as a tag, within tag we need to add src attribute which contains page name.

Here, is an example –

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

The Same rule is to follow in this way also.

Let’s create two new HTML pages, name it header.html and footer.html.

In header.html we created a menu list.

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>

footer.html only contains copywrite text –

Completed Code (footer.html)

&copy 2016 Makitweb.com

We have created our embedding pages (header.html and footer.html). Now its time to create our index.html page in which we include both above created files.

Completed Code (index.html)

<!doctype html>
<html ng-app=''>
  <head>
     <title>ng-include directives 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>

Add some CSS to make our HTML structure looks better. For this create a new file name it style.css and put below code on it.

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;
}

Following output, it generates when we run it –


If you want to download all above-created file then click on Download button.

 


 

2. Using with Controller

Let’s use the controller with a ng-include directive, if you don’t know What is the controller? and How to create it. for this, you may check out Modules and Controllers in AngularJS tutorial.

In the example, we use the controller to dynamically change the ng-include directive value.

First, create a new file and name it controller.js in this file we write our controller.

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";
 
});

Created a new controller (myController ) and within these, we defined 3 properties. friends and languages property contains objects and ListPage contains page name.

We use ListPage property in the ng-include and ng-model directive.

Completed Code (index.html)

<!doctype html>
<html ng-app='myApp'>
 <head>
 <title>ng-include directives 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>

Within index page, we have added a new script controller.js which we above created and we have used ng-include tags for include content.html page.

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>

In this page we created a drop down which have two option and option value contains page name (friend.html and prolang.html). Within drop-down, we defined ng-model directive which contains controller property ListPage( defined in controller.js ), whenever we change an option it update ListPage property value.

For displaying page, we defined <div> container with a ng-include directive which also contains ListPage property variable.

Whenever dropdown option changes it will update ListPage property value. For example – You have select Programming Languages option its value is prolang.html then its update model variable and this variable is again using the ng-include directive. ng-include loads new file prolang.html.

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 table structure, by looping on friends objects using ng-repeat directive.

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>

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

Output


For download this example code –


 

3. Conclusion

We have learned how you can embed one HTML page within another using AngularJS ng-include directive and see two syntaxes of it.

In the first example – we created two pages header and footer and embed in new HTML page using ng-include and In the second example – we used a controller with ng-include. Using controller we change ng-include directive value dynamically based on the selection in a dropdown.

Spread the love

Related Post

One Comment

  1. Q said:

    this helps

    May 6, 2017
    Reply

Leave a Reply

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