发表于: 2017-07-07 23:31:13

1 969




ANGULAR路由

小课堂【北京第164期】

分享人:李仁

1.背景介绍

一般来说,我们认为AngularJS是一套前端的MVC框架。那么,为了实现视图的中转,肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。

2.知识剖析

ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。 在使用ngRoute的时候,实际上,我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的,如ng-grid。 在ngRoute中,主要有$route、$routeProvider、$routeParams三个服务项目。 $routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。

服务$routeProvider用来定义一个路由表,即地址栏与视图模板的映射

服务$routeParams保存了地址栏中的参数

服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录

服务$route完成路由匹配,并且提供路由相关的属性访问及事件,如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

angular路由可以实现多视图的单页Web应用。 当请求一个url时,根据路由配置匹配这个url,然后请求模板片段,并插入到ng-view中去。这种做法使网页局部刷新,减少了切换网页时带来的突兀感, 也减少了项目的代码量。

3.常见问题

ngRoute实现原理和如何使用路由?

4.解决方案

NGROUTE实现原理

我们知道,设置这样的锚点,a链接会在同一页面中跳转。ngRoute利用了这一特性将锚点出的文件设置为模板,在锚点被链接时,监听到url的变化,加载相应的模板文件。


 

NGROUTE的使用

a.引入两个文件,angular和angular-route:

b.主页面中设置容器ng-view

c.然后在ng-app中注入ngRoute

d.最后配置路由表



5.参考文献

菜鸟教程

AngularJS路由二三事(一):ngRoute

ngRoute 模块_AngularJS中文网

6..更多讨论

为什么推荐用ui-router替代ngRoute

鸣谢

感谢大家观看

BY : 徐浩程 | 黄国宝 | 李仁



返回列表 返回列表
评论

    分享到