Web-Based Single Page Applications – What Are They?

In an era when multitasking and efficiency is a necessity, web-based Single Page Applications (SPAs) is heaven. The term ‘single page application’ refers to a website that has all of its contents accessible on only one page. It makes use of templates and data injection, as well as other techniques, to avoid having to reload all the data on every page change.

To create a single page web application using Angular JavaScript templates, you’ll need a JavaScript file that will contain all the Angular code. Have an index.html file, which will serve as your main layout. After coding your headers and navigation bars, this is where you will inject the Angular template:

<div id="body">
<!-- Inject Angular template content here -->
</div>

In your JavaScript file, create the module and the controller. The controller is where you implement the business model functions:

var spApp = angular.module('spAppView'', []);
// Integrate the controller and inject the angular #scope: spAppView.controller(sampleViewcontroller,function($scope)
{
// Insert function code here
$scope.sampleData = "This is an example";
}

To display this data in your page, you need to create an HTML file for its container view (excluding the default tags like <html> or <body>, etc.):

<div>
<div>
<input type = "text" data-ng-model="sampleData" />
</div>
</div> 
<div>
<div>
<h1> Sample Header ({{sampleData}}) </h1>
</div>
</div>

The ‘ng-model’ denotes two-way binding so that when the values in the model change, the value displayed in the view will also change (and vice versa).

To map the view and controller, you will need another controller script with Angular Routing. The $routeProvider will wire the controllers and the templates together:

var app = angular.module('SampleSPApp', ['ngRoute', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider){
$routeProvider.when("/explore",{
controller: "sampleViewController",
templateUrl: "/app/views/sampleView.html"
});
$routeProvider.otherwise({redirectTo: "/explore"});
});

Going back to the main index body, add this line to call the ‘ng’ view:

<body>
<div data-ng-view=""></div>
</body>

Finally, in the end, don’t forget to load the JavaScript files:

<script type="text/javascript" src="app/SampleSPApp.js"></script> // Main Script
<script type="text/javascript" src="app/controllers/sampleViewController.js"></script>

What are the benefits?

Speed

When you have a home page, with buttons and links that direct you to other pages in the site, each time you click them means time spent sending the request to the server and the server returning the data. Of course, loading a web application with all the information in one go takes longer than loading a specific page with specific data. But collectively speaking, sending a request, loading everything at once and navigating through them seamlessly is much faster than having to refresh the data repeatedly.

The reduction in data being transferred allows for enhanced responsiveness and interactivity. When you load an individual page, not only do you reload the main content, but you also reload layout data, data from the previous pages and a lot more. By having a single page, user data does not have to bounce back and forth just to be preserved in different pages. You can also choose to manipulate only one view or container on the page. This allows the web application to respond much quicker to the user’s actions and requests.

Reduced Server Load

Often times pages are designed with elements that are visible in all the pages of the web application, such as collections of links, advertisements, news corners, chat boxes and a lot more. For every page that loads, these get repetitively loaded as well. SPAs lighten the load of the server by loading all of them only once and changing only the body content or screen location. Thus, the states of the other parts of the page are preserved and repetitive requests to the server are minimized.

Single page web applications are becoming a trend because they tend to feel more like a native application rather than something loaded from the Internet. It makes the experience more efficient and convenient for the users. It’s still a young technology that is waiting to be developed and utilized for the benefit of all web users and developers. 

Gaurav Singh

Gaurav is the Director of Delivery at Taazaa. He has 15+ years of experience in delivering projects and building strong client relationships. Gaurav continuously evolves his leadership skills to deliver projects that make clients happy and our team proud.