Utiliser la ressource $ d’AngularJS pour interroger une firebase database

J’ai créé une API qui fonctionne via une URL, construite sur node.js , express.js , mongoDB et angular.js .

Mon API s’appelle comme ceci:

app.get('/api/posts/:query', api.postsQuery);

Donc, si je tape localhost:3000/api/posts/ anyquery localhost:3000/api/posts/ , mongoDB crache tous les fichiers JSON pertinents sur mon navigateur, donc cela fonctionne très bien.

Cependant, j’essaie de relier cela à mon interface angular, et cela cause des problèmes. Je souhaite que l’utilisateur puisse effectuer une recherche dans un formulaire et que ma firebase database renvoie les enregistrements corrects. Voici mon contrôleur:

 function indexCtrl($scope, $http, $resource) { $scope.itemSearch = $resource('http://localhost\\:3000/api/posts/:query', {query:''}, {get:{method:'JSONP'}}); $scope.doSearch = function(){ $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm}); console.log($scope.posts[1]) // returns undefined } } 

Mon problème est que lorsque $scope.doSearch , la requête dans le panneau de ressources de Chrome ressemble à ceci: entrez la description de l'image ici les données correctes sont en cours de chargement, mais elles ne s’attachent pas à $scope.posts .

J’ai l’impression que c’est peut-être parce que j’ai besoin d’une fonction de rappel; J’ai essayé d’utiliser callback: JSON_CALLBACK mais cela gâche ma requête / API (car cela ajoute un ?callback=... à la fin de l’appel de $resource et cela rompt la requête).

Des idées sur ce que je peux faire ici pour le faire fonctionner? Le problème est-il un manque de rappel? Je peux peut-être append des expressions rationnelles à l’appel app.get , after :query pour autoriser les caractères génériques ultérieurs>

Ajoutez le rappel à votre appel $ resource:

 $scope.doSearch = function(){ $scope.itemSearch.get({query:$scope.searchTerm}, function(data){ $scope.posts = data.posts; console.log($scope.posts[1]); }); }; 

Notez dans les documents qu’ils utilisent le rappel:

 var User = $resource('/user/:userId', {userId:'@id'}); User.get({userId:123}, function(u, getResponseHeaders){ u.abc = true; u.$save(function(u, putResponseHeaders) { //u => saved user object //putResponseHeaders => $http header getter }); }); 

Basé sur une apparence dans la documentation (et sachant qu’AngularJS fait tout normalement), il semble que le code ci-dessous devrait fonctionner

 $scope.doSearch = function(){ $scope.posts = $scope.itemSearch.get({query:$scope.searchTerm}, function(){ console.log($scope.posts[1]) // hopefully is something }); } 

http://docs.angularjs.org/api/ngResource . $ resource

Étant donné que les opérations sont effectuées de manière asynchrone (pour éviter le blocage / l’attente / la pause), il existe généralement un rappel ou une promesse pour tout ce qui est susceptible de prendre du temps (appels réseau).

Le moyen “angular” de résoudre ce problème consiste à utiliser la bibliothèque $ q pour les promesses.

 function indexCtrl($scope, $resource, $q) { var defer = $q.defer(); var resource = $resource('http://localhost\\:3000/api/posts/:query', {query:''}, {get:{method:'JSONP'}}); resource.get({query:'mySearchQuery'}, defer.resolve); defer.promise.then(function(data) { $scope.posts = data; }); }