angular路由

1.背景介绍

angular路由可以实现多视图的单页Web应用。

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

2.知识剖析

AngularJS 路由 简介

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

ngRoute的使用

a.引入两个文件，angular和angular-route：

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.3.13/angular-route.js"></script>
先引入angular再引入angular-route    因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现。

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

c.然后注入ngRoute

d.最后配置路由表

一个简单的ngRoute结构示例

 angular.module('indexApp', [ngRoute])
                .config(function ($routeProvider) {
                    $routeProvider
                        .when('/a', {
                            template: '<p>你好</p>',
                            controller: 'aCtrl'
                        })

                        .when('/b', {
                            templateUrl: 'tem/b.html',
                            controller: 'bCtrl'
                        })

                        .otherwise({
                            redirectTo: '/a'
                        });

                });

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.更多讨论

 

 

 

问题一  ngRoute的缺点？

答：页面中只能有一个ng-view视图。不支持嵌套，子模板中不能设置ng-view。

 

问题二  在模板中controller的用法？

答：模板中Controller的值有两种：字符串和函数。

字符串代表为此模板设置一个controller，名为字符串。

函数代表为此模板定义controller的功能，可以设置$scope的属性等，和外部控制器功能一样。

 

问题三  为什么ui-router可以嵌套路由而ng-route不能嵌套路由？

答：因为ng-route没有明确的父子层级关系,ui-router有明确的父子层级关系。

 

PPT 

video