ng-include directive example in Angularjs

Posted on Updated on

Single Page Application concept is being widely used by developer. The concept of SPA has been explain here. The concept of SPA is to load and render content from different pages. HTML does not support embedding html pages within html page. However this is now possible by breakthrough of AngularJS. By use of ng-include directive, it is possible to load different html pages on html page. To understand about simple SPA example, one can refer to this post.

Let us see an example to understand better about how can we use ng-include.

Project Structure-

spa-project-structure

index.html

spaApp.js

views/bootstrap.html

view/angularJS.html

views/code2succeed.html

Output

http://localhost:60483/index.html#/

index

http://localhost:60483/index.html#/bootstrap

bootstrap

http://localhost:60483/index.html#/AngularJS

angularjs

http://localhost:60483/index.html#/Code2Succeed

code2succeed

We can clearly see how the different pages are being loaded on single index.html page.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.