Showing posts with label ng-include. Show all posts
Showing posts with label ng-include. Show all posts

Thursday, March 12, 2015

ng-view vs ng-include directive

Both the ng-view and ng-include directives are used to plug in content to the main html page.

The ng-include directive is more like a static content addition to the main page, while using this directive the page / content to be included in the main page is defined in the main .html page. This directive can be used when we want to include static content like top-menu, left-menu, header, footer, disclaimer etc to the main page.

The ng-view directive allows dynamic content addition to the parent page based on the URL provided by the end user, this directive helps in implementing routing feature similar to Asp.Net MVC routing, the behavior of the page will vary based on the URL requested by the end user. This directive can be used to add dynamic content to the page, like master-child, list-details content based on requests provided by the end user.

To learn more about these directives, refer to the following posts.

ng-view
ng-include

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.