Front-end AngularJS simple pour une API REST

1. Vue d'ensemble

Dans ce tutoriel rapide, nous allons apprendre à consommer une API RESTful à partir d'un simple front-end AngularJS.

Nous allons afficher les données dans une table, créer une ressource, la mettre à jour et enfin la supprimer.

2. L'API REST

Tout d'abord, jetons un coup d'œil à notre API simple - exposant une ressource de flux avec pagination:

  • obtenir paginé - GET / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
  • créer - POST / api / myFeeds
  • mise à jour - PUT / api / myFeeds / {id}
  • supprimer - SUPPRIMER / api / myFeeds / {id}

Une note rapide ici est que la pagination utilise les 4 paramètres suivants:

  • page : index de la page demandée
  • size : nombre maximum d'enregistrements par page
  • sort : le nom de la propriété utilisée dans le tri
  • sortDir : le sens de tri

Et voici un exemple de ce à quoi ressemble la ressource Feed :

{ "id":1, "name":"baeldung feed", "url":"/feed" }

3. La page des flux

Maintenant, jetons un œil à notre page de flux:

      Add New RSS Feed 
    
{{row.name}} {{row.url}} Edit Delete

Notez que nous avons utilisé ng-table pour afficher les données - plus d'informations à ce sujet dans les sections suivantes.

4. Un contrôleur angulaire

Ensuite, jetons un coup d'œil à notre contrôleur AngularJS:

var app = angular.module('myApp', ["ngTable", "ngResource"]); app.controller('mainCtrl', function($scope, NgTableParams, $resource) { ... });

Notez que:

  • Nous avons injecté le module ngTable pour l'utiliser pour afficher nos données dans un tableau convivial et gérer les opérations de pagination / tri
  • Nous avons également injecté le module ngResource pour l'utiliser pour accéder à nos ressources API REST

5. Une table de données AngularJS

Jetons maintenant un coup d'œil au module ng-table - voici la configuration:

$scope.feed = $resource("api/myFeeds/:feedId",{feedId:'@id'}); $scope.tableParams = new NgTableParams({}, { getData: function(params) { var queryParams = { page:params.page() - 1, size:params.count() }; var sortingProp = Object.keys(params.sorting()); if(sortingProp.length == 1){ queryParams["sort"] = sortingProp[0]; queryParams["sortDir"] = params.sorting()[sortingProp[0]]; } return $scope.feed.query(queryParams, function(data, headers) { var totalRecords = headers("PAGING_INFO").split(",")[0].split("=")[1]; params.total(totalRecords); return data; }).$promise; } });

L'API attend un certain style de pagination, nous devons donc le personnaliser ici dans le tableau pour qu'il corresponde. Nous utilisons des paramètres de ng-module et créons nos propres queryParams ici.

Quelques notes supplémentaires sur la pagination:

  • params.page () commence à 1 donc nous devons également nous assurer qu'il devient zéro indexé lors de la communication avec l'API
  • params.sorting () renvoie un objet - par exemple {“name”: “asc”} , nous devons donc séparer la clé et la valeur en deux paramètres différents - sort , sortDir
  • nous extrayons le nombre total d'éléments à partir d'un en-tête HTTP de la réponse

6. Plus d'opérations

Enfin, nous pouvons effectuer de nombreuses opérations en utilisant le module ngResource - $ resource couvre toute la sémantique HTTP en termes d'opérations disponibles. Nous pouvons également définir nos fonctionnalités personnalisées.

Nous avons utilisé la requête dans la section précédente pour obtenir la liste des flux. Notez que get et query font GET , mais la requête est utilisée pour gérer une réponse de tableau.

6.1. Ajouter un nouveau flux

Afin d'ajouter un nouveau flux, nous utiliserons $ resource method save - comme suit:

$scope.feed = {name:"New feed", url: "//www.example.com/feed"}; $scope.createFeed = function(){ $scope.feeds.save($scope.feed, function(){ $scope.tableParams.reload(); }); }

6.2. Mettre à jour un flux

Nous pouvons utiliser notre propre méthode personnalisée avec $ resource - comme suit:

$scope.feeds = $resource("api/myFeeds/:feedId",{feedId:'@id'},{ 'update': { method:'PUT' } }); $scope.updateFeed = function(){ $scope.feeds.update($scope.feed, function(){ $scope.tableParams.reload(); }); } 

Notez comment nous avons configuré notre propre méthode de mise à jour pour envoyer une requête PUT .

6.3. Supprimer un flux

Enfin, nous pouvons supprimer un flux en utilisant la méthode de suppression :

$scope.confirmDelete = function(id){ $scope.feeds.delete({feedId:id}, function(){ $scope.tableParams.reload(); }); }

7. Dialogue AngularJs

Voyons maintenant comment utiliser le module ngDialog pour afficher un formulaire simple pour ajouter / mettre à jour nos flux.

Voici notre modèle, nous pouvons le définir dans une page HTML distincte ou dans la même page:

{{feed.name}}

Save

Et puis nous ouvrirons notre boîte de dialogue pour ajouter / modifier un flux:

$scope.addNewFeed = function(){ $scope.feed = {name:"New Feed", url: ""}; ngDialog.open({ template: 'templateId', scope: $scope}); } $scope.editFeed = function(row){ $scope.feed.id = row.id; $scope.feed.name = row.name; $scope.feed.url = row.url; ngDialog.open({ template: 'templateId', scope: $scope}); } $scope.save = function(){ ngDialog.close('ngdialog1'); if(! $scope.feed.id){ $scope.createFeed(); } else{ $scope.updateFeed(); } }

Notez que:

  • $ scope.save () est appelé lorsque l'utilisateur clique sur le bouton Enregistrer dans notre boîte de dialogue
  • $scope.addNewFeed() is called when user clicks Add New Feed button in feeds page – it initializes a new Feed object (without id)
  • $scope.editFeed() is called when user wants to edit a specific row in Feeds table

8. Error Handling

Finally, let's see how to handle response error messages using AngularJS.

In order to handle server error responses globally – instead of per request – we'll register an interceptor to the $httpProvider:

app.config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push(function ($q,$rootScope) { return { 'responseError': function (responseError) { $rootScope.message = responseError.data.message; return $q.reject(responseError); } }; }); }]);

And here's our message representation in HTML:

 {{message}} 

9. Conclusion

This was a quick writeup of consuming a REST API from AngularJS.

L' implémentation complète de ce didacticiel se trouve dans le projet github - il s'agit d'un projet basé sur Eclipse, il devrait donc être facile à importer et à exécuter tel quel.