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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
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.