AngularJS(Part 10)
来源:互联网 发布:小熊刷金币软件 编辑:程序博客网 时间:2024/05/21 09:41
页面导航
过去,一个URL代表一个页面。但是随着Ajax的兴起,情况发生的很大的变化。不同的内容可以使用同一个URL。这让浏览器中的回退、前进甚至收藏按钮都失去了作用。而AngularJS提供了一套解决方案能够避免这种情况。 怎么解决,有一个小技巧:浏览器不会因为URL中#符号后面的值改变而重新请求页面。(关于#符号,参见另一博文)
现有如下RESTful的的URL:
/admin/users/list
/admin/users/new
/admin/users/[id]
我们可以把它们加载URL的#符号后面,就变成了(为了方便,把这种方式先称为hashbang)
http://localhost/ebis#/admin/users/list
http://localhost/ebis#/admin/users/new
http://localhost/ebis#/admin/users/[id].
浏览器其实是认识上面的URL的。并且认为他们是不同的(所有回退、前进按钮就可用了),但是又不会触发重新加载。
好吧,万能的HTML5来了,他提供了一个history API可以处理如同
http://localhost/ebis/admin/users/list
http://localhost/ebis/admin/users/new
的请求,并且还不会触发重新加载。(只是服务器端要经过设置)。
现在AngularJS提供了一个服务,来兼容这两种方式,这就是$location。
如下URL:
http://localhost/ebis#/admin/users/list?active=true#bottom
$location.url() http://localhost/ebis
$location.path() /admin/users/list
$location.search() {active:true}
$location.hash() bottom.
上面四个方法当没有参数时是get方法;当有参数时是set方法。如$location.hash('top')。当然还有protocol(),host(),port(),absUrl()。这些只是get方法。
现在看看$location的具体应用,如下代码:
<div ng-controller="TestController">
<ul>
<li><a href="#/admin/users/list">显示用户</a></li>
<li><a href="#/admin/users/new">添加用户</a></li>
</ul>
<div ng-include="selectedRoute.templateUrl">
<!--Route dependent content gose here -->
</div>
</div>
当然必须还要有Controller
function TestController($scope,$location){
var routes={
"/admin/users/list":"pages/list.html",
"/admin/users/new":"pages/new.html"
};
var defaultRoute=routes["/admin/users/list"];
//仅有上面的还不够,我们还得加个监听器,随时监听URL的变化,就是先面的代码
$scope.$watch(function(){
return $location.path();
},function(newPath){
$scope.selectedRoute=routes[newPath]||defaultRoute;
});
}
最后这个例子并不足够好,实际应用中也不会这么用。实际上我们会用另一个内置的service:$route
$route 和 $routeProvider
(通过源码可发现,$route和$routeProvider似乎是一个东西) 在AngularJS配置阶段,可以用$routeProvider来配置Navigation,以实现和上面使用$location一样的功能,并且还会增强。
angular.module('my-angu',[])
.config(function($routeProvider){
$routeProvider
.when('/admin/users/list',{templateUrl:'pages/list.html',controller:'UsersController'})
.when('/admin/users/new',{templateUrl:'pages/new.html',controller:'NewUserController'})
.when('/admin/users/:id',{templateUrl:'pages/edit.html',controller:'EditorController'})
.otherwise({redirectTo:'/admin/users/list'});
});
@PS:使用此方法,一旦配置,就不能再动态添加其他route了。因为AngularJS只config一次。
页面HTML如下:
<div ng-view>
</div>
对于Controller:
.controller('UsersController',function($scope){
// logic here
})
.controller('NewUserController',function($scope){
// logic here
})
.controller('EditorController',function($scope,$routeParams){
var id=$routeParams.id
// logic here
});
注意到EditorController中注入了一个新的Service:$routeParams。 他就是用来获取URL中的参数设置。 我们设置的URL是'/admin/users/:id',那么如果请求'/admin/users/12',那么$routeParams.id=12.
页面转换
我们可以有两种方式来进行页面转换:
1.尽快显示新页面,当所需数据从Server返回后在刷新页面
2.等所有数据都从Server返回并拼装到页面后,再显示页面
AngularJS默认使用第一种。但是这会产生页面闪烁的问题。(因为短时间内刷新了两次)。所有AngularJS提供了方案使用第二种方式,
如下:
.when('/admin/users/:id',{
templateUrl:'pages/edit.html',
controller:'EditorController',
resolve:{
user:function($route,Users){
return Users.get($route.current.params.id);
}
}
})
在EditorController中
.controller('EditorController',function($scope,user){
$scope.user=user;
});
resolve中的属性function可以返回Javascript对象,还有promise。如果返回的是promise,AngularJS会等待promise resolve后才改变URL。
那么还可以有如下代码:
resolve:{
delay:function($q,$timeout){
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
他的效果是一秒中后在改变URL。
$route的不足
没法改变页面中多个地方的显示。只能改变ng-view所在的标签。没什么好的方法解决,只能凑活使用ng-include解决。
没法递归使用:ng-view中没法再包含ng-view.
最后导航怎么少得了超链接
<a ng-href='#/admin/users/list'></a> 这是hashbang方式.
如果在配置阶段使用
.config(function($locationProvider){
$locationProvider.html5Mode(true);
})
打开了HTML5方式的URL模式,就使用
<a ng-href='/admin/users/list'></a>
过去,一个URL代表一个页面。但是随着Ajax的兴起,情况发生的很大的变化。不同的内容可以使用同一个URL。这让浏览器中的回退、前进甚至收藏按钮都失去了作用。而AngularJS提供了一套解决方案能够避免这种情况。 怎么解决,有一个小技巧:浏览器不会因为URL中#符号后面的值改变而重新请求页面。(关于#符号,参见另一博文)
现有如下RESTful的的URL:
/admin/users/list
/admin/users/new
/admin/users/[id]
我们可以把它们加载URL的#符号后面,就变成了(为了方便,把这种方式先称为hashbang)
http://localhost/ebis#/admin/users/list
http://localhost/ebis#/admin/users/new
http://localhost/ebis#/admin/users/[id].
浏览器其实是认识上面的URL的。并且认为他们是不同的(所有回退、前进按钮就可用了),但是又不会触发重新加载。
好吧,万能的HTML5来了,他提供了一个history API可以处理如同
http://localhost/ebis/admin/users/list
http://localhost/ebis/admin/users/new
的请求,并且还不会触发重新加载。(只是服务器端要经过设置)。
现在AngularJS提供了一个服务,来兼容这两种方式,这就是$location。
如下URL:
http://localhost/ebis#/admin/users/list?active=true#bottom
$location.url() http://localhost/ebis
$location.path() /admin/users/list
$location.search() {active:true}
$location.hash() bottom.
上面四个方法当没有参数时是get方法;当有参数时是set方法。如$location.hash('top')。当然还有protocol(),host(),port(),absUrl()。这些只是get方法。
现在看看$location的具体应用,如下代码:
<div ng-controller="TestController">
<ul>
<li><a href="#/admin/users/list">显示用户</a></li>
<li><a href="#/admin/users/new">添加用户</a></li>
</ul>
<div ng-include="selectedRoute.templateUrl">
<!--Route dependent content gose here -->
</div>
</div>
当然必须还要有Controller
function TestController($scope,$location){
var routes={
"/admin/users/list":"pages/list.html",
"/admin/users/new":"pages/new.html"
};
var defaultRoute=routes["/admin/users/list"];
//仅有上面的还不够,我们还得加个监听器,随时监听URL的变化,就是先面的代码
$scope.$watch(function(){
return $location.path();
},function(newPath){
$scope.selectedRoute=routes[newPath]||defaultRoute;
});
}
最后这个例子并不足够好,实际应用中也不会这么用。实际上我们会用另一个内置的service:$route
$route 和 $routeProvider
(通过源码可发现,$route和$routeProvider似乎是一个东西) 在AngularJS配置阶段,可以用$routeProvider来配置Navigation,以实现和上面使用$location一样的功能,并且还会增强。
angular.module('my-angu',[])
.config(function($routeProvider){
$routeProvider
.when('/admin/users/list',{templateUrl:'pages/list.html',controller:'UsersController'})
.when('/admin/users/new',{templateUrl:'pages/new.html',controller:'NewUserController'})
.when('/admin/users/:id',{templateUrl:'pages/edit.html',controller:'EditorController'})
.otherwise({redirectTo:'/admin/users/list'});
});
@PS:使用此方法,一旦配置,就不能再动态添加其他route了。因为AngularJS只config一次。
页面HTML如下:
<div ng-view>
</div>
对于Controller:
.controller('UsersController',function($scope){
// logic here
})
.controller('NewUserController',function($scope){
// logic here
})
.controller('EditorController',function($scope,$routeParams){
var id=$routeParams.id
// logic here
});
注意到EditorController中注入了一个新的Service:$routeParams。 他就是用来获取URL中的参数设置。 我们设置的URL是'/admin/users/:id',那么如果请求'/admin/users/12',那么$routeParams.id=12.
页面转换
我们可以有两种方式来进行页面转换:
1.尽快显示新页面,当所需数据从Server返回后在刷新页面
2.等所有数据都从Server返回并拼装到页面后,再显示页面
AngularJS默认使用第一种。但是这会产生页面闪烁的问题。(因为短时间内刷新了两次)。所有AngularJS提供了方案使用第二种方式,
如下:
.when('/admin/users/:id',{
templateUrl:'pages/edit.html',
controller:'EditorController',
resolve:{
user:function($route,Users){
return Users.get($route.current.params.id);
}
}
})
在EditorController中
.controller('EditorController',function($scope,user){
$scope.user=user;
});
resolve中的属性function可以返回Javascript对象,还有promise。如果返回的是promise,AngularJS会等待promise resolve后才改变URL。
那么还可以有如下代码:
resolve:{
delay:function($q,$timeout){
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
他的效果是一秒中后在改变URL。
$route的不足
没法改变页面中多个地方的显示。只能改变ng-view所在的标签。没什么好的方法解决,只能凑活使用ng-include解决。
没法递归使用:ng-view中没法再包含ng-view.
最后导航怎么少得了超链接
<a ng-href='#/admin/users/list'></a> 这是hashbang方式.
如果在配置阶段使用
.config(function($locationProvider){
$locationProvider.html5Mode(true);
})
打开了HTML5方式的URL模式,就使用
<a ng-href='/admin/users/list'></a>
0 0
- AngularJS(Part 10)
- AngularJs(Part 1)
- AngularJs(Part 2)
- AngularJs(Part 3)
- AngularJs(Part 4)
- AngularJs(Part 5)
- AngularJs(Part 6)
- AngularJs(Part 7)
- AngularJs(Part 8)
- AngularJs(Part 9)
- 创建自定义 AngularJS 指令:Part 5 link
- 创建自定义 AngularJS 指令:Part I 指令基础知识
- 创建自定义 AngularJS 指令:Part 2 孤立作用域
- 创建自定义 AngularJS 指令:Part 4 transclude和restrict介绍
- 创建自定义 AngularJS 指令:Part 6 使用controllers
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- “JavaScript Promises和AngularJS $q Service”Part 2 (教程篇)
- “JavaScript Promises和AngularJS $q Service”Part 1 (基础篇)
- SQLite源码剖析
- USACO1.3.5 Wormholes (wormhole)
- DOM笔记(三):Element接口和HTMLElement接口
- IOS控件学习:UILabel常用属性与用法
- EXT.NET点击按钮弹出Windows的两种方法
- AngularJS(Part 10)
- Hadoop大象之旅010-使用eclipse查看hadoop源码
- USACO1.3.6 Ski Course Design (skidesign)
- mom.exe进程什么?
- Raspberry - 让命令后台运行避免受到SSH断开影响的方法
- USACO1.4.1 Arithmetic Progressions (ariprog)
- MQTT与CoAP比较
- USACO1.4.2 Mother's Milk (milk3)
- C语言内存管理