A Single Page Application is what everybody want their web app to be these days, So, What is SPA exactly? It is a web application technology where  everything will be in a single HTML page with different routes provided in the module. it has many features like no page reloads, caching all the data, changing only needed data on a page dynamically,high level scaling.

This can be done by proving routes for each HTML page and the condition to satisfy in order to view the HTML page. The templateUrl of each route can also be given at the route and one can also be associated with each controller or same controller. Let us see this with an example,

In the above example, myPinkSAP is my module. What is a Module? It is the one where all the services, directives, controllers are stored in. And I have associated this module with a variable name called myPinkSAPVar. Now, the variable is used to configure our routes by injecting provider. And the module has a dependency of ngRoute. The syntax of it is – .config(function(injectables) 

templateUrl and controller are the functions which returns the URL of the page we want to route and the controller we want to associate the page with.

All the business logic can be written in controllers, it can be written by having a $scope injected to the function. This scope can be used to add behavior to the controller, in this example I have created two different controllers – PartyController and Work Controller which display data associated to $scope.

All the above code is written in a JavaScript file, this .js file included in a <script> tag in HTML page in which  angularJS  and angularJS-route is imported. This can be done as below-

To associate this HTML tag with the module, use ng-app directive and use anchor tag to link the .html pages to the page. To view all the .HTML pages associated in a page use ng-view directive. One can use partial views to make it efficient.

Simple, run the HTML code and view it to view your application. The whole code can be found here – https://github.com/sirishagavini/AngularJS—Single-Page-Application-