Single Page Application with AngularJS example

Posted on Updated on

AngularJS being JavaScript framework has emerged out be one of powerful frame work. It has been widely used to create a single page application. Single Page application has been very well explained here. I urge you must read it before proceeding further as it’ll help understand better.

SPA uses the concept of routing in which main page remains the same and navigation between pages/views are performed without reloading the main page. The content from other view pages are fetched and loaded in the html tag where ng-view directive has been defined.

Let’s see an example demonstrated below-

The index page contains HTML content on which the SPA will be build.

Index.html

The spaApp.js file include the scripting which include controllers and other logic. Let’s see it below

Output:

Homepage.html

http://localhost:57125/app/IndexSPA.htm#/

SPA_home

 

 

 

 

 

 

AngularJS

http://localhost:57125/app/IndexSPA.htm#/AngularJS

SPA_AngularJS

Code2Succeed

http://localhost:57125/app/IndexSPA.htm#/Code2Succeed

SPA_Code2Succeed

We can clearly see from above example how an SPA works.

 

 

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.