Create Single Page Application with Angularjs

Posted by & filed under AngularJS, JAVASCRIPT.

In this tutorial we are going to see how to create single page application with Angularjs. Evolution of JavaScript completely changed the way our application development.

Advantages of Single Page Application:

  1. Single page application loads most of the HTML, CSS and all it’s resources at the time page loading time itself. So if user click’s on any link next time onwards, SPA will renders the page based on the already existing resources, instead loading it from server. So pages loads much faster, and also data transfer between client and server is very less.
  2. In Single page application all the page rendering and html generation tasks are handled by browser, Whereas in olden web application logic’s and HTML generations are handled by server.
  3. Also in single page application data transfer between client and server is in JSON format using REST API. Always JSON formatted data is in light in weight. So data transferred very easily, hence response time too quick.

    So user will never feel like, they are using like web application. Single page application greatly increase user engagement on our application

  4. In Single page application separates the UI and data part, So development of client side and server side done separately.
  5. SPA application is very easy to debug using chrome/Firefox development tools.
  6. Also SPA rest API’s testing are very easily done using some REST CLIENT like Postman.
Create Single Page Application with Angularjs

Step 1: Create index.html File and add Basic HTML Markup in it:

First create new project named single-page in your htdocs/www folder. Then create index.html file and add the following basic HTML markup in it.


<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">        
        <meta name="author" content="muni">
        <meta name="description" content="Single Page Application Using AngularJS">
        
        <!-- Mobile Stuff -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="msapplication-tap-highlight" content="no">
 
        <meta name="theme-color" content="#000000">        
        <link rel="shortcut icon" href="favicon.ico">
        <title>Single Page Application Using AngularJS</title>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body data-ng-app="singlePageApp">  
    	
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>


Create AngularJS Module & Controller

Next we are going to create AngularJS Module & Controller in the process of creating single page application.

Advantages of AngularJS Module

  1. In AngularJS application all the functions and variable we are creating will kept in Module. So this will prevents global variable name and function name pollution.
  2. We can package every functionalities into unique modules. So we can use the required module while we required.
  3. The Angular modules enables reusable code.

Now create Angular module using following AngularJS function angular.module.


var singlePageApp = angular.module('singlePageApp', []);

Next we are initializing AngularJS application using ng-app directive like this.

Note: I always prefer to use AngularJS directive data-ng- instead ng-, so as to write valid HTML.


<!DOCTYPE html>
<html>
	<head>
       ...
    </head>

    <body data-ng-app="singlePageApp">  
        ...
    </body>
</html>

We are successfully initialized AngularJS application. So whatever we write between body tag will be controlled by AngularJS application

Next create controller within that the singlePageApp module using following syntax.


singlePageApp.controller('HomeController',function($scope){
    $scope.title = "Invoice Script Using PHP MySQL jQuery Ajax And Boostrap - Version 2";
});

Now we are created HomeController. While creating controller in AngularJS, we must inject $scope object. So every functions and variable are creating within the controller must attached to the $scope object in order attach that to views.

In our HomeController, We are creating title variable and attaching it to $scope object $scope.title. Now attach that HomeController to the view using data-ng-controller like this


<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">        
        <meta name="author" content="muni">
        <meta name="description" content="Single Page Application Using AngularJS">
        
        <!-- Mobile Stuff -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="msapplication-tap-highlight" content="no">
 
        <meta name="theme-color" content="#000000">        
        <link rel="shortcut icon" href="favicon.ico">
        <title>Single Page Application Using AngularJS</title>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body data-ng-app="singlePageApp">  
    	<div class="container" data-ng-controller="HomeController">
        	<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
                <h1>{{title}}</h1>
            </div>
        </div>    
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script>
            (function(){
                var singlePageApp = angular.module('singlePageApp', ['ngRoute']);
                singlePageApp.controller('HomeController',function($scope){
                    $scope.title = "Invoice Script Using PHP MySQL jQuery Ajax And Boostrap - Version 2";
                });
            })();
        </script>
    </body>
</html>

Next we are binding value in the title variable to the view using AngularJS Expressions. AngularJS Expressions are written using {{..}}. Whatever we write within the Angular Brackets, then AngularJS will try to resolve it. Try to execute above HTML, So that will print Invoice Script Using PHP MySQL jQuery Ajax And Boostrap – Version 2 in the screen. If not then there is some mistakes in our code.

Declaring AngularJS Route and Views

Here comes interesting part of our tutorial, now are going to define different pages of our application that will be loaded without any page refresh. To define AngularJS Route we are going to use ngRoute module, that need to be downloadded and include after AngularJS library like this.


 <script src="js/angular.min.js"></script>
 <script src="js/angular-route.min.js"></script>

Now inject that ngRoute module into our aplication, while create our module itslef like this.


var singlePageApp = angular.module('singlePageApp', ['ngRoute']);

Next we are using config function with $routeProvider to define different urls for different pages. While declaring route itself we may give templateUrl and controller name, so that will be used for different pages while loading it.


