《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的核心工作原理非常有用。

相关文章
|
7月前
|
JavaScript 前端开发 UED
AngularJS路由管理:深度解析$routeProvider的应用与实践
【4月更文挑战第28天】本文深入解析AngularJS的$routeProvider,它是AngularJS路由系统的关键,用于定义应用的视图和路径。通过routeProvider,开发者能根据URL变化动态加载内容,实现单页应用效果。配置$routeProvider涉及导入angular-route.js,注入"ngRoute"依赖,并使用when方法定义路由规则。ng-view指令用于显示路由打开的页面,而otherwise方法处理未定义路由,提供默认响应。$routeProvider使导航体验优化,助力构建高效Web应用。
|
移动开发 前端开发 API
angularJS学习小结——ngRoute(路由机制)
angularJS学习小结——ngRoute(路由机制)
166 0
angularJS学习小结——ngRoute(路由机制)
|
安全 前端开发 测试技术
《AngularJS深度剖析与最佳实践》一导读
现在,软件不但运行在PC上,还要运行在智能手机上,运行在各种Pad上,屏幕分辨率更是多到让研发和测试工程师发怵的地步。
1428 0