Einfaches AngularJS-Frontend für eine REST-API

REST

Einfaches AngularJS-Frontend für eine REST-API

1. Überblick

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 - die Bereitstellung einerFeed-Ressource mit Paginierung:

paginiert werden - * GET * / api / myFeeds? Page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
erstellen - * POST * / api / myFeeds
Update - * PUT * / api / myFeeds / {id}
löschen - * DELETE * / api / myFeeds / {id}

Eine kurze Anmerkung hier ist, dass die Paginierung die folgenden 4 Parameter verwendet:

page: Index der angeforderten Seite
size: 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 RessourceFeedaussieht:

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

3. Die Feeds-Seite

Werfen wir jetzt einen Blick auf unsere Feed-Seite:






Add New RSS Feed

    
        {{row.name}}
        {{row.url}}
        
            Edit
            Delete

Beachten Sie, dass wirng-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 ModulngTable eingefügt, um es zum Anzeigen unserer Daten in einer benutzerfreundlichen Tabelle und zum Behandeln von Paginierungs- / Sortiervorgängen zu verwenden
Wir haben auch das ModulngResourceinjiziert, 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 Modulng-tablewerfen - 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, damit er mit ihm übereinstimmt. Wir verwendenparamsausng-moduleund erstellen hier unsere eigenenqueryParams.

Einige zusätzliche Anmerkungen 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 Gesamtzahl der Elemente aus einem HTTP-Header der Antwort

6. Weitere Operationen

Schließlich können wir viele Operationen mit dem ModulngResourceausführen -$resource deckt die vollständige HTTP-Semantik in Bezug auf die verfügbaren Operationen ab. Wir können auch unsere benutzerdefinierten Funktionen definieren.

Wir habenquery im vorherigen Abschnitt verwendet, um die Feed-Liste abzurufen. Beachten Sie, dass sowohlget als auchqueryGET ausführen -query jedoch zur Verarbeitung einer Array-Antwort verwendet wird.

6.1. Fügen Sie ein neuesFeedhinzu

Um neuen Feed hinzuzufügen, verwenden wir$resource Methodesave - wie folgt:

$scope.feed = {name:"New feed", url: "http://www.example.com/feed"};

$scope.createFeed = function(){
    $scope.feeds.save($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

6.2. Aktualisieren Sie aFeed

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 eigeneupdate-Methode konfiguriert haben, um einePUT-Anforderung zu senden.

6.3. Löschen Sie aFeed

Schließlich können wir einen Feed mit der Methodedeletelö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 ModulngDialogein einfaches Formular zum Hinzufügen / Aktualisieren unserer Feeds anzeigen.

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

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ächeSave klickt
$scope.addNewFeed() wird aufgerufen, wenn der Benutzer auf der Feed-Seite auf die SchaltflächeAdd New Feed klickt. Dadurch wird ein neuesFeed-Objekt initialisiert (ohneid).
$scope.editFeed() wird aufgerufen, wenn der Benutzer eine bestimmte Zeile in der Feeds-Tabelle bearbeiten möchte

8. Fehlerbehandlung

Lassen Sie uns abschließendhow to handle response error messages mit AngularJS sehen.

Um Serverfehlerantworten global anstatt pro Anforderung zu verarbeiten, registrieren wir einen Interceptor für die$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);
            }
        };
    });
}]);

Und hier ist unsere Nachrichtendarstellung in HTML:


    {{message}}

9. Fazit

Dies war eine kurze Zusammenfassung des Verbrauchs einer REST-API von AngularJS.

Diefull implementation dieses Tutorials finden Sie inthe github project - dies ist ein Eclipse-basiertes Projekt, daher sollte es einfach zu importieren und auszuführen sein.

TOC

Einfaches AngularJS-Frontend für eine REST-API