Single Page Application with AngularJS example
AngularJS being JavaScript framework has emerged out be one of powerful frame work. It has been widely used to create a single page application. Single Page application has been very well explained here. I urge you must read it before proceeding further as it’ll help understand better.
SPA uses the concept of routing in which main page remains the same and navigation between pages/views are performed without reloading the main page. The content from other view pages are fetched and loaded in the html tag where ng-view directive has been defined.
Let’s see an example demonstrated below-
The index page contains HTML content on which the SPA will be build.
Index.html
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<script type="text/ng-template" id="pages/home.html">
<h1>Home</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/AngularJS.html">
<h1>Welcome to AngularJS</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/Code2Succeed.html">
<h1>Welcome to Code2Succeed</h1>
<h3>{{message}}</h3>
</script>
<!--Navigation definition-->
<a href="#/">Home</a>
<a href="#/AngularJS">AngularJS</a>
<a href="#/Code2Succeed">Code2Succeed</a>
<div ng-view></div>
<script src="js/spaApp.js" type="text/javascript"></script>
</body>
</html>
The spaApp.js file include the scripting which include controllers and other logic. Let’s see it below
var app = angular.module('myApp', ['ngRoute']); //ngRoute dependency injection
app.config(function ($routeProvider) {
$routeProvider.
//The below will be loaded when url is at home page
when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController'
})
//The below will be loaded when url is changed to pageURL/AngularJS
.when('/AngularJS', {
templateUrl: 'pages/AngularJS.html',
controller: 'AngularJSController'
})
//The below will be loaded when url is changed to pageURL/Code2Succeed
.when('/Code2Succeed', {
templateUrl: 'pages/Code2Succeed.html',
controller: 'Code2SucceedController'
})
//If clicked on any other link from navigation which has not been handled here, will be directed to home page
.otherwise({ redirectTo: '/' });
});
//Controller Definition
//HomeController which will be injected for home view
app.controller('HomeController', function ($scope) {
$scope.message = 'Hello from HomeController';
});
//AngularJSController which will be injected for AngularJS view
app.controller('AngularJSController', function ($scope) {
$scope.message = 'Hello from AngularJSController';
});
//Code2SucceedController which will be injected for Code2Succeed view
app.controller('Code2SucceedController', function ($scope) {
$scope.message = 'Hello from Code2SucceedController';
});
Output:
Homepage.html
http://localhost:57125/app/IndexSPA.htm#/
AngularJS
http://localhost:57125/app/IndexSPA.htm#/AngularJS
Code2Succeed
http://localhost:57125/app/IndexSPA.htm#/Code2Succeed
We can clearly see from above example how an SPA works.