What is SPA (Single page application) in AngularJS?

23 Jul, 2020
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 collaborationSingle-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.
CachingThe 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 responsiveAs only parts of the pages are loaded dynamically, it improves the website’s speed.
Debugging is easierDebugging single page applications with chrome is easier since such applications are developed using like AngularJS Batarang and React developer tools.
Linear user experienceBrowsing or navigating through the website is easy.
Disadvantages:
SEO optimizationSPAs 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 historyA 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 issuesSingle-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 ConsumptionSince 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 JavascriptDevelopers need to chalk out ideas for users to access the information on the website for browsers that have Javascript disabled.
When to use SPASPAs 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.
<!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>    </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>
Output:
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?