Einfaches AngularJS-Frontend für eine REST-API

1. Übersicht

In diesem kurzen Tutorial erfahren Sie, wie Sie eine RESTful-API aus einem einfachen AngularJS-Frontend verwenden.

Wir werden Daten in einer Tabelle anzeigen, eine Ressource erstellen, aktualisieren und schließlich löschen.

2. Die REST-API

Lassen Sie uns zunächst einen kurzen Blick auf unsere einfache API werfen - das Anzeigen einer Feed- Ressource mit Paginierung:

  • paginiert werden - GET / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
  • create - POST / api / myFeeds
  • Update - PUT / api / myFeeds / {id}
  • delete - DELETE / api / myFeeds / {id}

Ein kurzer Hinweis hier ist, dass die Paginierung die folgenden 4 Parameter verwendet:

  • Seite : Index der angeforderten Seite
  • Größe : Maximale Anzahl von Datensätzen pro Seite
  • sort : Der Name der Eigenschaft, die beim Sortieren verwendet wird
  • sortDir : die Sortierrichtung

Und hier ist ein Beispiel dafür, wie die Feed- Ressource aussieht:

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

3. Die Feeds-Seite

Schauen wir uns jetzt unsere Feed-Seite an:

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

Beachten Sie, dass wir ng-table zum Anzeigen von Daten verwendet haben - mehr dazu in den folgenden Abschnitten.

4. Ein Winkelregler

Schauen wir uns als nächstes unseren AngularJS-Controller an:

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

Beachten Sie, dass:

  • Wir haben das ngTable- Modul eingefügt , um damit unsere Daten in einer benutzerfreundlichen Tabelle anzuzeigen und Paginierungs- / Sortiervorgänge durchzuführen
  • Wir haben auch das ngResource- Modul eingefügt , um es für den Zugriff auf unsere REST-API-Ressourcen zu verwenden

5. Eine AngularJS-Datentabelle

Lassen Sie uns nun einen kurzen Blick auf das ng-table- Modul werfen - hier ist die Konfiguration:

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

Die API erwartet einen bestimmten Paginierungsstil, daher müssen wir diesen hier in der Tabelle anpassen, um ihn anzupassen. Wir verwenden Parameter aus dem ng-Modul und erstellen hier unsere eigenen queryParams .

Einige zusätzliche Hinweise zur Paginierung:

  • params.page () beginnt bei 1, daher müssen wir auch sicherstellen, dass es bei der Kommunikation mit der API auf Null gesetzt wird
  • params.sorting () gibt ein Objekt zurück - zum Beispiel {"name": "asc"} , daher müssen wir den Schlüssel und den Wert als zwei verschiedene Parameter trennen - sort , sortDir
  • Wir extrahieren die Gesamtanzahl der Elemente aus einem HTTP-Header der Antwort

6. Weitere Operationen

Schließlich können wir mit dem ngResource- Modul viele Operationen ausführen - $ resource deckt die gesamte HTTP-Semantik in Bezug auf verfügbare Operationen ab. Wir können auch unsere benutzerdefinierten Funktionen definieren.

Wir haben im vorherigen Abschnitt die Abfrage verwendet , um die Feed-Liste abzurufen. Beachten Sie, dass beide erhalten und Abfrage do GET - aber Abfrage verwendet wird , ein Array Antwort zu handhaben .

6.1. Neuen Feed hinzufügen

Um neuen Feed hinzuzufügen, verwenden wir die $ resource- Methode save wie folgt:

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

6.2. Aktualisieren Sie einen Feed

Wir können unsere eigene benutzerdefinierte Methode mit $ resource verwenden - wie folgt:

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

Beachten Sie, wie wir unsere eigene Aktualisierungsmethode zum Senden einer PUT- Anforderung konfiguriert haben .

6.3. Löschen eines Vorschub

Schließlich können wir einen Feed mithilfe der Löschmethode löschen :

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

7. AngularJs Dialog

Lassen Sie uns nun sehen, wie Sie mit dem ngDialog- Modul ein einfaches Formular zum Hinzufügen / Aktualisieren unserer Feeds anzeigen.

Hier ist unsere Vorlage, die wir in einer separaten HTML-Seite oder auf derselben Seite definieren können:

{{feed.name}}

Save

Und dann öffnen wir unseren Dialog, um einen Feed hinzuzufügen / zu bearbeiten:

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

Beachten Sie, dass:

  • $ scope.save () wird aufgerufen, wenn der Benutzer in unserem Dialogfeld auf die Schaltfläche Speichern klickt
  • $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.

Die vollständige Implementierung dieses Tutorials finden Sie im Github-Projekt. Dies ist ein Eclipse-basiertes Projekt, daher sollte es einfach zu importieren und auszuführen sein.