js随手笔记之一 单页面应用
一 什么是单页面应用？
单页应用(Single Page App，简称：SPA)，是指在浏览器中运行的应用，它们在用户使用时通过浏览器加载独立的HTML页面并且无需离开此导航页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。
二 单页应用带来的好处？
1、良好的用户体验性，反应快，除了首页加载的东西会比较多之外，其他页面变更时，只需要加载极小的部分，而不需要重新加载整个页面。可让 整个应用具有更好的响应和良好的互动性。
2、前后端分离。后端不再负责前段的路由控制和模板的转换，只需负载数据的存储和计算。也可使后端代码实现API通用化，同一套代码可适用于Web界面、手机等多种客户端
3、减轻服务器压力。在上两个点提过，单页面可减少静态文件的请求次数，且服务器只需要处理数据的增删改查，而将更多的业务逻辑放在了客户端处理，从而将服务器的负担减轻。
三 为什么单页应用这么火？
最近几年，有一大部分传统网站转换成了单页面应用，为什么SPA这么火？答案很简单:为了追求更高一层楼的用户体验，在SPA这种特点就是在首次加载的时候就基本上是将所有东西加载到本地之中，之后的请求都只是获取新的服务器的数据，而不需要打开另外的页面又加载一次Html，有调查表明，相对于网站首次加载快慢，用户更关心的是在使用过程中的流畅程度。
四 如何创建一个单页面应用？
随着 SPA 的流行，诞生了一些框架，让开发 SPA 变得简单。这一类的框架比较知名的AngularJS, Ember.js, ExtJS 还有 facebook 的 React ，国人尤小右开发的 vue.js。我们以angular为例子。
1、框架
Angular.js1.2x + ngRoute组件+ seajs
在我们的页面中引入这三个部分之后，我们就可以进行我们具体的页面开发工作，具体的分工：
Angular 作为模板引擎来渲染页面
seajs 来管理不同的模板以及异步加载
ngRoute 主要用来管理路由
2、页面的主体结构：
<body style="overflow-y: hidden;" id="parentCtrl" ng-controller="parentCtrl">
<!-- 路由渲染模块，路由对应的模块在这里生成 -->
<div ng-view></div>
<!-- 引入seajs -->
<script type="text/javascript" src="js/sea.js?v=20170906"></script>
<script type="text/javascript">
seajs.use("index.js",function(index){
index.init();
});
</script>
</body>
3、angular控制模块
define(function(require, exports, module) {
//引入angular 、ngroute
require("angular");
require('angular-route');
/*声明模块*/
app = angular.module('myApp', ['ng', 'ngRoute'])
/*声明控制器*/
app.controller('parentCtrl',['$scope','$location',function($scope, $location) {
}])
})
4、配置路由
在传统的网站中，当我们用浏览器访问一个url地址的时候，Web 服务会接收到这个请求，然后会解析 URL 中的路径，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。
而ngroute所定义的前端路由，是指js根据URL的不同而展示不同的页面内容。例如下面我所配置的两个路由'/start'、'/main'，当我们访问http://.../#/start,路由会自动将会拉取它们关联的文件，我们的内容将会照我们的意思进行改变.我们只需要定义好将会被注入的页面就行了. 我们也将会让它们每一个都展示来自与他们相关的控制器的内容.
app.config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {
$routeProvider
.when('/start', {
templateUrl: 'start.html',
controller: 'start',
resolve: {
keyName: function($q) {
var deferred = $q.defer();
require.async("start.js",function(controller){
$controllerProvider.register('start', controller);
deferred.resolve();
});
return deferred.promise;
}
}
})
.when('/main', {
templateUrl: 'tpl/main.html',
})
}])
