Single page application using AngularJS

AngularJS logo

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.

Some of the key benefits of single page application

Provides more native like experience.
Less bandwidth and faster navigation.
Load all markup in initial load.
Insert and remove HTML on demand.
Prevent the browser from requesting URL from server.

How to create single page app using AngularJS

Any Application must do two things to start Angular:

Load the angular.js library.
Tell Angular which part of the DOM it should manage with ng-app directive.

Download the source code or View the Demo

ng-app directive

To bootstrap the application use custom ng-app HTML 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.

//index.html
< !DOCTYPE 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.

//index.html

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”

// script.js
var spDemo = 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.

//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.

// 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.

// Controller for index page
spDemo.controller('spController',function($scope, $location){
    // function to set the active class
    $scope.isActive = function (viewLocation) {
     var current = (viewLocation === $location.path());
     return current;
    
    };
});

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.

//index.html

  Home
  About
  Contact

Download the source code or View the Demo

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.

Template support without any 3rd party template engine.
Nested template support without any dependency.
Two-way data binding.
It doesn’t required any third-party dependency.
MVW (Model View Whatever) framework.

Collect Dots