Eenvoudige AngularJS front-end voor een REST API
1. Overzicht
In deze korte tutorial leren we hoe je een RESTful API kunt gebruiken vanuit een eenvoudige AngularJS front-end.
We gaan gegevens in een tabel weergeven, een bron maken, deze bijwerken en uiteindelijk verwijderen.
2. De REST API
Laten we eerst eens kort kijken naar onze eenvoudige API - waarbij we een Eten geven bron met paginering:
- word gepagineerd - KRIJGEN / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
- creëren - POST / api / myFeeds
- bijwerken - LEGGEN / api / myFeeds / {id}
- verwijderen - VERWIJDEREN / api / myFeeds / {id}
Een korte opmerking hierbij is dat paginering de volgende 4 parameters gebruikt:
- bladzijde: index van de opgevraagde pagina
- grootte: maximum aantal records per pagina
- soort: de naam van de eigenschap die wordt gebruikt bij het sorteren
- sortDir: de sorteerrichting
En hier is een voorbeeld van wat de Eten geven resource ziet eruit als:
{"id": 1, "name": "baeldung feed", "url": "/ feed"}3. De pagina Feeds
Laten we nu eens kijken naar onze feedspagina:
Nieuwe RSS-feed toevoegen {{row.name}} {{row.url}} Bewerken verwijderen
Merk op dat we ng-table hebben gebruikt om gegevens weer te geven - daarover meer in de volgende secties.
4. Een hoekige controller
Laten we vervolgens eens kijken naar onze AngularJS-controller:
var app = angular.module ('myApp', ["ngTable", "ngResource"]); app.controller ('mainCtrl', functie ($ scope, NgTableParams, $ resource) {...});Let daar op:
- We hebben de ngTable module om het te gebruiken voor het weergeven van onze gegevens in een gebruiksvriendelijke tabel en voor het afhandelen van paginering / sorteerbewerkingen
- We hebben ook geïnjecteerd ngResource module om het te gebruiken voor toegang tot onze REST API-bronnen
5. Een AngularJS-gegevenstabel
Laten we nu even kijken naar het ng-tafel module - hier is de configuratie:
$ scope.feed = $ resource ("api / myFeeds /: feedId", {feedId: '@ id'}); $ scope.tableParams = nieuwe NgTableParams ({}, {getData: function (params) {var queryParams = {pagina: 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;}). $ belofte;}});De API verwacht een bepaalde stijl van paginering, dus we moeten die hier in de tabel aanpassen zodat deze overeenkomt. We gebruiken params uit ng-module en creëer onze eigen queryParams hier.
Een paar aanvullende opmerkingen over paginering:
- params.page () begint bij 1, dus we moeten er ook voor zorgen dat het nul wordt geïndexeerd wanneer we communiceren met de API
- params.sorting () geeft een object terug - bijvoorbeeld {"Name": "asc"}, dus we moeten de sleutel en waarde scheiden als twee verschillende parameters - soort, sortDir
- we extraheren het totale aantal elementen uit een HTTP-header van het antwoord
6. Meer bewerkingen
Ten slotte kunnen we veel bewerkingen uitvoeren met ngResource module - $ resource dekt de volledige HTTP-semantiek in termen van beschikbare bewerkingen. We kunnen ook onze aangepaste functionaliteit definiëren.
We hebben gebruikt vraag in het vorige gedeelte om de lijst met feeds op te halen. Merk op dat beide krijgen en vraag Doen KRIJGEN - maar vraag wordt gebruikt om een arrayrespons af te handelen.
6.1. Voeg een nieuw Eten geven
Om nieuwe feed toe te voegen zullen we gebruiken $ resource methode sparen - als volgt:
$ scope.feed = {naam: "Nieuwe feed", url: "//www.example.com/feed"}; $ scope.createFeed = function () {$ scope.feeds.save ($ scope.feed, function () {$ scope.tableParams.reload ();}); }6.2. Update een Eten geven
We kunnen onze eigen aangepaste methode gebruiken met $ resource - als volgt:
$ scope.feeds = $ resource ("api / myFeeds /: feedId", {feedId: '@ id'}, {'update': {methode: 'PUT'}}); $ scope.updateFeed = function () {$ scope.feeds.update ($ scope.feed, function () {$ scope.tableParams.reload ();}); } Merk op hoe we onze eigen hebben geconfigureerd bijwerken methode om een LEGGEN verzoek.
6.3. Verwijder een Eten geven
Ten slotte kunnen we een feed verwijderen met verwijderen methode:
$ scope.confirmDelete = functie (id) {$ scope.feeds.delete ({feedId: id}, functie () {$ scope.tableParams.reload ();}); }7. AngularJs-dialoogvenster
Laten we nu eens kijken hoe we het kunnen gebruiken ngDialog module om een eenvoudig formulier weer te geven voor het toevoegen / bijwerken van onze feeds.
Hier is onze sjabloon, we kunnen deze definiëren op een aparte HTML-pagina of op dezelfde pagina:
{{feed.name}}
Sparen En dan openen we ons dialoogvenster om een feed toe te voegen / te bewerken:
$ scope.addNewFeed = functie () {$ scope.feed = {naam: "Nieuwe feed", url: ""}; ngDialog.open ({sjabloon: 'templateId', scope: $ scope}); } $ scope.editFeed = functie (rij) {$ scope.feed.id = row.id; $ scope.feed.name = rij.naam; $ scope.feed.url = row.url; ngDialog.open ({sjabloon: 'templateId', scope: $ scope}); } $ scope.save = function () {ngDialog.close ('ngdialog1'); if (! $ scope.feed.id) {$ scope.createFeed (); } anders {$ scope.updateFeed (); }}Let daar op:
- $ scope.save () wordt aangeroepen wanneer de gebruiker klikt Sparen knop in ons dialoogvenster
- $ scope.addNewFeed () wordt aangeroepen wanneer de gebruiker klikt Nieuwe feed toevoegen knop op de feeds-pagina - het initialiseert een nieuw Eten geven object (zonder ID kaart)
- $ scope.editFeed () wordt aangeroepen wanneer de gebruiker een specifieke rij in de tabel Feeds wil bewerken
8. Foutafhandeling
Laten we eindelijk eens kijken hoe om te gaan met responsfoutmeldingen met behulp van AngularJS.
Om serverfoutreacties globaal af te handelen - in plaats van per verzoek - zullen we een interceptor registreren voor het $ 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);}};});}]);En hier is onze berichtweergave in HTML:
{{bericht}} 9. Conclusie
Dit was een korte beschrijving van het gebruik van een REST API van AngularJS.
De volledige implementatie van deze tutorial is te vinden in het github-project - dit is een op Eclipse gebaseerd project, dus het zou gemakkelijk te importeren en uit te voeren moeten zijn zoals het is.
