What is SPA (Single page application) in AngularJS ?

Last Updated : 14 Feb, 2023

Traditionally, applications were Multi-Page Applications (MPA) where with every click a new page would be loaded from the server. This was not only time-consuming but also increased the server load and made the website slower. AngularJS is a JavaScript-based front-end web framework based on bidirectional UI data binding and is used to design Single Page Applications. Single Page Applications are web applications that load a single HTML page and only a part of the page instead of the entire page gets updated with every click of the mouse. The page does not reload or transfer control to another page during the process. This ensures high performance and loading pages faster. Most modern applications use the concept of SPA. In the SPA, the whole data is sent to the client from the server at the beginning. As the client clicks certain parts on the webpage, only the required part of the information is fetched from the server and the page is rewritten dynamically. This results in a lesser load on the server and is cost-efficient. SPAs use AJAX and HTML5 to create fluid and responsive Web applications and most of the work happens on the client side. Popular applications such as Facebook, Gmail, Twitter, Google Drive, Netflix, and many more are examples of SPA.

Advantages of Single Page Application:

Team collaboration: Single-page applications are excellent when more than one developer is working on the same project. It allows backend developers to focus on the API, while frontend developers can focus on creating the user interface based on the backend API.
Caching: The application sends a single request to the server and stores all the received information in the cache. This proves beneficial when the client has poor network connectivity.
Fast and responsive: As only parts of the pages are loaded dynamically, it improves the website’s speed.
Debugging is easier: Debugging single-page applications with chrome is easier since such applications are developed using AngularJS Batarang and React developer tools.
Linear user experience: Browsing or navigating through the website is easy.

Disadvantages of Single Page Application:

SEO optimization: SPAs provide poor SEO optimization. This is because single-page applications operate on JavaScript and load data at once server. The URL does not change and different pages do not have a unique URL. Hence it is hard for the search engines to index the SPA website as opposed to traditional server-rendered pages.
Browser history: A SPA does not save the users’ transition of states within the website. A browser saves the previous pages only, not the state transition. Thus when users click the back button, they are not redirected to the previous state of the website. To solve this problem, developers can equip their SPA frameworks with the HTML5 History API.
Security issues: Single-page apps are less immune to cross-site scripting (XSS) and since no new pages are loaded, hackers can easily gain access to the website and inject new scripts on the client-side.
Memory Consumption: Since the SPA can run for a long time sometimes hours at a time, one needs to make sure the application does not consume more memory than it needs. Else, users with low-memory devices may face serious performance issues.
Disabled Javascript: Developers need to chalk out ideas for users to access the information on the website for browsers that have Javascript disabled.

When to use SPA?

SPAs are good when the volume of data is small and the website needs a dynamic platform. It is also a good option for mobile applications. But businesses that depend largely on search engine optimizations such as e-commerce applications must avoid single-page applications and opt for MPAs.

Example: This example describes the basic demo of the Single Page Application in AngularJS.

HTML

<!DOCTYPE html> 
<!--ng-app directive tells AngularJS that myApp 
    is the root element of the application -->
<html ng-app="myApp"> 
  
<head> 
    <!--import the angularjs libraries-->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"> 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
            font-family: Arial, Helvetica, sans-serif; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h3>Single Page Application in AngularJS</h3> 
  
    <!--hg-template indicates the pages 
        that get loaded as per requirement-->
    <script type="text/ng-template" id="first.html"> 
        <h1>First Page</h1> 
        <h2 style="color:green"> 
            Welcome to GeeksForGeeks 
        </h2> 
        <h3>{{message}}</h3> 
    </script> 
    <script type="text/ng-template" id="second.html"> 
        <h1>Second Page</h1> 
        <h2 style="color:green"> 
            Start Learning With GFG 
        </h2> 
        <h3>{{message}}</h3> 
    </script> 
    <script type="text/ng-template" id="third.html"> 
        <h1>Third Page</h1> 
        <h2 style="color:green"> 
            Know about us 
        </h2> 
        <h3>{{message}}</h3> 
    </script> 
  
    <!-- Hyperlinks to load different 
        pages dynamically -->
    <a href="#/">First</a> 
    <a href="#/second">Second</a> 
    <a href="#/third">Third</a> 
  
    <!--ng-view includes the rendered template of 
        the current route into the main page-->
    <div ng-view></div> 
  
    <script> 
        var app = angular.module('myApp', []); 
        var app = angular.module('myApp', ['ngRoute']); 
        app.config(function ($routeProvider) { 
            $routeProvider 
                .when('/', { 
                    templateUrl: 'first.html', 
                    controller: 'FirstController' 
                }) 
  
                .when('/second', { 
                    templateUrl: 'second.html', 
                    controller: 'SecondController' 
                }) 
  
                .when('/third', { 
                    templateUrl: 'third.html', 
                    controller: 'ThirdController' 
                }) 
  
                .otherwise({ redirectTo: '/' }); 
        }); 
  
        // Controller is a JS function that maintains  
        // application data and behavior using $scope object 
        // properties and methods can be attached to the 
        // $scope object inside a controller function 
  
        app.controller('FirstController', function ($scope) { 
            $scope.message = 'Hello from FirstController'; 
        }); 
        app.controller('SecondController', function ($scope) { 
            $scope.message = 'Hello from SecondController'; 
        }); 
        app.controller('ThirdController', function ($scope) { 
            $scope.message = 'Hello from ThirdController'; 
        }); 
    </script> 
</body> 
  
</html>