AngularJs(Part 5)--与后台联系
AngularJS内置了$http这个服务来与后台联系。(默认会把接受到的数据转换为json)当然,还有一个$resource来提供与RESTful后台联系的服务。
$http服务
$http比较简单,下面是$http的常规用法
$http.get(url,[config])
.success(function(data,status,headers,config){
...
})
.error(function(data,status,headers,config){
...
});
$http还有下面的API:
$http.post(url[,data,config])
$http.put(url[,data,config])
$http.get(url,[config])
$http.delete(url[,config])
$http.head
$http.jsonp(url[,config]) //用来跨域联系
注意到在post和put方法签名中还有个data的参数,它用来传递需要往服务器发送的数据,他是{}类型的对象,config也是{}类型的对象,可以包含下面的属性
$http({
method:string,
url:string,
params:object, //精确来讲类型是一个key-value的map
data:string or object,
headers:object,
transformRequest:function (data,headersGetter){...} or an array of functions,
transformResponse:function(data,headersGetter){...} or an array of functions,
cache:boolean or Cache object,
timeout:number,
withCredentials:boolean
});
$service服务
$service包装了$http,让AngularJS可以使用RESTful风格编程。
看下面的例子:
module.factory('User',['$resource',function($resource){
return $resource('/user/:userId/card/:cardId',
{userId:'123',cardId:'@id'},
{charge:{
method:'POST',
params:{charge:true},
isArray:false
}});
}]);
可以看到,$resource的签名如下:
$resource(url[,defaultParameters,addtionalActions])
1.例子中url是'/user/:userId/card/:cardId',当中有两个奇怪的东西:‘:userId’和‘:cardId’。 意思是这个url是不完整的,一会儿要用defaultParameters中的userId和cardId属性值来分别代替这两个东西。如果找不到就会用空字符串代替
2.例子中defaultParameters是-- {userId:'123',cardId:'@id'},仍然有奇怪的东西:cardId:'@id'。意思是我现在也不知道是什么东西,但是一会儿使用User这个服务是会传参数过来,我会在参数里面找属性为id的值,并把它给cardId用。(这是最后也会传到url中的:cardId)
3.addtionalActions可以定义一些别的API。以后再说
那么在使用User这个服务时有如下的对应表:
调用的方法 发送的url
User.get({id:1}) /user/123/card/1
User.save({},uuser) /user/123/card
User.query() /user/123/card
User.query({id:1}) /user/123/card/1
User.delete({id:1}) /user/123/card/1
(像上面的query我们可以直接赋值给其他变量,如var users=User.query())
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步