Front-End AngularJS semplice per un'API REST

1. Panoramica

In questo rapido tutorial impareremo come utilizzare un'API RESTful da un semplice front-end AngularJS.

Visualizzeremo i dati in una tabella, creeremo una risorsa, la aggiorneremo e infine la elimineremo.

2. L'API REST

Per prima cosa, diamo una rapida occhiata alla nostra semplice API: esporre una risorsa Feed con l'impaginazione:

  • ottenere impaginato - GET / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
  • creare - POST / api / myFeeds
  • aggiornamento - PUT / api / myFeeds / {id}
  • elimina - DELETE / api / myFeeds / {id}

Una breve nota qui è che l'impaginazione utilizza i seguenti 4 parametri:

  • page : indice della pagina richiesta
  • dimensione : numero massimo di record per pagina
  • sort : il nome della proprietà utilizzata nell'ordinamento
  • sortDir : la direzione di ordinamento

Ed ecco un esempio di come appare la risorsa Feed :

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

3. La pagina Feed

Ora, diamo un'occhiata alla nostra pagina dei feed:

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

Si noti che abbiamo utilizzato ng-table per visualizzare i dati, maggiori informazioni nelle sezioni seguenti.

4. Un controller angolare

Successivamente, diamo un'occhiata al nostro controller AngularJS:

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

Nota che:

  • Abbiamo inserito il modulo ngTable per usarlo per visualizzare i nostri dati in una tabella di facile utilizzo e gestire le operazioni di impaginazione / ordinamento
  • Abbiamo anche inserito il modulo ngResource per usarlo per accedere alle nostre risorse API REST

5. Un DataTable AngularJS

Diamo ora una rapida occhiata al modulo ng-table : ecco la configurazione:

$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 si aspetta un certo stile di impaginazione, quindi dobbiamo personalizzarlo qui nella tabella in modo che corrisponda ad esso. Stiamo usando params da ng-module e creiamo qui i nostri queryParams .

Alcune note aggiuntive sulla paginazione:

  • params.page () inizia da 1 quindi dobbiamo anche assicurarci che diventi zero indicizzato durante la comunicazione con l'API
  • params.sorting () restituisce un oggetto, ad esempio {"name": "asc"} , quindi dobbiamo separare la chiave e il valore come due diversi parametri: sort , sortDir
  • estraiamo il conteggio totale degli elementi da un'intestazione HTTP della risposta

6. Altre operazioni

Infine, possiamo eseguire molte operazioni utilizzando il modulo ngResource : $ resource copre l'intera semantica HTTP in termini di operazioni disponibili. Possiamo anche definire la nostra funzionalità personalizzata.

Abbiamo utilizzato la query nella sezione precedente per ottenere l'elenco dei feed. Si noti che sia get che query eseguono GET , ma la query viene utilizzata per gestire una risposta di matrice.

6.1. Aggiungi un nuovo feed

Per aggiungere un nuovo feed useremo $ resource method save - come segue:

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

6.2. Aggiorna un feed

Possiamo usare il nostro metodo personalizzato con $ resource , come segue:

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

Nota come abbiamo configurato il nostro metodo di aggiornamento per inviare una richiesta PUT .

6.3. Elimina un feed

Infine, possiamo eliminare un feed utilizzando il metodo di eliminazione :

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

7. Finestra di dialogo AngularJs

Ora, vediamo come utilizzare il modulo ngDialog per visualizzare un semplice modulo per aggiungere / aggiornare i nostri feed.

Ecco il nostro template, possiamo definirlo in una pagina HTML separata o nella stessa pagina:

{{feed.name}}

Save

E poi apriremo la nostra finestra di dialogo per aggiungere / modificare un feed:

$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(); } }

Nota che:

  • $ scope.save () viene chiamato quando l'utente fa clic sul pulsante Salva nella nostra finestra di dialogo
  • $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' implementazione completa di questo tutorial può essere trovata nel progetto github: questo è un progetto basato su Eclipse, quindi dovrebbe essere facile da importare ed eseguire così com'è.