web-dev-qa-db-fra.com

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

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

J'ai suivi le didacticiel Google qui utilise ngResource et un modèle Factory. J'ai une requête (obtenir tous les éléments), obtenir un élément (obtenir), créer un élément (POST) et supprimer un élément (supprimer). J'ai des difficultés à implémenter PUT comme le veut l'API backend - un PUT vers une URL qui inclut l'identifiant (.../foo /) et inclut également les données mises à jour.

J'ai ce morceau 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 depuis ce code 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: il ne s'agit que de "/ realmen", pas de "/ realmen/ID".

J'ai essayé diverses solutions impliquant l'ajout d'un "RealMen.prototype.update", mais je ne parviens toujours pas à faire entrer entryId dans l'URL. (Il semble également que je devrai créer moi-même le JSON contenant uniquement les valeurs du champ DB. L'opération POST le fait automatiquement pour moi lors de la création d'une nouvelle entrée, mais cela ne semble pas être le cas. une structure de données qui ne contient que les valeurs de champ lorsque je visualise/édite 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 remplace $ save afin qu'il puisse émettre un POST ou PUT ( http://kirkbushell.me/angular-js-using- ng-ressource-d'une-manière-plus-reposante / ). Cette technologie semble évoluer si rapidement qu'il ne semble pas y avoir de bonne solution de référence que les gens peuvent utiliser à titre d'exemple.

restangularjs
57
PrestoJeff

Je suis le créateur de Restangular.

Vous pouvez consulter cet exemple CRUD pour voir comment vous pouvez utiliser des éléments PUT/POST/GET sans toute cette configuration d'URL et de ressources $ que vous devez effectuer. En plus, vous pouvez alors utiliser des ressources imbriquées sans configuration :).

Découvrez cet exemple plunkr:

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

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

Si vous avez besoin d'une fonctionnalité qui n'existe pas, créez simplement 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 ça aide!

60
mgonto

Étant donné que votre update utilise la méthode PUT, {entryId: $scope.entryId} est considéré comme des données. Pour indiquer angular générer à partir des données PUT, vous devez 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.

34
Ye Liu

Vous pouvez implémenter de cette façon

$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 ça aide

9
user3618546