What is SPA (Single page application) in AngularJS?

Traditionally, applications were Multi-Page Application (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 a 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:

  • 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 the 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 like AngularJS Batarang and React developer tools.
  • Linear user experience
    Browsing or navigating through the website is easy.

Disadvantages:

  • 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 that 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
      </script>
        <script src=
      </script>
    </head>
    <body>
        <!--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>

chevron_right


Output:




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.