web-dev-qa-db-ja.com

AngularJS-paramsオブジェクトでの$ resource.queryの使用

私は angular.js を取り上げて、少し文書化されていないもののいくつかを解明しようとしています。

これを考慮してください-クエリパラメータを受け入れ、検索結果のコレクションを返し、GET /search.jsonルート（Rails FWIW）に応答する検索メソッドがサーバーにあります。

したがって、jQueryを使用すると、サンプルクエリは次のようになります。

$.getJSON('/search', { q: "javascript", limit: 10 }, function(resp) {
  // resp is an array of objects: [ { ... }, { ... }, ... ]
});

角度を使用してこれを実装しようとしていますが、それがどのように機能するかについて頭を包みます。これは私が今持っているものです：

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

app.controller('SearchController', ['$scope', '$resource', function($scope, $resource){

  $scope.search = function() {
    var Search = $resource('/search.json');
    Search.query({ q: "javascript", limit: 10 }, function(resp){
      // I expected resp be the same as before, i.e
      // an array of Resource objects: [ { ... }, { ... }, ... ]
    });
  }
}]);

ビューで：

<body ng-app="searchApp">
  ...
  <div ng-controller="SearchController">
    ...
    <form ng-submit="search()">...</form>
    ...
   </div>
</body>

ただし、TypeError: Object #<Resource> has no method 'Push'や$apply already in progressなどのエラーが引き続き発生します。

$resource初期化を次のように変更すると、期待通りに動作するようです。

var Search = $resource("/search.json?" + $.param({ q: "javascript", limit: 10 }));
Search.query(function(resp){ ... });

$resourceを1回初期化してから、要求された検索の変更を含むさまざまなクエリパラメーターを渡す方がより直感的に思えます。私はそれを間違っているのか（おそらく）、最初の引数としてクエリパラメータオブジェクトを使用して$resource.queryを呼び出すことが可能なドキュメントを誤解しているのだろうかと思います。ありがとう。

angularjsquery-parametersangular-resource
28
sa125

TypeError：オブジェクト＃にはメソッド 'Push'がなく、$ applyはすでに進行中です

名前Searchでリソースを定義していないためです。まず、そのようなリソースを定義する必要があります。 Doc：$ resource 以下に実装例を示します

angular.module('MyService', ['ngResource'])
       .factory('MyResource', ['$resource', function($resource){

    var MyResource = $resource('/api/:action/:query',{
        query:'@query'
    }, { 
        search: {
            method: 'GET',
            params: {
                action: "search",
                query: '@query'
            }
        }
    }); 
    return MyResource;
}]);

このモジュールをアプリに含めて、このようなコントローラーで使用します

$scope.search_results = MyResource.search({
   query: 'foobar'  
}, function(result){});

しかし、これがあなたに必要なものかどうかはわかりません。リソースサービスは、RESTfulサーバー側データソースとも呼ばれるREST API。

たぶん、あなたは単純なhttp getが必要です：

 $http({method: 'GET', url: '/someUrl'}).
  success(function(data, status, headers, config) {
    // this callback will be called asynchronously
    // when the response is available
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

http://docs.angularjs.org/api/ng.$http

24
Upvote