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

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

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

ngroute的写法是：

虽然写法不同，但是其工作原理都是类似的：

监听$locationchangesuccess事件，它将在每次url（包括#后面的hash部分）发生变化时触发。

在这个事件中，将根据$routeprovider/$stateprovider中注册的路由表中的url部分查阅其路由对象，如：

从这个路由对象中，可以取到两个关键参数：templateurl/controller。

创建一个scope对象。

加载模板，借助浏览器的能力把它解析为静态的dom。

使用controller对scope进行初始化，添加属性和方法。

使用$compile服务把刚才生成的dom和scope关联起来，变成一个live dom。

用这个live dom替换ng-view/ui-view中的所有内容。

你可能还有印象，这个过程我们在前面的第1章也用过。

这个过程非常简单。作为练习，你可以使用类似的原理来实现一个简单的路由功能，这个过程中会接触到很多angular核心服务，对理解angular的核心工作原理非常有用。