本节书摘来自华章出版社《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的核心工作原理非常有用。