云计算开发部-李敏军

时间：2016.03

1.1 SPA介绍

企业级Web应用都被设计为单页面应用（Single Page Application）。

单页面应用是近几年出来的一种新的Web界面组织和交互方式。不同于传统的Web界面，单页面应用中所有的用户操作都在一个页面中完成。不需要通过刷新和重新载入来发送或获取数据，而是使用Ajax的方式与后台进行交互，然后根据数据局部刷新页面内容。这种方式能带来更好的用户体验，同时也提高了前后台交互的性能。

SPA两大缺点：

1. 不利于SEO
2. 用户点击浏览器的前进、后退按钮
3. 首次加载耗时较长

1.2 路由的介绍

如此一来，便形成了通过地址栏进行导航的深度链接（deeplinking ），也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。

2.1 ngRoute介绍

ngRoute是一个单独的模块，包含一下内容：

• 服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射
• 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'}
• 服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller
• 指令ngView用来在主视图中指定加载子视图的区域

2.2 ngRoute组成结构

2.3 ngRoute demo

.config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/Book/:bookId', {
    templateUrl: 'book.html',
    controller: 'BookController',
    resolve: {
      // I will cause a 1 second delay
      delay: function($q, $timeout) {
        var delay = $q.defer();
        $timeout(delay.resolve, 2000);
        return delay.promise;
      }
    }
  })
  .when('/Book/:bookId/ch/:chapterId', {
    templateUrl: 'chapter.html',
    controller: 'ChapterController'
  });

  // configure html5 to get links working on jsfiddle
  //$locationProvider.html5Mode(true);
});

官方demo：https://docs.angularjs.org/api/ngRoute/service/$route#example

2.4. ngRoute的优点和缺点

优点：

1. 实现了前端的路由管理
2. 降级实现。AngularJS的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式

缺点：

1. 不能嵌套ng-view
2. 同一个页面不能同时存在多个ng-view
3. 路由不存在，无法通过事件监听

VS

3.1 ui-router介绍

ui-router 的工作原理非常类似于 Angular 的路由控制器，但它只关注状态。

• 在应用程序的整个用户界面和导航中，一个状态对应于一个页面位置
• 通过定义controller、template和view等属性，来定义指定位置的用户界面和界面行为
• 支持嵌套ui-view
• 支持同级多个ui-view

3.2 ui-router关键要点

State Manager

Templates

Controllers

Resolve

State Change Events

• $stateChangeStart
• $stateNotFound

多个视图

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

嵌套视图

https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views

3.3 嵌套视图和多个视图

3.4 ui-router demo

URL:http://angular-ui.github.io/ui-router/sample/#/

4.Q&A

5. 参考网址

https://www.zhihu.com/question/20792064

http://www.cnblogs.com/lvdabao/p/3481224.html

ui-router wiki：https://github.com/angular-ui/ui-router/wiki

学习ui-router：http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/

嵌套视图和多重子视图：http://blog.wangtuyao.com/post/2015/03/23/nested-views-and-multiple-named-views-in-angular-ui-router.html