Angular.js中$resource高大上的數(shù)據(jù)交互詳解
本文主要給大家介紹的是關(guān)于Angular.js中$resource數(shù)據(jù)交互的相關(guān)內(nèi)容,分享出來(lái)供大家參考學(xué)習(xí),下面來(lái)一起看看詳細(xì)的介紹:
$resource
創(chuàng)建一個(gè)resource對(duì)象的工廠函數(shù),可以讓你安全的和RESFUL服務(wù)端進(jìn)行數(shù)據(jù)交互。
需要注入 ngResource 模塊。angular-resource[.min].js
默認(rèn)情況下,末尾斜杠(可以引起后端服務(wù)器不期望出現(xiàn)的行為)將從計(jì)算后的URL中剝離。
這個(gè)可以通過(guò)$resourceProvider配置:
app.config(["$resourceProvider",function($resourceProvider){ $resourceProvider.defaults.stripTrailingSlashes = false; }])
依賴:$http
使用:$resource(url,[paramDefaults],[actions],options);
url:一個(gè)參數(shù)化的url模板,帶有前綴參數(shù)(如:/user/:username)。如果你使用的是帶端口號(hào)的URL(如:http://example.com:8080/api),則需要慎重考慮。如果帶有后綴(如:http://example.com/resource.json 或者 http://example.com/:id.json 或者 http://example.com/resource/:resource_id.:format) 。如果后綴之前的參數(shù)是空的,在這情況下:resource_id 比 /.優(yōu)先執(zhí)行,如果你需要這個(gè)序列出現(xiàn)而不崩潰,那么你可以通過(guò)/\.避免。
paramDefaults:url參數(shù)的默認(rèn)值,這些可以在方法重寫(xiě)。如果參數(shù)的任何一個(gè)值是函數(shù),它將作為每一次請(qǐng)求獲取的參數(shù)值而被執(zhí)行(除非該參數(shù)被忽略的)。
參數(shù)對(duì)象中的每個(gè)鍵值對(duì)都是先綁定到一個(gè)url模板,任何多余的密鑰都被附加到url query的“?”后。 /path/:verb +{verb:'greet',salutation:'hello'} => /path/greet?salutation=hello
actions: 用戶對(duì)于resource行為的默認(rèn)設(shè)置進(jìn)行擴(kuò)展的自定義配置的散列,該配置將會(huì)以$http.config的格式創(chuàng)建。
action: 字符串,action的名稱,這個(gè)名稱將成為resource對(duì)象方法的名稱。
method:字符串,http方法(不區(qū)分大小寫(xiě),如GET, POST, PUT, DELETE, JSONP等)。
params:對(duì)象,這次行動(dòng)預(yù)先設(shè)定的參數(shù)。如果任何參數(shù)的值是一個(gè)函數(shù),當(dāng)一個(gè)參數(shù)值每一次需要獲得請(qǐng)求時(shí)都會(huì)被執(zhí)行(除非該參數(shù)被忽略的)。
url:字符串,行為指定的網(wǎng)址。
isArray:boolean,如果為true,那么這個(gè)行為返回的對(duì)象是個(gè)數(shù)組。
transformRequest:函數(shù)/函數(shù)的數(shù)組。轉(zhuǎn)換函數(shù)或者一個(gè)包含轉(zhuǎn)換函數(shù)的數(shù)組。轉(zhuǎn)換函數(shù)獲取http請(qǐng)求體和請(qǐng)求頭,并且返回他們的轉(zhuǎn)換版(通常是序列化)。
transformResponse:函數(shù)/函數(shù)的數(shù)組。轉(zhuǎn)換函數(shù)或者一個(gè)包含轉(zhuǎn)換函數(shù)的數(shù)組。轉(zhuǎn)換函數(shù)獲取http響應(yīng)體和響應(yīng)頭,并且返回他們的轉(zhuǎn)換版(通常是序列化)。
cache:boolean,如果為true,一個(gè)默認(rèn)的$http緩存將被作為請(qǐng)求的緩存,否則如果存在一個(gè)用$cacheFactory創(chuàng)建的緩存實(shí)例,則將用于緩存。
timeout:數(shù)值,毫秒,超時(shí)則讓請(qǐng)求中止。
withCredentials:boolean,是否設(shè)置withcredentials flag的XHR對(duì)象。查看更多信息的憑據(jù)。
responseType:字符串,響應(yīng)頭類(lèi)型。
interceptor:對(duì)象,攔截對(duì)象有兩個(gè)可選方法-response和responseError。
Options:擴(kuò)展$resourceProvider行為的自定義設(shè)置,唯一支持的選項(xiàng)是stripTrailingSlashes,boolean類(lèi)型,如果為真,url尾部的斜杠會(huì)被移除(默認(rèn)為true)。
五種默認(rèn)行為:
{ “get”:{method:“get”}, “save”:{method:“post”} “query”:{method:“get”,isArray:true} “remove”:{method:“delete”} “delete”:{method:“delete”} } get([params],[success],[error]); save([params],postData,[success],[error]); query([params],[success],[error]); remove([params],postData,[success],[error]); delete([params],postData,[success],[error]); $save([params],[success],[error]); $remove([params],[success],[error]);
使用代碼:
(function () { angular.module("Demo", ["ngResource"]) .controller("testCtrl", ["$resource",testCtrl]); function testCtrl($resource) { var myResource = $resource("/url/_url", {}, { myPost: { method: "post", url: "/newUrl/_newUrl", params: { id: "4" }, interceptor: { response: function (d) { console.log(d); }, responseError: function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 } } } }); myResource.get({ id: "1" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); myResource.query({ content: "text" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); myResource.save({ text: "Hello World" }, { text: "Hello World" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); myResource.remove({ text: "Hello World" }, { text: "Hello World" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); myResource.delete({ text: "Hello World" }, { text: "Hello World" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); var newResource = new myResource(); newResource.$save({ id: "2" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); newResource.$remove({ id: "3" }, function (d) { console.log(d); }, function (d) { console.log(d);//這里的是隨便寫(xiě)的地址,所以執(zhí)行了error里的函數(shù),可打印看參數(shù)及結(jié)果 }); myResource.myPost(); }; }());
關(guān)于$resource,這里只是簡(jiǎn)單的介紹和使用,本獸對(duì)$resource的理解也不會(huì)很深(很少用到restful),希望有人交流相關(guān)問(wèn)題。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持
相關(guān)文章
Angular 實(shí)現(xiàn)輸入框中顯示文章標(biāo)簽的實(shí)例代碼
這篇文章主要介紹了Angular 實(shí)現(xiàn)輸入框中顯示文章標(biāo)簽的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個(gè)核心概念,但是有時(shí)候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細(xì)說(shuō)明的相關(guān)資料,需要的朋友可以參考下2016-08-08詳解AngularJS跨頁(yè)面?zhèn)髦担╱i-router)
本篇文章主要介紹了詳解AngularJS跨頁(yè)面?zhèn)髦担╱i-router),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08AngularJS基礎(chǔ) ng-keypress 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-keypress 指令,這里對(duì)ng-keypress指令的基礎(chǔ)資料整理,并附有實(shí)例代碼,需要的小伙伴參考下2016-08-08用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼
本篇文章主要介紹了用angular實(shí)現(xiàn)多選按鈕的全選與反選實(shí)例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05AngularJs Understanding the Controller Component
本文主要介紹AngularJs Understanding the Controller Component的內(nèi)容,這里整理了相關(guān)資料,及簡(jiǎn)單示例代碼,有興趣的小伙伴可以參考下2016-09-09