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.

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 that we want to include or a property on the $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.

Add new Item

Angular1.aspx

Angular

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.

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

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

Now, just reload the page.

Page

As you can see from the above output, the data is represented here. In our main file, we referenced the Angular1 Pageby 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 the $scope object and reference that page.

$scope.employeeTest = "Angular1.aspx";

In our view, just write in ngInclude directives employees.

<p ng-include="employeeTest">

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

Reload

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

Again, add a page and name it as Angular2.

Add

As we want to include the list, we will take a <ul> and <li>. Now, in the 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. On 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 the 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 is Angular. aspx page is.

<body ng-app="mymodule">
    <p ng-controller="myController">
        <!-- Your content here -->
    </p>
</body>

Select By

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

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

Localhost

Output

Conclusion

So, this was all about the ngInclude directive in AngularJS.