How to Create Single Page Application Using AngularJS

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

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

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

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

services.html

projects.html

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.

Now, start the server and visit the project. You will see following screen as output –

Output:-

angularjs-single-page-application-1

About Page:-

angularjs-single-page-application-2

Services Page :-

angularjs-single-page-application-3

Projects Page :-

angularjs-single-page-application-4

 

In this tutorial we have learn about the How to Create Single Page Application Using AngularJS and its application with practical example. I hope you will like this tutorial.