ngInclude Directive In AngularJS

Overview

In this article, we will see how to use ngInclude directive in AngularJS, with an example. Also, we will learn what ngInclude directive is and what is its purpose.

For more articles on AngularJS, kindly refer to:

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS

Introduction 

• ngInclude directive is used to embed an HTML Page into another HTML Page.
• This is used when you want to reuse the specific Page/View in multiple views, in your application.

The Value for ngInclude directive can be the name of the page which we want to include or property on $Scope object that points to the reusable feature of a page.

We will see this with an example. We have a controller function. In that controller function, we have an employee array.

var mypartone = angular.module("mymodule", []).controller("myController", function($scope) {
    var employees = [{
        name: "Akshay",
        gender: 1,
        dateOfBirth: new Date("July 21,1960"),
        Address: "Mumbai",
        Salary: "1234.34"
    }, {
        name: "Milind",
        gender: 2,
        dateOfBirth: new Date("July 20,1960"),
        Address: "Nashik",
        Salary: "12.34"
    }, {
        name: "Raghvan",
        gender: 1,
        dateOfBirth: new Date("July 19,1960"),
        Address: "Pune",
        Salary: "1235.34"
    }, {
        name: "Hari",
        gender: 1,
        dateOfBirth: new Date("July 18,1960"),
        Address: "Mumbai",
        Salary: "5589.34"
    }];
    $scope.employees = employees;
});

Now, we will add a page and represent the data on this. 

 

Go to solution; Add new Item ->Web form; name it as Angular1.aspx.



Angular1.aspx



So, in that Angular1.aspx, we are going to use a table element in which <th> section will be used to display various headers and <thead> section. We are going to bind it with a binding expression as shown in the below code:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Gender</th>
            <th>DOB</th>
            <th>Address</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="employee in employees">
            <td>{{employee.name}}</td>
            <td>{{employee.gender}}</td>
            <td>{{employee.dateOfBirth}}</td>
            <td>{{employee.Address}}</td>
            <td>{{employee.Salary}}</td>
        </tr>
    </tbody>
</table>

Now, we want to represent this data in our main file, i.e., Angular.aspx. So, switch back to that file and write a single line, as shown below:

<div>
    <div ng-include="'Angular1.aspx'">
</div>

So, inside that div, we used ngInclude directive and referenced the page that we had represented in our data.

Now, just reload the page.



As you can see from the above output, the data got represented here. In our main file, we referenced the Angular1 Page by ngInclude directive .

Here, the value that we have represented on the page, can also be a $scope property.

Now, I am going to attach an employeeTest to $scope object and reference that page. 

$scope.employeeTest = "Angular1.aspx";

In our View, just write in ngInclude directive as employeeTest:

<div ng-include="employeeTest">

Now, reload the page. We get the exact same output as before.



Now, we will see another example. In that, if a user selects a table, it will display table. If he selects lists, it will display a list. Let's see:

Again, add a page and name it as Angular2.



As we want to include the list, we will take a <ul> and <li>. Now, in Angular2.aspx page, the code is:

<ul ng-repeat="employee in employees">
    <li> {{employee.name}}
        <ul>
            <li> {{employee.Address}} </li>
            <li> {{employee.Salary}} </li>
        </ul>
    </li>
</ul>

Now, let's go back to our main page angular.aspx. In that page, we will give a select option with two choices, i.e., List and Table.

Select By,

<select ng-model="employeeTest">
<option value="Angular1.aspx">Table</option>
<option value="Angular2.aspx">List</option>
</select>

In select, we passed ng-Model directive and in that, we passed employeeTest which we had attached to the $scope object.

In option value, we referenced the respective pages.

So, our final main page Angular.aspx page is.

body ng-app="mymodule">
<div ng-controller="myController">

Select By

<select ng-model="employeeTest">
<option value="Angular1.aspx">Table</option>
<option value="Angular2.aspx">List</option>
</select>
<div ng-include="employeeTest"> </div>
</div>
</body>

Now, just reload the page and see what output we get.



Output



Conclusion: So, this was all about ngInclude directive in AngularJS.