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.
var mainApp = angular.module( NewApp, [ ] );
2.Define a controller:-
mainApp.controller(FirstController, function($scope) {
$scope.showmsg = Display message successful;
});
3.Now setup this into your HTML(using in HTML):-
<!doctype html>
<html ng-app="mainApp> //built in directive to load the module
<head>
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="FirstController"> // specify the controller using ng-controller attribute
<h1>{{showmsg}}</h1>
<script src=Example.js"></script>
</body>
</html>
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.
<script src="js/angular-router.min.js"></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.
<body>
<div ng-view></div>
</body>
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.
mainApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/first.html',
controller : FirstController'
})
.when(/movies,, {
templateUrl : 'pages/movies.html',
controller : MoviesController'
})
.when('/songs', {
templateUrl : 'pages/songs.html',
controller : SongsController'
})
.otherwise({redirectTo: '/'});
});
As I have already specified that we need separate controllers for each page. For example:-
mainApp.controller('FirstController', function($scope) {
$scope.showmsg = 'Display message successful';
});
mainApp.controller('MoviesController', function($scope) {
$scope.showmsg = 'Display Movies successful';
});
And the pages will look simple and always be used as partial HTML inside the layout.for example:-
first.html-
<h1>First</h1>
<h3>{{showmsg}}</h3>
Use these steps to make your first SPA using angular.
0 Comment(s)