Enkel AngularJS front-end til en REST API

1. Oversigt

I denne hurtige vejledning lærer vi, hvordan man bruger en RESTful API fra en simpel AngularJS front-end.

Vi skal vise data i en tabel, oprette en ressource, opdatere dem og endelig slette dem.

2. REST API

Lad os først kigge hurtigt på vores enkle API - udsætte en Foder ressource med paginering:

Bliv pagineret - FÅ / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
skab - STOLPE / api / myFeeds
opdatering - SÆTTE / api / myFeeds / {id}
slet - SLET / api / myFeeds / {id}

En hurtig bemærkning her er, at paginering bruger følgende 4 parametre:

side: indeks for anmodet side
størrelse: maksimalt antal poster pr. side
sortere: navnet på ejendommen, der bruges til sortering
sortDir: sorteringsretningen

Og her er et eksempel på, hvad Foder ressource ligner:

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

3. Feeds-siden

Lad os nu se på vores feeds-side:

      Tilføj nyt RSS-feed {{række.navn}} {{row.url}}  Rediger Slet

Bemærk, at vi brugte ng-table til at vise data - mere om det i de følgende afsnit.

4. En vinkelkontroller

Lad os derefter se på vores AngularJS-controller:

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

Noter det:

Vi injicerede ngTabel modul til at bruge det til at vise vores data i en brugervenlig tabel og håndtere paginering / sortering
Vi injicerede også ngRessource modul til at bruge det til at få adgang til vores REST API-ressourcer

5. En AngularJS-datatabel

Lad os nu se hurtigt på ng-tabel modul - her er konfigurationen:

$ scope.feed = $ ressource ("api / myFeeds /: feedId", {feedId: '@ id'}); $ scope.tableParams = nye NgTableParams ({}, {getData: funktion (params) {var queryParams = {side: params.page () - 1, størrelse: params.count ()}; var sortingProp = Object.keys (params) .sorting ()); hvis (sortingProp.length == 1) {queryParams ["sort"] = sortingProp [0]; queryParams ["sortDir"] = params.sorting () [sortingProp [0]];} returner $ scope.feed.query (queryParams, function (data, headers) {var totalRecords = headers ("PAGING_INFO"). split (",") [0] .split ("=") [1]; params.total (totalRecords ); returner data;}). $ løfte;}});

API'en forventer en bestemt pagineringstilstand, så vi er nødt til at tilpasse det her i tabellen for at matche det. Vi bruger params ud af ng-modul og skab vores egne queryParams her.

Et par yderligere bemærkninger om pagination:

params.page () starter fra 1, så vi skal også sørge for, at det bliver nulindekseret, når vi kommunikerer med API'en
params.sorting () returnerer et objekt - for eksempel {“Navn”: “asc”}, så vi er nødt til at adskille nøglen og værdien som to forskellige parametre - sortere, sortDir
vi udtrækker det samlede antal af elementer fra en HTTP-overskrift i svaret

6. Flere operationer

Endelig kan vi udføre mange operationer ved hjælp af ngRessource modul - $ ressource dækker den fulde HTTP-semantik med hensyn til tilgængelige operationer. Vi kan også definere vores brugerdefinerede funktionalitet.

Vi har brugt forespørgsel i det foregående afsnit for at hente feedslisten. Bemærk, at begge dele få og forespørgsel gør FÅ - men forespørgsel bruges til at håndtere en matrixrespons.

6.1. Tilføj et nyt Foder

For at tilføje nyt feed bruger vi $ ressource metode Gemme - som følger:

$ scope.feed = {navn: "Nyt feed", url: "//www.example.com/feed"}; $ scope.createFeed = funktion () {$ scope.feeds.save ($ scope.feed, funktion () {$ scope.tableParams.reload ();}); }

6.2. Opdater a Foder

Vi kan bruge vores egen brugerdefinerede metode med $ ressource - som følger:

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

Bemærk hvordan vi konfigurerede vores egne opdatering metode til at sende en SÆTTE anmodning.

6.3. Slet a Foder

Endelig kan vi slette et feed ved hjælp af slet metode:

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

7. AngularJs-dialog

Lad os nu se, hvordan du bruger ngDialog modul til visning af enkel form til tilføjelse / opdatering af vores feeds.

Her er vores skabelon, vi kan definere den på en separat HTML-side eller på samme side:

{{feed.name}}
 Gemme

Og så åbner vi vores dialog for at tilføje / redigere et feed:

$ scope.addNewFeed = funktion () {$ scope.feed = {navn: "Nyt feed", url: ""}; ngDialog.open ({skabelon: 'templateId', scope: $ scope}); } $ scope.editFeed = funktion (række) {$ scope.feed.id = row.id; $ scope.feed.name = række.navn; $ scope.feed.url = række.url; ngDialog.open ({template: 'templateId', scope: $ scope}); } $ scope.save = funktion () {ngDialog.close ('ngdialog1'); hvis (! $ scope.feed.id) {$ scope.createFeed (); } andet {$ scope.updateFeed (); }}

Noter det:

$ scope.save () kaldes, når brugeren klikker Gemme knappen i vores dialog
$ scope.addNewFeed () kaldes, når brugeren klikker Tilføj nyt feed knap på feeds-siden - den initialiserer en ny Foder objekt (uden id)
$ scope.editFeed () kaldes, når brugeren ønsker at redigere en bestemt række i Feeds-tabellen

8. Fejlhåndtering

Lad os endelig se hvordan man håndterer svarfejlmeddelelser ved hjælp af AngularJS.

For at håndtere serverfejlresponser globalt - i stedet for pr. Anmodning - registrerer vi en interceptor til $ httpTilbyder:

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

Og her er vores meddelelsesrepræsentation i HTML:

 {{besked}}

9. Konklusion

Dette var en hurtig opskrivning af forbrug af en REST API fra AngularJS.

Det fuld implementering af denne vejledning kan findes i github-projektet - dette er et Eclipse-baseret projekt, så det skal være let at importere og køre som det er.

streamalism.org