什么是单页应用？

  单页应用是通过单个页面，载入整个站点的内容。在用户交互的过程中不会跳转到别的URL，也不会再加载整个页面。在SPA中，所需的代码包括HTML/CSS/Javascript都是通过单独的页面加载获得，而其它资源会随用户的操作来动态载入并按需添加到页面中。

  单页应用在项目中怎么实现的？

  我们在运维平台中使用的就是单页应用框架，angularjs+ui-router+nodeJS，主要是利用ui-router来实现单页应用的。

  下面介绍一下ui-router在项目中的使用。

  1.首先引入ui-router文件。

  2.将依赖angular-ui-router注入到主程序中。

  3.在index.jsp中指定特定的视图模板。

  4.使用$stateProvider定义路由。

  $urlRouterProvider负责监听location的变化，.otherwise(rule)定义当请求路由无效的时候页面跳转的路由。

  $stateProvider处理路由的状态，.state(rule)注册一个路由状态，并指定当前路径对应的URL，HTML模板的路径（templateUrl），将会被注入controller去执行的函数（resolve）。在resolve中，我们通常会加载controller以及相应的指令。

  我们从一个路由状态跳转到另外一个的时候，往往会需要上一个视图模板的数据，可以用params路由参数在定义路由的时候指定需要传递的参数，在当前视图中引入$stateParams服务获取。当然，我们还可以在路由跳转时通过$state.go来传递参数，也是引入$stateParams服务获取。在HTML模板中，ui-sref也可以用于传递参数。

  5.在菜单栏中使用定义的路由。

  在项目中，我们给左侧菜单栏的每个标签绑定ui-sref来指定相应的路由，点击左侧标签右侧视图更新。

  为什么不使用angular内置路由ngRouter，而用ui-router？

  angular内置路由ngRouter使用，与ui-router类似。

  UI-Router支持嵌套视图，而ngRoute不支持。在使用ngRoute时，在主页面添加<ng-view></ng-view>标签，会把视图渲染加载到指定的标签，但是如果想在标签嵌套加入<ng-view></ng-view>，ngRoute无法支持；而ui-router的ui-view可以支持这种嵌套的写法。

  UI-Router支持多视图，ngRoute不支持。在页面中添加多个ng-view，仍然会渲染同样的内容。而ui-router可以渲染不同的视图。

  单页应用的其他实现方法

  jQuery + requireJS( + text.js) + Path.js

  1.在主页面引入requireJS。

  2.在config.js中配置text.js和Path.js的默认路径。

  3.使用text.js加载所需的HTML、CSS、JS文件。如果一个依赖使用了text!前缀，它就会被自动加载。

  4.使用Path.js来定义路由。

  5.在HTML中给菜单栏的标签绑定相应的路由，点击菜单会根据路由去加载所需的HTML、CSS、JS文件。

  Vue.js + vue-router

  1. 定义路由。先定义路由的组件，也就是模板文件，可以是HTML字符串或者直接import其他文件。然后将路由的路径映射到路由组件，接着创建router实例，最后记得将创建好的实例注入到路由中。

  2. 在HTML页面中指定路由渲染的位置。

  vue-router和angular的ui-router使用差不多，也支持嵌套路由和多视图，而且还考虑到地址栏前进、后退的问题，总之vue-router使用起来比ui-router还要方便。参考链接：http://router.vuejs.org/zh-cn/。

  单页应用的优缺点

  优点

  一是良好的前后端分离。前端负责界面的展示，后端负责处理数据，各司其职；
  二是减轻了服务器的压力，服务器不用管页面的展示，只需要提供数据；
  三是用户体验好，因为用户每次操作不用重新加载页面，导致访问的时候页面速度很快。

  缺点

  一是SEO问题，现在可以用Prerender解决；
  二是首次加载的时候速度会慢，因为第一次的时候除了渲染HTML页面，还需要加载页面的框架和应用程序；
  三是地址栏的前进、后退问题，不过有些框架已经提供了解决方法。