2013-05-23 21 views
28

Sto cercando di raccogliere angular.js e di cercare di capire alcune delle cose che sono un po 'meno documentate.

Considera questo: sul server è presente un metodo di ricerca che accetta parametri di query e restituisce una raccolta di risultati di ricerca e risponde al percorso GET /search.json (Rails FWIW).

Così con jQuery, una query di esempio sarebbe simile a questa:

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

Sto cercando implementare questo utilizzando angolare, e avvolgere la mia testa intorno come funziona. Questo è quello che ho adesso:

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: [ { ... }, { ... }, ... ] 
    }); 
    } 
}]); 

E nella vista:

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

Tuttavia, continuo a ricevere errori come TypeError: Object #<Resource> has no method 'push' e $apply already in progress.

Le cose sembrano funzionare come previsto se cambio l'inizializzazione $resource al seguente:

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

Sembra più intuitivo per inizializzare il $resource volta e poi passare diversi parametri di query con i cambiamenti nella ricerca richiesto. Mi chiedo se sto sbagliando (molto probabilmente) o semplicemente frainteso i documenti che chiamare il $resource.query con l'oggetto params query come il primo argomento è fattibile. Grazie.

risposta

24

TypeError: Object # has no method 'push' and $apply already in progress

perché non è stata definita una delle risorse con il nome Ricerca. Per prima cosa devi definire una risorsa del genere. Doc: $resource. Ecco un esempio di implementazione

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; 
}]); 

Includere questo modulo in voi app e utilizzarlo in un controller come questo

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

Tuttavia non sono sicuro se questo è quello che vi serve. Il servizio risorse interagisce con le origini dati RESTful sul lato server, ovvero API REST.

forse avete bisogno di un semplice 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

+0

Vuol impostazione 'var Ricerca = $ risorse (...)' in anticipo, non fare il trucco? Suppongo che stia ancora elaborando l'idea di servizi e fabbriche in modo angolare. Inoltre, il mio primo tentativo è stato con '$ http' e ha funzionato bene. Volevo provare anche '$ resource', solo per avere un'idea dell'utilizzo di entrambi. Grazie! – sa125

+3

Hm var Search = $ resource (...) è effettivamente corretto. Tuttavia, la risorsa si aspetta un oggetto da restituire ma si restituisce un array? prova a impostare isArray: true sul tuo metodo di ricerca, problema simile https://groups.google.com/forum/#!topic/angular/MT1vIakNEVM –

+1

Perché sostituisci il parametro di ricerca? – Vincent

Problemi correlati