$resource in AngularJS

時間 2020-05-24

原文原文鏈接

$httpjavascript

$http服務是基於$q服務的，提供了promise封裝，它接受一個配置對象參數，並返回一個promise對象。同時，它還提供了2個方法用來定義promise回調：success 和 error。html

$http({method:"GET", url:"/someUrl"}).
    success(function(data, status, headers, config){
        //當異步請求成功返回響應時觸發
    }).error(function(data, status, headers, config){
        //當發生異常時觸發
    });

因爲經常使用的http請求就那麼幾種，$http服務實現了對應的簡便方法，比方說：
$http.get
$http.post
$http.put
$http.delete
$http.head
$http.jsonp前端

$http爲每次請求自動添加了HTTP header，可經過$httpProvider.defaults.headers來配置相關內容。java

$httpProvider.defaults.headers.common設置了全部請求都會包含的頭信息：json

Accept: application/json, text/plain, * / *
x-Requested-With: XMLHttpRequestapi

$httpProvider.defaults.headers.post設置了POST請求的默認請求頭：promise

Content-Type: application/json服務器

$httpProvider.defaults.headers.put設置了PUT請求的默認請求頭：app

Content-Type: application/json異步

如今，咱們開始看看$resource，須要注意的是，該服務須要咱們手動加載angular-resource.js文件。
$resource服務的核心價值在於：提供給開發者與RESTful風格WebServices交互的更好的用戶體驗，它封裝了較爲低級的$http，這樣就不須要前端開發者寫大量的異步請求代碼了。

$resource服務的配置方法

$resource(url[, paramDefaults][, actions]);

url

字符串類型，其中能夠出現佔位符，佔位符要以「:」爲前綴，若是系統的域名帶端口號的話，須要手動轉義：
http://www.codingcool.com:8080/api應該這麼傳入：

$resource("http://www.codingcool.com\\:8080/api");

這種狀況在ng的1.2.0rc1版本已經不存在了，端口號會被識別而不須要手工轉義~~

paramDefaults（可選）

對象類型，用於設置參數的默認值，它設置的數值能夠被actions(第三個參數)進行覆蓋。若是設置的參數值是函數，那麼該函數將在每次獲取其值時被執行（有那麼點廢話的意思）。

對於設置的沒有出如今url模板（第一個參數）中的參數，將會以search query的方式添加，例如：
若是url模板爲/codingcool/:author，paramDefaults爲{author:」kazaff」, profession:」geek」}，那麼最終的請求url會變成：/codingcool/kazaff?profession=geek

若是參數值是以「@」開頭的，那麼其真實值將會從數據對象中提取，後面會有例子。

actions（可選）

對象類型，用來定義$resource提供的可使用方法，聲明細節和$http同樣。

下面再來看一下$resource的返回值：
返回值的類型是對象，它包含了和指定服務api（即url）進行互動的全部方法，默認會包含以下默認方法：

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

這些方法會調用內置的$http服務~

當異步請求成功，數據從服務器端取回後，被封裝到一個$resource服務的一個對象實例中，這個對象能夠被save,remove,delete方法直接操做，這種封裝並提供簡單的CRUD操做的方式。

var User = $resource('/user/:userId', {
    userId: '@id'
});
var user = User.get({
    userId: 123
}, function() {
    user.abc = true;
    user.$save();
});

注意上面代碼中的」@id」和」$save()」，使用了@後，當執行$save時，user.id就會被當作userId的值來發送請求。

這種方式封裝Ajax，不單單使得代碼更加優雅，並且還能配合ng的視圖渲染：當數據沒有返回以前，模板引擎不會渲染，一旦異步數據獲取完成，會自動觸發模板引擎的渲染機制把數據呈現到視圖中。

最後，看一個簡單的例子：

AngularJS的$resource

<!DOCTYPE html>
<html ng-app="Demo">

<head>
    <meta charset=utf-8 />
    <title>ngResource DEMO</title>
</head>

<body>
    <div ng-controller="GeekListCtrl">
        <ul>
            <li ng-repeat="geek in geeks">
                <a href="#" ng-click="show(`geek`.`id`)">`geek`.`name`</a>
            </li>
        </ul>
        <div ng-show="user">
            `user`.`msg`
        </div>
    </div>
    <script src="./src/angular.js"></script>
    <script src="./src/angular-resource.js"></script>
    <script type="text/javascript">
    var Demo = angular.module('Demo', ["ngResource"]).factory('Geek', function($resource) {
        return $resource("geek/:geekId.json", {}, {
            query: {
                method: "GET",
                params: {
                    geekId: "list"
                },
                isArray: true
            }
        });
    });

    function GeekListCtrl($scope, Geek) {
        $scope.geeks = Geek.query();
        $scope.show = function(id) {
            $scope.user = Geek.get({
                geekId: id
            });
        };
    }

    function GeekDetailCtrl($scope, $routeParams, Geek) {
        $scope.geek = Geek.get({
            geekId: $routeParams.geekId
        }, function(geek) {
            console.dir(geek);
        });
    }
    </script>
</body>

</html>
</span>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。