SPA in AngularJS
- Single page application (SPA) is a web application that fits on a single page. All your code (JS, HTML, CSS) is retrieved with a single page load. And navigation between pages performed without refreshing the whole page.
Advantages of SPA :
- No page flicker. Native application feel.
- Client side routing and data rendering on client side.
- Data is from server is in JSON format.
Disadvantages of SPA :
- User must enable JavaScript.
- Security.
You need to write javascript, handle shared state between pages, manage permissions, etc.
The SPA works on the two Elements:
-
- Ng-Route
- Ng-view
ngRoute
- Since we are making a single page application and we don’t want any page refreshes, we’ll use Angular’s routing capabilities.
- The ngRoute module provides routing, deeplinking services and directives for angular apps.
- We need to include angular-route script after the main angular script.
- Then we need to specify that our module depends on ngRoute module to be able to use it.
Syntax :
[pastacode lang=”javascript” manual=”var%20app%20%3D%20angular.module(‘myApp’%2C%20%5B’ngRoute’%5D)%3B” message=”” highlight=”” provider=”manual”/]- Then we need to specify the place where HTML of each page will be placed in our layout. There is a ng-view directive for that.
ng-view
- ng-view is an Angular directive that will include the template of the current route (for example, /blog or /about) in the main layout file.
- In plain words, it takes the file we specified for current route and injects it into the layout in the place of ng-view directive.
Example 1
[pastacode lang=”markup” manual=”%3Chtml%20ng-app%3D%22myApp%22%3E%0A%3Chead%3E%0A%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.7%2Fangular.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.7%2Fangular-route.min.js%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%0A%3Cdiv%20ng-view%3E%3C%2Fdiv%3E%0A%0A%3Cscript%20src%3D%22app.js%22%3E%3C%2Fscript%3E%0A%3C%2Fbody%3E%3C%2Fhtml%3E” message=”” highlight=”” provider=”manual”/]
- For each route, we need to specify template Url and controller.
- If user will try to go to the route that does not exist, we can handle this by using otherwise function. In our case, we will redirect user to the “/” route:
Syntax :
[pastacode lang=”javascript” manual=”var%20app%20%3D%20angular.module(‘myApp’%2C%20%5B’ngRoute’%5D)%3B” message=”” highlight=”” provider=”manual”/]Example 2 :