singlePageApp.config(function($routeProvider){
         $routeProvider
             .when('/', {
                templateUrl : 'partials/home.html',
                controller : 'HomeController'
            })
            .when('/quiz', {
                templateUrl : 'partials/quiz.html',
                controller : 'QuizController'
            }) 
            .when('/contact', {
                templateUrl : 'partials/contact.html',
                controller : 'ContactController'
            });
    });

Create Template Files and Controllers

Next Create template files and controllers that are we defined while creating routes. So create partials folder within single-page directory. Then create following HTML pages in it home.html, quiz.html and contact.html.

Now add the following HTML content in each file.

 
 
<div class="row">
	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
		<h1>{{title}}</h1>
	</div>
</div>

When we are navigating to the different pages title will be changed based on the controller of the pages. Now create following three controllers we mentioned in the route configuration within that singlePageApp module.


    singlePageApp.controller('HomeController',function($scope){
        $scope.title = "Invoice Script Using PHP MySQL jQuery Ajax And Boostrap - Version 2";
    });
    singlePageApp.controller('QuizController',function($scope){
    	$scope.title = "Responsive PHP Quiz Script";
    });
    singlePageApp.controller('ContactController',function($scope){
    	$scope.title = "Contact";
    });

Inject AngularJS Template Files using ng-view Directive

We have already defined the templates for different pages. In order to load different templates for different page, then we have use ng-view directive in our view file. Let define ng-view directive in our application like this.


<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
       <div data-ng-view></div>
</div>

When we navigate to different pages, then AngularJS itself will make Ajax call and download the defined template and update in the place of ng-view directive.

Linking Different Pages in Single Page AngularJS Application:

While starting Single Page AngularJS Application, most of them will find difficulty while giving link to different page they are created in their application.

While giving link to the href tag we have to use # symbol in order to link different pages like this.


<ul class="nav navbar-nav navbar-right">
      <li role="presentation" class="active"><a href="#/">Home</a></li>
      <li role="presentation"><a href="#quiz">Quiz</a></li>
      <li role="presentation"><a href="#contact">Contact</a></li>
</ul>

Here is the sample code of mine.


<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">        
        <meta name="author" content="muni">
        <meta name="description" content="Single Page Application Using AngularJS">
        
        <!-- Mobile Stuff -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="msapplication-tap-highlight" content="no">
        
        <!-- Chrome on Android -->
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="application-name" content="Single Page Application Using AngularJS">
        <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon.png">
        
        <!-- Safari on iOS -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Single Page Application Using AngularJS">
        <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
        
        <!-- Windows 8 -->
        <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon.png">
        <meta name="msapplication-TileColor" content="#FFFFFF">
        
        
        <meta name="theme-color" content="#000000">
        
        <link rel="shortcut icon" href="favicon.ico">
        
        <title>Single Page Application Using AngularJS</title>
        <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
        <link rel="stylesheet" href="css/style.css" />
    </head>

    <body data-ng-app="singlePageApp">  
    	<!-- Fixed navbar -->
	    <nav class="navbar navbar-default navbar-fixed-top">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="#/">SmartTutorials.net</a>
	        </div>
	        <div id="navbar" class="navbar-collapse collapse">
	          
	          <ul class="nav navbar-nav navbar-right">
                <li role="presentation" class="active"><a href="#/">Home</a></li>
                <li role="presentation"><a href="#quiz">Quiz</a></li>
                <li role="presentation"><a href="#contact">Contact</a></li>
              </ul>
	        </div><!--/.nav-collapse -->
	      </div>
	    </nav>  
        <!-- Insert your HTML here -->
        <div class="container">
        	<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
        		<div data-ng-view></div>
        	</div>
        	<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        		<img src="img/green.png" alt="" class="img img-responsive"/>
        	</div>
        </div> <!-- /container -->
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script src="js/angular-route.min.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>

And here is my app.js script.


(function(){
    var singlePageApp = angular.module('singlePageApp', ['ngRoute']);
    
    singlePageApp.config(function($routeProvider){
         $routeProvider
             .when('/', {
                templateUrl : 'partials/home.html',
                controller : 'HomeController'
            })
            .when('/quiz', {
                templateUrl : 'partials/quiz.html',
                controller : 'QuizController'
            }) 
            .when('/contact', {
                templateUrl : 'partials/contact.html',
                controller : 'ContactController'
            });
    });
    
    
    singlePageApp.controller('HomeController',function($scope){
        $scope.title = "Invoice Script Using PHP MySQL jQuery Ajax And Boostrap - Version 2";
    });
    singlePageApp.controller('QuizController',function($scope){
    	$scope.title = "Responsive PHP Quiz Script";
    });
    singlePageApp.controller('ContactController',function($scope){
    	$scope.title = "Contact";
    });
})();

Download Premium Only Scripts & 80+ Demo scripts Instantly at just 1.95 USD per month + 10% discount to all Exclusive Scripts

If you want any of my script need to be customized according to your business requirement,

Please feel free to contact me [at] muni2explore[at]gmail.com

Note: But it will be charged based on your customization requirement

Get Updates, Scripts & Other Useful Resources to your Email

Join 10,000+ Happy Subscribers on feedburner. Click to Subscribe (We don't send spam)
Every Email Subsciber could have access to download 100+ demo scripts & all future scripts.

%d bloggers like this:

Get Instant Script Download Access!