Angular JS : Exemple complet de client GET/POST/DELETE/PUT pour un backend REST/CRUD ?

Question

J'ai implémenté un backend REST/CRUD en suivant cet article comme exemple : http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/ . MongoDB fonctionne localement, mais je n'utilise pas MongoLabs.

J'ai suivi le tutoriel de Google qui utilise ngResource et un modèle Factory et j'ai réussi à faire fonctionner la requête (GET all items), à obtenir un item (GET), à créer un item (POST) et à supprimer un item (DELETE). J'ai des difficultés à implémenter PUT de la manière dont l'API backend le souhaite -- un PUT vers une URL qui inclut l'id (.../foo/) et inclut également les données mises à jour.

J'ai ce bout de code pour définir mes services :

angular.module('realmenServices', ['ngResource']).
    factory('RealMen', function($resource){
    return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
      query: {method:'GET', params:{entryId:''}, isArray:true},
      post: {method:'POST'},
      update: {method:'PUT'},
      remove: {method:'DELETE'}
    });

J'appelle la méthode à partir de ce code de contrôleur :

$scope.change = function() {
    RealMen.update({entryId: $scope.entryId}, function() {
            $location.path('/');
    });
}

mais lorsque j'appelle la fonction de mise à jour, l'URL n'inclut pas la valeur de l'ID : c'est seulement "/realmen", pas "/realmen/ID".

J'ai essayé plusieurs solutions, dont l'ajout d'un "RealMen.prototype.update", mais je n'arrive toujours pas à faire apparaître l'entryId dans l'URL. (Il semble également que je doive construire moi-même le JSON contenant uniquement les valeurs des champs de la base de données -- l'opération POST le fait automatiquement pour moi lors de la création d'une nouvelle entrée, mais il ne semble pas y avoir de structure de données qui contienne uniquement les valeurs des champs lorsque je visualise/modifie une seule entrée).

Existe-t-il un exemple d'application client qui utilise les quatre verbes de la manière RESTful attendue ?

J'ai également vu des références à Restangular et à une autre solution qui surcharge $save pour qu'il puisse émettre un POST ou un PUT ( http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner/ ). Cette technologie semble évoluer si rapidement qu'il ne semble pas y avoir de bonne solution de référence que les gens puissent utiliser comme exemple.

Answer 1

Je suis le créateur de Restangular.

Vous pouvez jeter un coup d'oeil à cet exemple CRUD pour voir comment vous pouvez PUT/POST/GET des éléments sans toute cette configuration d'URL et de $resource que vous devez faire. En outre, vous pouvez utiliser des ressources imbriquées sans aucune configuration :).

Regardez cet exemple de plunkr :

http://plnkr.co/edit/d6yDka?p=preview

Vous pouvez également consulter le fichier README et vérifier la documentation ici. https://github.com/mgonto/restangular

Si vous avez besoin d'une fonctionnalité qui n'existe pas, il suffit de créer un problème. J'ajoute généralement les fonctionnalités demandées dans la semaine, car j'utilise également cette bibliothèque pour tous mes projets AngularJS :)

J'espère que cela vous aidera !

Answer 2

Parce que votre update utilise la méthode PUT, {entryId: $scope.entryId} est considéré comme une donnée, pour dire à angular de générer à partir des données PUT, il faut ajouter params: {entryId: '@entryId'} lorsque vous définissez votre update ce qui signifie

return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
  query: {method:'GET', params:{entryId:''}, isArray:true},
  post: {method:'POST'},
  update: {method:'PUT', params: {entryId: '@entryId'}},
  remove: {method:'DELETE'}
});

Correction : Il manquait une accolade fermante sur la ligne de mise à jour.

Answer 3

Vous pouvez mettre en œuvre cette méthode

$resource('http://localhost\\:3000/realmen/:entryId', {entryId: '@entryId'}, {
        UPDATE: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId' },
        ACTION: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId/action' }
    })

RealMen.query() //GET  /realmen/
RealMen.save({entryId: 1},{post data}) // POST /realmen/1
RealMen.delete({entryId: 1}) //DELETE /realmen/1

//any optional method
RealMen.UPDATE({entryId:1}, {post data}) // PUT /realmen/1

//query string
RealMen.query({name:'john'}) //GET /realmen?name=john

Documentation : https://docs.angularjs.org/api/ngResource/service/ $resource

J'espère que cela vous aidera