Single Page Application Create with Angularjs

14

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.

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.

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.

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

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.

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

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.

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

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.

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.

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.

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.

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.

Here is the sample code of mine.

And here is my app.js script.

 

Leave A Reply

Your email address will not be published.