2016-04-11 15 views
3

確かに私はAngularに対しては比較的新しいですが、REST呼び出しのためにngResourceを使用しています。

私は比較的一般的であると思われる工場パターンに従った。

私は$ promise.thenを使用してREST応答にアクセスできます。あなたが$リソースで必要としないことを理解しています。

だから私はこの工場を持っている

...

var LookupsService = angular.module('LookupsService', ['ngResource']); 

LookupsService.factory('Lookups', ['$resource', 
    function ($resource) { 
     return $resource('http://localhost:5001/api/lookups', {}); 
    }]); 

をそして、これは失敗した(未定義など)

alert(Lookups.get().foo); 

しかし、これは

Lookups.get() 
     .$promise 
     .then(function (lookups) { 
      alert(lookups.foo); 
     }); 

私は明らかに欠けている何かを結構ですここに。生徒エラーのいくつかの種類のすべてのあなたの助けを;-)

UPDATE

おかげ - それは今非常に明確です。私は@ fikkatraに彼女の答えとスニペットを明確にするためのティックを付けました。しかし、ほとんど全ての答えは役に立つものでした。私はデバッグにアラートを使用することに注意する必要があります!

+0

ワウ - すばらしい反応がとても速い - ありがとう!それは私を吸収し、チェックアウトするために少し時間がかかります... –

答えて

3

すなわち、それは約束内に結果が表示されません、動作しません約束のalertを使用した:それらを使用するには、このような何かを行うことができます。ただし、角度は$resourceサービスを直接使用してスコープにバインドするように設計されています。つまり、$resourceの結果をスコープオブジェクトにバインドすることができ、angleはスコープオブジェクトがバインディングを適用する際の約束であることを考慮に入れます。だからalert(resourceResult)は動作しませんが、$scope.myObj = resourceResult;(そしてそれをビューでバインドする)が機能します。

挿入されたコードスニペットは、より明確に物事を説明する:

var app = angular.module('myapp', ['ngResource']); 
 

 
app.controller('myctrl', function($scope, $resource) { 
 
    //this won't work: 
 
    //alert("won't work: " + $resource('https://api.github.com/users/fikkatra').get()); 
 
    //but this will work 
 
    $resource('https://api.github.com/users/fikkatra').get().$promise.then(function(user) { 
 
    alert("will work: " + user.login); 
 
    }); 
 
    //directly assigning $resource result to scope will work: 
 
    $scope.user = $resource('https://api.github.com/users/fikkatra').get(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-resource.js"></script> 
 
<div ng-app="myapp" ng-controller="myctrl"> 
 
    {{user.login}} 
 
</div>

2

$promise$resourceを使用する必要はありません。使用する必要はありません。 $resourceサービスは、このように使用することができます:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .factory('MyService', MyService); 

    MyService.$inject = ['$resource']; 

    function MyService($resource) { 
    return $resource('my/url/:id', {id: "@id"}, { 
     'query': { isArray: false }, 
     'update': { method: "put" } 
    }); 
    } 
})(); 

それはあなたがそれらを自分で記述することなく、あなたのコード内で使用できるいくつかのHTTPメソッドをあなたに戻っています。

function getActionTypes(){ 
     MyService.query(
     function success(result){ 
      // do stuff with result 
     }, 
     function failure(result){ 
      console.error(result); 
     }); 
    } 
0

によるとspecificationこの小さなコードスニペットの説明に従って、あなたが成功コールバックに渡すことができます。

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

成功関数コールバックは、リソースが終了すると呼び出されます。また


、あなたはあなたの例のように、独自の約束を追加する必要はありません除き、get()と約束構文を使用することができます。代わりに次のようにしてください:

Lookups.get() 
     .then(function (lookups) { 
      alert(lookups.foo); 
     }); 

これは、get()が約束を返すからです。約束が正常に評価された場合

1

あなたは実際には約束を使うのにを持っていません。

Codepen:また、(上記の最初の例では)要求が解決されたときに充填される範囲と結果に変数に.get()の結果を割り当てることができhttp://codepen.io/troylelandshields/pen/bpLoxE

angular.module('app', ['ngResource']) 
.service('exampleSvc', function($resource){ 
    return $resource('http://jsonplaceholder.typicode.com/posts/1', {}); 
}) 
.controller('exampleCtrl', function(exampleSvc, $scope){ 
    $scope.result = exampleSvc.get(); 

    exampleSvc.get().$promise.then(function(val){ 
    //Do some other logic here on the val 
    $scope.promiseResult = val; 
    }); 

}); 

。これは、スコープ内のオブジェクトにデータを割り当てる場合にはうまく機能し、ページ上に表示されますが、.get()の結果を使用して別の処理を行う必要がある他の状況ではうまく動作しない可能性があります。

関連する問題