What is Single Page Application?

Design goal of Single Page App (SPA) is to improve the user experience by avoiding full page refreshes, thus get close to the native app user experience.

For modern developers HTML5 SPA are extremely valuable tools. SPA is a web technology that works on any modern browser. SPAs are web apps that load a shell HTML page, As user interacts with the app, it loads the page content dynamically.   Most of the work happens on the client side, in JavaScript. There are many open source JavaScript frameworks for Creating SPAs.

How do Single-Page Applications work?

Angular leverages the HTML Hash identifier. Application Shell page loads the default html content and Angular and App JS (entry point for the app) files that are referenced in default html page. App JS file contains the logic to instantiate the Angular Routing Provider and specifies the routing rules pertinent to the application.

As shown below, Use config function to specify url path, corresponding page url to load and name of the controller to bind to.

AngularJS Controllers are JavaScript functions and are used to add logic to views. Using         two-way data binding we can bind data and show in view pages. Controller’s main     responsibility is to glue the Model (data) with the View.

Steps for creating Angular SPA:


 

  • Add the below code in Index.html

<div>
<ul>
<li> <a href=”#”>Main</a></li>
<li> <a href=”#/Second”>Second</a></li>
</ul>
</div>
<div>
<div ng-view></div>
</div>

  • Create main.html and second.html files.

In main.html add below code
<h1> This is Main</h1>
In second.html add below code
<h1> This is second</h1>

  • Add Angular js to index.html page:

<script src=”ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js”></script>

  • Add angular-route.min.js to index.html page:

<script src=”ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-route.min.js”></script>

  • Create App.js file and add below code

//To tell angular App that we are using particular service we need to put a reference to the module in dependency array.
var myApp = angular.module(‘myApp’, [‘ngRoute’])

//Config is a method that takes function and inject $routeProvider which is an ‘ngRoute’ module in the app
myApp.config(function ($routeProvider) {

//Route Specified Below

$routeProvider
.when(‘/’, {
templateUrl: ‘/pages/main.html’,
controller: ‘mainController’
})

.when(‘/Second’, {
templateUrl: ‘/pages/second.html’,
controller: ‘secondController’
})

});

//mainController
myApp.controller(‘mainController’,[‘$scope’,’$log’,function($scope,$log){
$log.info(‘Hello from mainController’);
}]);

//secondController
myApp.controller(‘secondController’,[‘$scope’,’$log’,function($scope,$log){
$log.info(‘Hello from secondController’);
}]);

When user clicks on the links (hash value changes), angular checks the routes, loads the page content specified in the template url and calls the respective controller.

 

Output:

  • In the below image the URL is with empty # which indicates main.html. Hence, main.html is displayed on page load.

1

  • In the below image the URL is with “#/Second” which indicates Second.html. Hence, Second.html is displayed on page load.

2

 

 

 

Have a great day!

Tagged on:

Leave a Reply

Your email address will not be published. Required fields are marked *