什么是AngularJS中的SPA(单页应用程序)？

传统上，应用程序是多页面应用程序(MPA)，每次单击都会从服务器加载新页面。这不仅浪费时间，而且增加了服务器负载，并使网站变慢。 AngularJS是基于JavaScript的前端Web框架，基于双向UI数据绑定，用于设计单页应用程序。单页面应用程序是加载单个HTML页面的Web应用程序，每次单击鼠标都会更新页面的一部分而不是整个页面。在此过程中，该页面不会重新加载或将控制权转移到另一个页面。这样可以确保高性能并更快地加载页面。大多数现代应用程序都使用SPA的概念。在SPA中，整个数据从一开始就从服务器发送到客户端。当客户端单击网页上的某些部分时，仅从服务器中获取信息的必需部分，并且页面将被动态重写。这样可以减少服务器上的负载，并具有成本效益。 SPA使用AJAX和HTML5创建流畅且响应迅速的Web应用程序，并且大部分工作都在客户端进行。 SPA的示例包括Facebook，Gmail，Twitter，Google Drive，Netflix等流行的应用程序。
好处：

• 团队合作
  当多个开发人员在同一个项目上工作时，单页应用程序非常好。它使后端开发人员可以专注于API，而前端开发人员可以专注于基于后端API创建用户界面。
• 快取
  该应用程序向服务器发送单个请求，并将所有接收到的信息存储在缓存中。当客户端的网络连接较差时，这被证明是有益的。
• 快速响应
  由于仅动态加载页面的一部分，因此可以提高网站的速度。
• 调试更容易
  使用chrome调试单页应用程序更加容易，因为此类应用程序是使用AngularJS Batarang和React开发人员工具开发的。
• 线性用户体验
  浏览或浏览网站很容易。

缺点：

• SEO优化
  SPA提供的SEO优化效果不佳。这是因为单页应用程序在JavaScript上运行，并一次在服务器上加载数据。该URL不会更改，并且不同的页面没有唯一的URL。因此，与传统的服务器渲染页面相比，搜索引擎很难为SPA网站建立索引。
• 浏览器历史
  SPA不会保存用户在网站内的状态转换。浏览器仅保存先前的页面，而不保存状态转换。因此，当用户单击“后退”按钮时，他们不会重定向到网站的先前状态。为了解决此问题，开发人员可以为其SPA框架配备HTML5 History API。
• 安全问题
  单页面应用程序不太容易受到跨站点脚本(XSS)的影响，并且由于没有加载新页面，因此黑客可以轻松获得对网站的访问权限并将新脚本注入客户端。
• 内存消耗
  由于SPA可以长时间运行，有时一次可以运行数小时，因此需要确保该应用程序不会消耗过多的内存。否则，具有低存储设备的用户可能会遇到严重的性能问题。
• 禁用的Javascript
  开发人员需要提出想法，以便用户访问禁用了Javascript的浏览器在网站上的信息。

何时使用SPA
当数据量较小且需要动态平台的网站时，SPA很好。对于移动应用程序来说，它也是一个不错的选择。但是，在很大程度上依赖搜索引擎优化的企业(例如电子商务应用程序)必须避免使用单页应用程序，而选择MPA。

    
        
        
      
        
      
    
    
        
        
            <h1>First Page</h1>
            <h2 style="color:green">
                Welcome to GeeksForGeeks
            </h2>
            <h3>{{message}}</h3>
        
        
            <h1>Second Page</h1>
            <h2 style="color:green">
                Start Learning With GFG
            </h2>
            <h3>{{message}}</h3>
        
        
            <h1>Third Page</h1>
            <h2 style="color:green">
                Know about us
            </h2>
            <h3>{{message}}</h3>
        
        
        First
        Second
        Third
        
        
        
            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';
            });
        
    

输出：