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