Enkel AngularJS Front-End for en REST API

1. Oversikt

I denne raske opplæringen lærer vi hvordan du bruker en RESTful API fra en enkel AngularJS front-end.

Vi skal vise data i en tabell, opprette en ressurs, oppdatere den og til slutt slette den.

2. REST API

Først, la oss ta en rask titt på vårt enkle API - å avsløre en Mate ressurs med paginering:

bli paginert - FÅ / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
skape - POST / api / myFeeds
Oppdater - SETTE / api / myFeeds / {id}
slett - SLETT / api / myFeeds / {id}

En rask merknad her er at paginering bruker følgende 4 parametere:

side: indeks for ønsket side
størrelse: maksimalt antall poster per side
sortere: navnet på eiendommen som brukes i sortering
sortDir: sorteringsretningen

Og her er et eksempel på hva Mate ressurs ser ut som:

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

3. Feeds-siden

La oss ta en titt på feedsiden vår:

      Legg til ny RSS-feed {{row.name}} {{row.url}}  Rediger Slett

Merk at vi brukte ng-tabellen til å vise data - mer om det i de følgende avsnittene.

4. En vinkelkontroller

La oss se på AngularJS-kontrolleren vår:

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

Noter det:

Vi injiserte ngTable modul for å bruke den til å vise dataene våre i en brukervennlig tabell og håndtere paginering / sortering
Vi injiserte også ngRessurs modul for å bruke den for å få tilgang til REST API-ressursene

5. En AngularJS-datatabell

La oss nå se raskt på ng-tabell modul - her er konfigurasjonen:

$ scope.feed = $ ressurs ("api / myFeeds /: feedId", {feedId: '@ id'}); $ scope.tableParams = nye NgTableParams ({}, {getData: funksjon (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-et forventer en viss paginering, så vi må tilpasse det her i tabellen for å matche det. Vi bruker params ut av ng-modul og lage våre egne queryParams her.

Noen flere merknader om paginering:

params.page () starter fra 1, så vi må også sørge for at den blir nullindeksert når vi kommuniserer med API
params.sorting () returnerer et objekt - for eksempel {“Name”: “asc”}, så vi må skille nøkkelen og verdien som to forskjellige parametere - sortere, sortDir
vi trekker ut det totale elementtallet fra en HTTP-overskrift i Responsen

6. Flere operasjoner

Endelig kan vi utføre mange operasjoner ved hjelp av ngRessurs modul - $ ressurs dekker hele HTTP-semantikken når det gjelder tilgjengelige operasjoner. Vi kan også definere vår tilpassede funksjonalitet.

Vi har brukt spørsmål i forrige avsnitt for å få feeds-listen. Legg merke til at begge få og spørsmål gjøre FÅ - men spørsmål brukes til å håndtere en matrixrespons.

6.1. Legg til en ny Mate

For å legge til ny feed vil vi bruke $ ressurs metode lagre - som følger:

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

6.2. Oppdater a Mate

Vi kan bruke vår egen tilpassede metode med $ ressurs - som følger:

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

Legg merke til hvordan vi konfigurerte våre egne Oppdater metode for å sende ut en SETTE be om.

6.3. Slett a Mate

Til slutt kan vi slette en feed ved å bruke slett metode:

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

7. AngularJs-dialog

La oss nå se hvordan du bruker ngDialog modul for å vise enkelt skjema for å legge til / oppdatere feeds.

Her er malen vår, vi kan definere den på en egen HTML-side eller på samme side:

{{feed.name}}
 Lagre

Og så åpner vi dialogen vår for å legge til / redigere en feed:

$ scope.addNewFeed = funksjon () {$ scope.feed = {navn: "Ny feed", url: ""}; ngDialog.open ({template: 'templateId', scope: $ scope}); } $ scope.editFeed = funksjon (rad) {$ scope.feed.id = row.id; $ scope.feed.name = rad.navn; $ scope.feed.url = row.url; ngDialog.open ({template: 'templateId', scope: $ scope}); } $ scope.save = funksjon () {ngDialog.close ('ngdialog1'); hvis (! $ scope.feed.id) {$ scope.createFeed (); } annet {$ scope.updateFeed (); }}

Noter det:

$ scope.save () kalles når brukeren klikker Lagre knappen i vår dialog
$ scope.addNewFeed () kalles når brukeren klikker Legg til ny feed på feeds-siden - den initialiseres en ny Mate objekt (uten id)
$ scope.editFeed () kalles når brukeren vil redigere en bestemt rad i Feeds-tabellen

8. Feilhåndtering

Til slutt, la oss se hvordan håndtere svarfeilmeldinger ved hjelp av AngularJS.

For å håndtere serverfeilresponser globalt - i stedet for per forespørsel - registrerer vi en avlytter til $ httpTilbyder:

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

Og her er vår meldingsrepresentasjon i HTML:

 {{beskjed}}

9. Konklusjon

Dette var en rask beskrivelse av å konsumere en REST API fra AngularJS.

De full gjennomføring av denne opplæringen finnes i github-prosjektet - dette er et formørkelsesbasert prosjekt, så det skal være enkelt å importere og kjøre som det er.

streamalism.org