《AngularJS深度剖析与最佳实践》一2.8　路由

本节书摘来自华章出版社《AngularJS深度剖析与最佳实践》一书中的第2章，第2.8节，作者 雪狼 破狼 彭洪伟，更多章节内容可以访问云栖社区“华章计算机”公众号查看

2.8　路由

前端“路由”（router）的概念和后端的路由是一样的，也就是根据URL找到view-controller组合的机制。最开始的时候，Angular的路由库合并在核心库中，现在，路由库从Angular核心库中剥离出来。官方的路由库称为ngRoute，由于其过于简陋，我在工程实践中比较常用的是一个第三方路由库：angular-ui-router。
ngRoute的写法是：

$routeProvider.when('/url', {
    templateUrl: 'path/to/template.html',
    controller: 'SomeCtrl'
});
angular-ui-router的写法是：
$stateProvider.state('name', {
    url: '/url',
    templateUrl: 'path/to/template.html',
    controller: 'SomeCtrl'
});

虽然写法不同，但是其工作原理都是类似的：
监听$locationChangeSuccess事件，它将在每次URL（包括#后面的hash部分）发生变化时触发。
在这个事件中，将根据$routeProvider/$stateProvider中注册的路由表中的URL部分查阅其路由对象，如：

{
    url: '/url',
    templateUrl: 'path/to/template.html',
    controller: 'SomeCtrl'
 }

从这个路由对象中，可以取到两个关键参数：templateUrl/controller。
创建一个scope对象。
加载模板，借助浏览器的能力把它解析为静态的DOM。
使用Controller对scope进行初始化，添加属性和方法。
使用$compile服务把刚才生成的DOM和scope关联起来，变成一个Live DOM。
用这个Live DOM替换ng-view/ui-view中的所有内容。
你可能还有印象，这个过程我们在前面的第1章也用过。
这个过程非常简单。作为练习，你可以使用类似的原理来实现一个简单的路由功能，这个过程中会接触到很多Angular核心服务，对理解Angular的核心工作原理非常有用。