What is ng-include

ng-include directive is used to add external html files into application. This directive helps us to create common page of website.

Example of ng-include

Let’s say we are having html static website of 100 pages. We have common header menu and footer menu. So we have copy paste it in all 100 page. And in future if we need to modify the menu then we have to do it in all 100 pages which is quite difficult.

But ng-include directive helps to add html page dynamically into application. We can create separate html page for both header and footer. And we can include this with the help of ng-include.

Create a html file for header menu

		
Header.html
<div>
<a href="home.html">Home</a> |
<a href="about.html">About us</a> |
<a href="contact.html">contact</a>|
<a href="login.html">Login</a>
</div>
		
		

Now create home.html to include this header page

		
		Home.html
<!DOCTYPE html>
<html>
<head>
    <title>AngularJS ng-include example</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <script src="angular.min.js"></script>
</head>
<body ng-app>
    
    <div id="headermenu" ng-include="'header.html'"></div>
    
    <div>This is home page dummy content</div>

</body>
</html>

		
		

Now execute this code and you will see header.html content will be added in home.html

		
		what is ng-include
		Figure 1
		
		

In my next article we will see more example of ng-repeat with ng-init.