Single page application using AngularJS

Single page application is superior in terms of performance. It decreases load time of pages by storing the functionality, once it is loaded the first time. If you need to update small parts of page, it’s faster to focus only on these views and their data rather than reloading entire page.

How to create single page app using AngularJS

ng-app directive

To bootstrap the application use custom ng-appHTML attribute. This tells Angular which part of the page it should manage. In the demo, I have placed it in the HTML element, where I am telling Angular that, I want to manage the whole page. If you want to use AngularJS with other library. You can use it in a specific section or div by placing ng-app directive in that div.

1

2

3

4

//index.html

<!DOCTYPE html>

<html lang="en"ng-app="spDemo">

</html>

ng-controller directive

In Angular app, you can manage areas of the page with javaScript classes called controllers. Including controller in the body, will manage everything between body. Controller primarily initialize the $scope object which wire model and view.

1

2

3

//index.html

<body ng-controller="spController">

</body>

Module and Controller creation

Module and controller are created in a separate layer that keep the HTML page clean. In the demo, all the controllers are placed in “script.js”

1

2

3

4

5

6

// script.js

varspDemo=angular.module('spDemo',[]);

spDemo.controller('spController',function($scope,$location){

// code comes here

});

Creation of different controllers for different pages

In the demo application different controllers have been created for different pages – spHomeController, spAboutController and spContactController. Each controller has its data to place in the respective page.

1

2

3

4

5

6

//Controller for home page content

spDemo.controller('spHomeController',function($scope){

//Message to display in the view

$scope.heading="Welcome in homepage";

$scope.message="Home page is the Lorum ipsum text is a dummy text used in print and web media.";

});

Wiring different controllers and pages

Different controllers for different pages have been created. Now, it needs to be wired together. Routing is taken care by service provider that Angular provides $routeProvider. This service wire together controllers, view, and the current URL location in the browser. We can use config() method to configure $routeProvider and this $routeProvider provides method .when() and .otherwise(), which can be used to wire the controllers and pages.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// routes configuration

spDemo.config(function($routeProvider){

$routeProvider

.when('/',{

templateUrl:'pages/home.html',

controller:'spHomeController'

})

.when('/about',{

templateUrl:'pages/about.html',

controller:'spAboutController'

})

.when('/contact',{

templateUrl:'pages/contact.html',

controller:'spContactController'

})

.otherwise({

redirectTo:'/',

});

});

Injecting active class to highlight the current page tab

Angular provides the different services that can be used, as and when required. We use AngularJS’s dependency injection to inject a service object in our controller, and Angular uses $injector to find corresponding service injector. To apply the active class on the current page tab we need to find the current URL. The $location services parses the URL in the browser address and make the URL available in the application. In the demo file isActive() function of controller with name spController is using the $location service.

1

2

3

4

5

6

7

8

9

// Controller for index page

spDemo.controller('spController',function($scope,$location){

// function to set the active class

$scope.isActive=function(viewLocation){

varcurrent=(viewLocation===$location.path());

returncurrent;

};

});

Using ng-class to highlight the current page tab

ng-class directive allows to dynamically set CSS classes on an HTML element. In the HTML page now we can call isActive() function created in the controller name spController.

Why choose AngularJS, there are other frameworks

Every framework has its pros and cons, but it depends on the requirement, what kind of application is being developed. If application required heavy DOM manipulation then combination of backbone and jquery is right, but if the application is very data-driven, then AngularJS has the nice data binding. Here, are a few points in favor of AngularJS over other framework.