Single Page Application with AngularJS example

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

SPA_home

 

 

 

 

 

 

AngularJS

http://localhost:57125/app/IndexSPA.htm#/AngularJS

SPA_AngularJS

Code2Succeed

http://localhost:57125/app/IndexSPA.htm#/Code2Succeed

SPA_Code2Succeed

We can clearly see from above example how an SPA works.

 

 

Leave a Reply

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