AngularJS Single Page Application(SPA) or different view on a single view Example - Tutorial

For Consultation : +91 9887575540

Stay Connected :

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.

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

//Now I am writing codes for my two controllers ‘page1controller’ //and ‘page2controller’

//to use ng-Route we have to pass reference of angular-route.js. //Using following code we are //setting $scope object values //message and now.

// angular.module() has a function config(), which lets us //configure a module. We inject $routeProvider as an argument //to the function. This is, in fact, a built-in AngularJS object. When //you declare a function with the parameter $routeProvider, //AngularJS automatically injects a $routeProvider object while //calling it—this is another example of Dependency Injection in //action.

//$routeProvider provides function when where we are passing //route name as first parameter and definition of route in second //parameter. Controller is associating controller to page1 and page2 //views separately.

Download Source Code

Select your currency