Thursday, March 12, 2015

ng-include directive

The ng-include directive allows us to embed content of other .html pages in a parent html page, these are similar to the partial view concept in MVC, we can create separate .html with parts of content and embed them in the parent page using the ng-include directive.

The following is a simple example of using ng-include to add content from .html pages to a parent .html page.


Index.html (Main .html page)
<html>
  <head>
    <title>AngularJS Include</title>
  </head>
  <body ng-app>
<div ng-include src="'list_contact.html'"></div>
<hr/>
<ng-include src="'new_contact.html'"></ng-include>
   <script src="angular.min.js"></script>
  </body>
</html>


The .html pages 'list_contact.html' & 'new_contact.html' are static html pages, when the main page index.html is rendered AngularJS includes the content from these pages in the main page.



Search Flipkart Products:
Flipkart.com