1.1 SPA介绍

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

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

SPA两大缺点：

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

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