In this tutorial you will learn about the How to Create Single Page Application Using AngularJS and its application with practical example.
Create Single Page Application Using AngularJS
AngularJS is an open source front-end web application framework based on javascript, it is widely used for building Single Page Application (SPA). It extends the traditional HTML with new attributes and data-binding components that enable us to serve dynamic page content. In this article, we’ll learn how to build a Single Page Application (SPA) using AngularJS and AngularJS Route library.
What Is Single Page Application?
AngularJS Single page application (SPA) is a web application that is contained in a single page. In a single page application all our code (JS, HTML, CSS) is loaded when application loads for the first time. Loading of the dynamic contents and the navigation between pages is done without refreshing the page.
Step 1:- This is the simple part. Here we will create a simple index.html file and add a simple layout with a navigation bar. We will also load angular and angular route library via CDN.
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html> <head> <title> Angular Routing </title> </head> <style> #nav{ width: 19%; display: inline-block; background: #429cd6; border: 1px solid #3c87b2; } #page-content{ width: 79%; display: inline-block; vertical-align: top; padding: 8px; padding-top: 0px; } ul{ list-style: none; padding-right: 10px; } li{ background-color: #ffffff; color: white; margin: 5px; text-decoration: none; text-align: center; padding: 3px; font-size: 20px; font-family: 'Helvetica', sans-serif; } a{ color: black; text-decoration: none; } </style> <!-- Load AngularJS and Angular Route JS --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> <body ng-app="myApp"> <!-- AngularJS Navigation --> <div id="nav"> <ul> <li><a href="#!">Home</a></li> <li><a href="#!about">About</a></li> <li><a href="#!services">Services</a></li> <li><a href="#!projects">Projects</a></li> </ul> </div> <div id="page-content"> <h1>AngularJS Single Page Application - W3Adda</h1> <!-- this is where page content will be loaded --> <div ng-view></div> </div> <!-- Load AngularJS Module and Angular Route Configuration --> <script type="text/javascript" src="script.js"></script> </body> </html> |
Step 2:-
Angular Application
Every angular application starts from creating a angular module. Module is a container that holds the different parts of your application such as controllers, service, etc. In this step we will create a simple javascript file script.js and put the following code in it to create our angular module.
script.js
|
1 2 |
// create the module and name it myApp var app = angular.module("myApp", ['ngRoute']); |
The app variable is initialized as angular module and named as “myApp”, the ng-app directive is used to bind the angular application to a container. It is important to use the same module name to bind using ng-app directive.
Step 3:-
Configure Routes
Since we are making a single page application and we don’t want any page refreshes. Here we’ll use Angular’s routing capabilities to setup single page application.We will use ngRoute module for that. Notice that we have added ngRoute as a part of the parameter passed to our angular module. The ngRoute module provides routing, deeplinking services and directives to our angular applications. We will be using $routeProvider in app.config to configure our application routing. Let’s open our script.js file and put the following in it –
script.js
|
1 2 3 4 5 6 7 8 9 10 11 |
// create the module and name it scotchApp var app = angular.module("myApp", ['ngRoute']); // configure routes app.config(function($routeProvider){ $routeProvider .when("/", {template:"<p>AngularJS Single Page Application(SPA).</p>"}) .when("/about", {templateUrl : "about.html"}) .when("/services", {templateUrl : "services.html"}) .when("/projects", {templateUrl : "projects.html"}) }); |
Now we have defined our routes with $routeProvider. As you can see by the configuration, you can specify the route, the template file to use, and even a controller.
AngularJS Template
Writing HTML code inside template is very constraining and to counter it one can use templateURL and instead of writing HTML code directly we specify the HTML file that will be injected corresponding to route. Now, we just need to define the page templates that will be injected.
about.html
|
1 2 3 |
<!-- about.html --> <h2>About</h2> <p>About Page Contents</p> |
services.html
|
1 2 3 |
<!-- services.html --> <h2>Services</h2> <p>Service Page Contents</p> |
projects.html
|
1 2 3 |
<!-- projects.html --> <h2>Projects</h2> <p>Project Page Contents</p> |
AngularJS View
To finish off with this tutorial, we need to specify the container where content of each page will be loaded in our layout. In AngularJS, there is a ng-view directive that will injects the template file of the current route (/about , /services or /projects) in the main layout file. Notice that we have added ng-view directive in main (index.html) layout file.
|
1 2 3 4 5 6 |
<div id="page-content"> <h1>AngularJS Single Page Application - W3Adda</h1> <!-- this is where page content will be loaded --> <div ng-view></div> </div> |
Now, start the server and visit the project. You will see following screen as output –
Output:-
About Page:-
Services Page :-
Projects Page :-
