1
2
3
4
5
6
7
3) 创建一些模板视图
myMusic.html
这里是音乐界面啦
1
myMovie.html
这里是电影界面啦
1
myNovel.html
这里是小说界面啦
1
home.html
我是首页界面
1
4)定义路由表
app.config([‘
routeProvider′,function(
routeProvide) {
$routeProvide
.when(‘/’,{templateUrl:”home.html”})
.when(‘/music’,{templateUrl:”myMusic.html”})
.when(‘/movie’,{templateUrl:”myMovie.html”})
.when(‘/novel’,{templateUrl:”myNovel.html”})
.otherwise({redirectTo:’/’});
}]);
1
2
3
4
5
6
7
8
4.深入
1)涉及到的服务与指令
$routeProvider 用来定义路由表,我们会用到里面的when和otherwise两个方法。
$routeParams 用来保存地址栏中的参数,也提供了通配某类地址的能力。
$location 用来分析处理url。
$ng-view 用来指定加载模板视图的区域。
2)$location.path()详解
如果没有参数,返回当前路径,即#号后的内容;也可以传入字符串,将当前路径修改为字符串的内容,并触发路由变化。
假设当前url:http://localhost:63342/RouteDemo/index.html#/
//返回’/’
$location.path();
//将当前url修改为:http://localhost:63342/RouteDemo/index.html#/music
locaiton.path(‘/music′);//返回′/music′
locaiton.path();
1
2
3
4
5
6
3)when及otherwise详解
when方法能够接收两个参数,第一个参数是路由路径,这个路径会与$location.path()的值进行匹配,如果没有任何一个when方法匹配到,那么将会执行otherwise方法。第二个参数是配置对象,它的六个属性分别是controller,template,templateUrl,resolve,redirectTo,reloadOnSearch。
controller
该属性值可以是一个字符串,也可以是一个函数。如果是字符型,则会搜索相应的控制器,如果是函数,那么该函数代表控制器(可以用controllerAs为控制器命名或起别名)。控制器会与路由所创建的作用域关联在一起,并且转到该路径时都会执行一次控制器中的内容。
//每次路径变为/music触发路由变化时都会执行一次控制器中的内容
app.config([‘
routeProvider′,function(
routeProvide) {
routeProvide.when(‘/music’{templateUrl:”myMusic.html”,controller:”myController”})
}]);
app.controller(‘myController’,function(scope) {
console.log(“123”);
});
1
2
3
4
5
6
7
controllerAs
给controller属性值代表的控制器起个别名,以便之后引用。
template
值是一个字符串,代表一个Html模板,AngularJS会拿该模板来渲染。
templateUrl
值是一个字符串,代表一个存着Html模板的路径,AngularJS会拿该路径下的Html模板来渲染。
resolve
值是一个对象,该对象属性名是可以注入到控制器的依赖,属性值可包含下列内容。
类型 含义
字符串 代表要注入的服务名称,依赖名为属性名
函数 返回值为promise对象,控制器会等待promise执行完毕将success函数中的response参数注入到控制器,依赖名为属性名
只有当resolve对象里所有promise对象执行完毕后才会注入到控制器,此时才会发生路由变化,因此可以解决页面闪烁问题(加载页面后才获取到数据去更新视图)。我们来看看对比,下面这个例子控制器注入的a是自定义的myService服务,注入的b则是从服务器端获取到的数据。
test.html代码如下。
我是测试界面 {{ name }}
1
2
index.html代码如下。
var app = angular.module("myApp",['ngRoute']);
app.value("myService","张三");
app.config([' routeProvider′,function( routeProvide) {
routeProvide
.when('/test',{templateUrl:"test.html",
controller:function(scope,a,b) {
scope.name="你好"+a; scope.list = b.data;
},
resolve:{
a:"myService",
b:function( http, timeout) {
var promise = timeout(function() {
returnhttp.get(" http://localhost:3000/person");
},3000);
return promise;
}
}});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
如果直接在控制器而不是resolve中请求,则index.html代码如下。
var app = angular.module("myApp",['ngRoute']);
app.value("myService","张三");
app.config([' routeProvider′,function( routeProvide) {
routeProvide
.when('/test',{templateUrl:"test.html",
controller:function(scope, http, timeout,a) {
scope.name="你好"+a;varpromise= timeout(function() {
return $http.get(" http://localhost:3000/person");
},3000);
promise.then(function(response) {
$scope.list = response.data;
});
},
resolve:{
a:"myService"
}});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
两者效果如下,可以看到写在控制器中的代码不仅需要自己处理逻辑(控制器不推荐写太复杂的逻辑)从promise的success function中取得repsonse参数,而且页面加载不一致,服务器获取的数据在获得后才加载,而在resolve中写,只有等promise执行完毕后才会跳转,然后同步加载整个页面。
这里写图片描述 这里写图片描述
- redirectTo
值是一个字符串或一个函数,该属性写在otherwise中,代表着在when中找不到相应路径时的重定向。如果是字符串,路径会被替换成该值,如果是函数,它有三个参数,第一个是当前路径的路由参数,第二个是当前路径,第三个当前Url的查询串,路径会被替换成该函数的返回值,替换后都会触发路由变化。
- reloadOnSearch
值是一个布尔值,为true的时候
location.search()发生变化时就会重新加载路由,location.search是从当前URL的?号开始(包括?号)的字符串。4)
routeParams
我们可以在路由参数的前面加上:号,AngularJS会把它解析出来并传递给
routeParams。 下面的例子中我们将123456传给value,AngularJS把其解析出来,在
routeParams中添加一个名为value的键,值为123456,我们可以将该服务注入到控制器中使用。
test.html代码如下。
我是测试界面 {{ display }}
1
index.html代码如下。
var app = angular.module("myApp",['ngRoute']);
app.config([' routeProvider′,function( routeProvide) {
routeProvide
.when('/test/:value',{templateUrl:"test.html",
controller:function(scope, routeParams) {scope.display = $routeParams.value;
}});
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
这里写图片描述
5)路由事件
route服务在路由过程中的每个阶段都会触发不同的事件,可以为这些事件设置监听器并做出响应。路由事件都是系统自动从
rootScope广播下去的,我们最好的做法是在$rootScope中监听,而最佳设置的地方就是run方法,可以保证不会漏掉任何路由变化。
下面是四种不同的路由事件。
$routeChangeStart
AngularJS在路由改变之前就会广播此事件,在广播后,路由会开始加载路由变化所需要的所有依赖,并且模板和resolve键中的promise都会被resolve。
$routeChangeSuccess
在路由的依赖加载,且resolve键中所有promise都resolve了就会广播此事件。
$routeChangeError
在resolve键中任何一个promise被拒绝或者失败后会广播此事件,也就是说,此事件与$routeChangeSuccess互斥。
$routeUpdate
在reloadOnSearch属性设置为false的情况下,重新使用某个控制器的实例会广播该事件。
下面一个例子演示了服务器开启和未开启时的各个事件发生的顺序。
var app = angular.module("myApp",['ngRoute']);
app.config([' routeProvider′,function( routeProvide) {
routeProvide
.when('/test',{templateUrl:"test.html",
controller:function() {
console.log("controller");
},
resolve:{
myData:function(http, timeout) {
var promise =timeout(function() {
return $http.get(" http://localhost:3000/person");
},3000);
console.log("resolve");
return promise;
}
}
});
}]);
app.run(function( rootScope, location) {
rootScope. on(' routeChangeStart′,function()console.log("$routeChangeStart");); rootScope. on(′ routeChangeSuccess',function() {
console.log(" routeChangeSuccess");
});rootScope. on(′ routeChangeError',function() {
console.log(" routeChangeError");
});rootScope. on(′ routeUpdate',function() {
console.log("$routeUpdate");
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
这里写图片描述 这里写图片描述