极客教程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>
输出:
