ng-include directive is used to add external html files into application. This directive helps us to create common page of website.
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
In my next article we will see more example of ng-repeat with ng-init.