小课堂【萌新】

angular路由

分享人:汪胜

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

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

2.知识剖析

AngularJS 路由 简介

AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能。

ngRoute的使用

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

                    


                    
            

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

c.然后注入ngRoute

d.最后配置路由表

一个简单的ngRoute结构示例

                    
        
                    
                

ngRoute包含以下部分:

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

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

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

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

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

$routeProvider提供了定义路由表的服务,它有两个核心方法,when(path,route)和otherwise(params)。

template 值是一个字符串,代表一个Html模板,AngularJS会拿该模板来渲染。

templateUrl 值是一个字符串,代表一个存着Html模板的路径,AngularJS会拿该路径下的Html模板来渲染。

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

一、angularJS学习小结——ngRoute(路由机制)

二、菜鸟教程-AngularJS 路由

三、AngularJS路由二三事(一):ngRoute

8.更多讨论

鸣谢

感谢大家观看

By:汪胜