AngularJs #11 How To Use ng-include Directive in Angular JS ( Tutorial )

Image Source

What Will I Learn?

I will learn how to use the ng-include directive in angular JS by two methods.

• How to use the ng-include directive by value of HTML page directly
• How to use the ng-include directive by a propriety of $scope object
• How to include two HTML pages by select box that modify the value of propriety to your choice

Requirements

• Basic Knowledge of HTML and CSS language .
• Basic Knowledge of JavaScript language .
• Has an editor text support HTML and JavaScript .
• Must has the angular files from the official site .

Difficulty

• Basic

Tutorial Contents

In this tutorial we will discuss how to use the ng-include directive in angular JS , so the ng-include is used to embed an HTML page into another HTML page , this technique is extremely useful when you want to reuse a specific view in multiple pages in your application .

The value for ng-include directive :

The value can be the name of the HTML page that you want to reuse like this

The name of our html page is utopian so I included it with this directive to show the page in our current page

And this is the second method to include an HTML page is to specify the name of the page with the $scope object
So the page can be a propriety on the $scope object that point to the reusable HTML page , let's understand them with example

In my controller function I created an array named " employees " this array has 4 objects each one of them has 3 elements the " name , gender and salary " and I attached it with $scope object which be going a model to the view , so all what we need to do is to present this array in HTML view by a table data for that I will add a new HTML file for this project and am going to call it EmployeeTable.html

Now we want to reuse this employees table HTML page inside the index HTML page

If you look in my index HTML page I have all the elements important , head and body so in the employeeTable.html page I will just create the table and remove the body and head sections

I used the table element to display the employees data I included the thead and tbody sections , inside the thead I used the th elements to display the headers of the table which are ' name , gender and salary ' and in the tbody section I have tr element has the attribute ng-repeat directive that's true when each employee in employees and inside the table data I used the binding expression to access to the name , city and gender of our employee

I created a div inside the body after using the ng-app and ng-controller directives to link it with the angular js module that I created , inside this div I added our ng-include attribute with the value between ' ' is the name of our page .html in our example the page is EmployeeTable.html and this is the example when we reload the page

As you see here the data is presented by a table in another page , now the value of ng-include is a name of another HTML page , the value can be also a propriety on the $scope object so let's see that ..

I attached a new propriety on the $scope object , this propriety has a value name of our HTML page

And I used just the name of our propriety as a model in the ng-include directive and this is the same result

Now I will show you another example to understand exactly how to use the ng-include directive , I will use two forms of views the first is to display the elements as a table and the second as a list how to do it , So the first thing is to add a new HTML page named " EmployeeList.html" because the other page named " EmployeeTable.html" I will again remove the body and the head and this is the code

So I used unordered list to display the data and by the ng-repeat directive the model employee in employees to loop the employees and for the first element we have just the name of the employee in the second list we have the salary and gender , so the second step is to create a select box in HTML view

I created a select box with an attribute ng-model attached with the $scope object , it has two options the first is table the second is list , when you click on the table option the value will be the link of our HTML employeeTable.html page and if you click on the second the value will be listEmployee.html so this value will be the value of the ng-model and it will be also the value of the ng-include directive by this option it will load the page that you selected and this is the result

This is the result when I clicked on the table option it will load the employeetable.html page that has the table of employees

This is the result also when I clicked on list the page of EmployeeList.html will be on the div .

Curriculum

• AngularJs #06 How To Handle Events , And Search Filter In Angular JS ( Tutorial )
  
• AngularJs #07 How To filter by multiple properties in Angular JS ( Tutorial )
  
• AngularJs #08 How To Create A Custom Filter in Angular JS ( Tutorial )
  
• AngularJs #09 How To Use ng-show And ng-hide Directives in Angular JS ( Tutorial )
  
• AngularJs #10 How To Use ng-init Directives in Angular JS ( Tutorial )
  

---

Posted on Utopian.io - Rewarding Open Source Contributors

---