Angular Multiple Views and Routing

Each and every application having different view i.e, contact us , about us , Home and feedback.Now angular JS provides new feature of SPA(single page application) . SPA means different web pages can be seen at a single place without post back. It can be possible using JavaScript framework like JavaScript, Jquery and Ajax. AngularJS provides some inbuilt objects to perform such task and we call this feature as “Routing” . Fortunately, AngularJS provides excellent support for multiple views and routing via its routing API.

Using Angular JS routing we can associate controller and template(Different Page) into a module.It means each angular route may be created by url, controller and template.Using ajax call different view or pages will be loaded on single page. This approach reduces the network traffic and gives great features to the end users.

How to create Multiple Views(Practical approach)

First we will pass reference of two angularJS modules in our main page title tag

angular-route.js provides api for routing. In my example I am taking two html pages (Page1.html and Page2.html) and paces in Pages directory. Page1 and Page2 are two different views.

      



 

//ng-app is module name



//url for Page1 and Page2

    Page1

    Page2

    

//To show output of different view we can use ng-view and we can place it in any div tag or //desired location