AngularJS的SPA（单页应用）是什么

传统上，应用程序是多页面应用程序（MPA），每一次点击都会从服务器上加载一个新页面。这不仅耗费时间，而且还增加了服务器的负载，使网站的速度变慢。AngularJS是一个基于JavaScript的前端Web框架，基于双向UI数据绑定，用于设计单页应用程序。单页应用程序是加载单个HTML页面的Web应用程序，每次点击鼠标时，只有页面的一部分而不是整个页面被更新。在这个过程中，页面不会重新加载或将控制权转移到另一个页面。这确保了高性能和更快地加载页面。大多数现代应用程序使用SPA的概念。在SPA中，整个数据一开始就从服务器发送到客户端。当客户点击网页上的某些部分时，只从服务器上获取所需的那部分信息，并动态地重写页面。这导致服务器上的负载较少，并且具有成本效益。SPA使用AJAX和HTML5来创建一个流畅和响应式的网络应用程序，大部分工作发生在客户端。流行的应用程序，如Facebook、Gmail、Twitter、Google Drive、Netflix等，都是SPA的例子。

优势:

Team collaboration
当一个以上的开发者在同一个项目上工作时，单页应用程序是非常好的。它允许后端开发者专注于API，而前端开发者可以专注于创建基于后端API的用户界面。
Caching
应用程序向服务器发送一个请求，并将所有收到的信息存储在缓存中。当客户端的网络连接不佳时，这被证明是有益的。
速度快，反应灵敏
由于只有部分页面是动态加载的，所以它提高了网站的速度。
调试更容易
用chrome调试单页应用程序更容易，因为这类应用程序是使用像AngularJS Batarang和React开发者工具开发的。
线性用户体验
浏览或浏览网站是很容易的。

劣势:

SEO optimization
SPA提供糟糕的SEO优化。这是因为单页应用程序在JavaScript上操作，在一次服务器上加载数据。URL不会改变，不同的页面没有一个独特的URL。因此，相对于传统的服务器渲染的页面，搜索引擎很难对SPA网站进行索引。
Browser history
SPA并不保存用户在网站内的状态转换。浏览器只保存以前的页面，不保存状态转换。因此，当用户点击返回按钮时，他们不会被重定向到网站的前一个状态。为了解决这个问题，开发者可以为他们的SPA框架配备HTML5历史API。
Security issues
单页应用程序对跨网站脚本（XSS）的免疫力较低，由于没有加载新的页面，黑客可以很容易地进入网站并在客户端注入新脚本。
Memory Consumption
由于SPA可以运行很长时间，有时甚至是几个小时，因此需要确保应用程序消耗的内存不会超过它的需求。否则，使用低内存设备的用户可能面临严重的性能问题。
Disabled Javascript
开发人员需要为用户在禁用Javascript的浏览器上访问网站信息提供思路。

什么时候使用SPA
当数据量较小且需要动态平台的网站时，SPA是不错的选择。它也是移动应用的一个好选择。但主要依赖搜索引擎优化的企业，如电子商务应用，必须避免单页应用，选择MPA。

<!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>