[AngularJS] AngularJS系列(6) 中級篇之ngResource

標籤：

目錄

• $http
• ngResource

 

$http幾乎是所有ng開發中,都會用到的服務.本節將重點說下$http 與 ngResource

 

$http使用：$http(config);

 

參數：

method：字串，要求方法。

url：字串，請求地址。

params：字串或者對象，將使用paramserializer序列化並且作為GET請求的參數。

data：字串或者對象，作為請求資訊資料的資料。

headers：對象，字串或者函數返回表示發送到伺服器的HTTP要求標頭。如果函數的傳回值為空白，則headers則不發送。函數接受一個設定物件作為參數。

xsrfHeaderName：字串，填充XSRF令牌的HTTP要求標頭名稱。

xsrfCookieName：字串，含有XSRF令牌cookie的名字。

transformRequest：函數/函數的數組。轉換函式或者一個包含轉換函式的數組。轉換函式擷取http請求體和要求標頭，並且返回他們的轉換版（通常是序列化）。

transformResponse：函數/函數的數組。轉換函式或者一個包含轉換函式的數組。轉換函式擷取http響應體和回應標頭，並且返回他們的轉換版（通常是序列化）。

paramSerializer：字串或者返回字串的函數。用於編寫請求參數（指定為對象）的字串表示形式的函數。如果指令是字串，那麼將被解釋為通過$injector註冊的函數，這意味著你能通過註冊服務方式建立你自己的序列化程式。預設的序列化是$httpParamSerializer；或者你可以使用$httpParamSerializerJQLike。

cache：boolean，如果為true，一個預設的$http緩衝將被作為請求的緩衝，否則如果存在一個用$cacheFactory建立的緩衝執行個體，則將用於緩衝。

timeout：數值，毫秒，逾時則讓請求中止。

withCredentials：boolean，是否設定withcredentials flag的XHR對象。查看更多資訊的憑據。

responseType：字串，回應標頭類型。

 

 

但通常我們這樣在ng中這樣使用http服務.

    angular.module(‘myApp‘, []).controller(‘helloCtrl‘, [‘$http‘, function (http) {            var url = ‘/index.html‘;            http.get(url)                .success(function (data, status, headers, config) {                    console.log(‘請求內容:‘ + data);                }).error(function (data) {                    console.warn(‘請求錯誤:‘ + data);                });        }]);

　　

我們也可以通過ng的promise實現.2者結果一致

            http.get(url)                .then(function (rsp) {                    debugger;                    console.log(‘請求內容:‘ + rsp.data);                }, function (rsp) {                    console.warn(‘請求錯誤:‘ + rsp.data);                });

 

在ng中,http服務還支援快捷方法有

createShortMethods(‘get‘, ‘delete‘, ‘head‘, ‘jsonp‘)

和

createShortMethodsWithData(‘post‘, ‘put‘, ‘patch‘)

 

 

在方法createHttpBackend中,定義了ng http發送請求的核心代碼.

 

 

配置http

        angular.module(‘myApp‘, [], function ($httpProvider) {            //為所有請求設定Auth頭            $httpProvider.defaults.headers.common[‘Authorization‘] = ‘Bearer xx‘;            //為所有GET請求設定DO NOT TRACK(預設情況下 get不在defaultheaders裡)            $httpProvider.defaults.headers.get = $httpProvider.defaults.headers.get || {};            $httpProvider.defaults.headers.get[‘DNT‘] = ‘1‘;        })

 

 

 

ngResource

如果你的介面是RESTful類型的.ng推薦使用ngResource方式來處理.

Nuget:Install-Package AngularJS.Resource

 

定義resource

讓我們定義1個UserCard服務資源

            .factory(‘UserCard‘, [‘$resource‘, function ($resource) {                return $resource(‘/user/:userId/card/:cardId‘,                    { userId: 12, cardId: ‘@id‘ },                    { charge: { method: ‘post‘, params: { charge: true }, isArray: false } });            }])

　　

 

這裡說明一下$resource方法

參數1:　　必須,為資源的URL地址

參數2:　　可空,為URL地址預設值

參數3:　　可空,為自訂資源方法

 

調用resource

開始調用我們建立的資源.(一般我們會把我們的資源定義成服務,這樣其他開發也能隨時調用)

            .controller(‘helloCtrl‘, [‘UserCard‘, ‘$scope‘, function (userCard, $scope) {                var data = userCard.query();                $scope.data = data;            }]);

這裡調用了最簡單的query方法(不需要傳參數).

但是奇怪的是,我們不是在回呼函數中拿到傳回值的.

實際上,在這裡會先給scope.data賦值一個空的引用對象.然後在拿到資料之後,由於是引用對象,自動同步到scope上.同時頁面也會重新整理.

 

如果我們在拿到資料後做一些操作.也可以通過回呼函數方式.

                userCard.query(function (data) {                    //todo                });

 

在ngResource中預設支援的方法及對應的HttpMethod

{  get: {method: ‘GET‘},  save: {method: ‘POST‘},  query: {method: ‘GET‘, isArray: true},  remove: {method: ‘DELETE‘},  delete: {method: ‘DELETE‘}}

 

再說下特殊的save方法.(ngResource中 修改和儲存共用save方法)

                userCard.save({ id: 1 }, card);//修改資料                userCard.save({}, card);　　　　//儲存資料

 

當然我們也可以建立個方法update方法

            .config([‘resourceProvider‘, function ($resourceProvider) {                $resourceProvider.defaults.actions.update = {                    method: ‘PUT‘                };            }])

 

(get remove delete比較簡單,不做詳細說明.)

 

這裡再補充下isArray意義,指的是調用方法後返回的資料是數組還是單個js對象.一般query方法為數組.

 

 

本文地址:http://www.cnblogs.com/neverc/p/5920533.html

[AngularJS] AngularJS系列(6) 中級篇之ngResource