Single page applications are the applications that separates the model and the view layer i.e, model layer handles the data and view layer reads from the models.
SPA’s are becoming popular because it retrieves all the code(JS,HTML,CSS) on a single page load and the navigation is done without page refresh. SPA works even someone loses internet connection because all pages are already loaded.
In Angular we achieve this through routing(ng-route,ui-router) and views(ng-view,ui-view).
For creating a SPA in angular follow these steps:- 1.Create a module that contains different parts of your application.
<html ng-app="mainApp> //built in directive to load the module
<body ng-controller="FirstController"> // specify the controller using ng-controller attribute
4.Now we need to add single page application support using ng-route. This will provide routing capability and services. For this we need to include the angular-route script.
Then inject the ngroute -
var mainApp = angular.module( NewApp, [ 'ngRoute'] );
5.Now, we need to specify in HTML where the page will be placed in the view. For this we would use ng-view directive.
6.Now most important work is to use $routeProvider service to configure our routes. For this we need templateUrl and controller. For the route that is not defined we redirect the user to the “/” route.