Jednoduché rozhranie AngularJS pre rozhranie REST API

1. Prehľad

V tomto rýchlom výučbe sa naučíme, ako konzumovať RESTful API z jednoduchého rozhrania AngularJS.

Ideme zobraziť údaje v tabuľke, vytvoríme zdroj, aktualizujeme ho a nakoniec odstránime.

2. REST API

Po prvé, poďme sa rýchlo pozrieť na naše jednoduché API - vystavenie a Krmivo zdroj s stránkovaním:

nechať sa stránkovať - ZÍSKAJTE / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
vytvoriť - POST / api / myFeeds
aktualizácia - PUT / api / myFeeds / {id}
vymazať - ODSTRÁNIŤ / api / myFeeds / {id}

Krátka poznámka je, že stránkovanie používa nasledujúce 4 parametre:

stránke: index požadovanej stránky
veľkosť: maximálny počet záznamov na stránku
triediť: názov majetku použitého pri triedení
triediťDir: smer triedenia

A tu je príklad toho, čo Krmivo zdroj vyzerá takto:

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

3. Stránka Feeds

Poďme sa teraz pozrieť na našu stránku informačných kanálov:

      Pridajte nový informačný kanál RSS {{row.name}} {{row.url}}  Upraviť Odstrániť

Upozorňujeme, že na zobrazenie údajov sme použili ng-table - viac v nasledujúcich častiach.

4. Uhlový ovládač

Ďalej sa pozrime na náš ovládač AngularJS:

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

Poznač si to:

Injekčne sme podali injekciu ngTable modul na jeho použitie na zobrazenie našich údajov v užívateľsky prívetivej tabuľke a na zvládnutie operácií stránkovania / triedenia
Tiež sme vpichli ngResource modul na jeho použitie pre prístup k našim prostriedkom REST API

5. Úhlová tabuľka AngularJS

Poďme sa teraz rýchlo pozrieť na ng-tabuľka modul - tu je konfigurácia:

$ 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]];} vrátiť $ scope.feed.query (queryParams, function (data, headers) {var totalRecords = headers ("PAGING_INFO"). split (",") [0] .split ("=") [1]; params.total (totalRecords ); vrátiť údaje;}). $ prísľub;}});

API očakáva určitý štýl stránkovania, takže ho tu v tabuľke musíme prispôsobiť tak, aby mu zodpovedal. Používame params z ng-modul a vytvorme si svoje vlastné queryParams tu.

Niekoľko ďalších poznámok k stránkovaniu:

params.page () začína od 1, takže sa tiež musíme uistiť, že pri komunikácii s API bude indexovaný na nulu
zoradenie parametrov () vráti objekt - napr {“Name”: “asc”}, takže musíme kľúč a hodnotu oddeliť ako dva rôzne parametre - triediť, triediťDir
extrahujeme celkový počet prvkov z hlavičky HTTP odpovede

6. Viac operácií

Nakoniec môžeme pomocou nástroja vykonať veľa operácií ngResource modul - $ zdroj pokrýva celú sémantiku protokolu HTTP z hľadiska dostupných operácií. Môžeme tiež definovať našu vlastnú funkčnosť.

Použili sme dopyt v predchádzajúcej časti získate zoznam informačných kanálov. Všimnite si, že oboje dostať a dopyt robiť ZÍSKAJTE - ale dopyt sa používa na spracovanie odpovede poľa.

6.1. Pridať nový Krmivo

Na pridanie nového informačného kanála použijeme $ zdroj metóda uložiť - nasledovne:

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

6.2. Aktualizácia a Krmivo

Môžeme použiť vlastnú metódu s $ zdroj - nasledovne:

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

Všimnite si, ako sme si nakonfigurovali svoje vlastné aktualizovať spôsob rozposielania a PUT žiadosť.

6.3. Odstrániť a Krmivo

Nakoniec môžeme odstrániť informačný kanál pomocou vymazať metóda:

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

7. Dialóg AngularJs

Teraz sa pozrime, ako sa používa ngDialog modul na zobrazenie jednoduchej formy pre pridanie / aktualizáciu našich informačných kanálov.

Tu je naša šablóna, ktorú môžeme definovať na samostatnej stránke HTML alebo na tej istej stránke:

{{feed.name}}
 Uložiť

A potom otvoríme naše dialógové okno na pridanie / úpravu informačného kanála:

$ scope.addNewFeed = function () {$ scope.feed = {name: "New Feed", url: ""}; ngDialog.open ({template: 'templateId', scope: $ scope}); } $ scope.editFeed = funkcia (riadok) {$ scope.feed.id = riadok.id; $ scope.feed.name = riadok.nazov; $ scope.feed.url = riadok.url; ngDialog.open ({template: 'templateId', scope: $ scope}); } $ scope.save = function () {ngDialog.close ('ngdialog1'); if (! $ scope.feed.id) {$ scope.createFeed (); } else {$ scope.updateFeed (); }}

Poznač si to:

$ scope.save () sa volá, keď používateľ klikne Uložiť v našom dialógovom okne
$ scope.addNewFeed () sa volá, keď používateľ klikne Pridať nový informačný kanál tlačidlo na stránke informačných kanálov - inicializuje nové Krmivo objekt (bez id)
$ scope.editFeed () sa volá, keď chce užívateľ upraviť konkrétny riadok v tabuľke informačných kanálov

8. Spracovanie chýb

Nakoniec sa pozrime ako spracovať chybové správy s odpoveďou pomocou AngularJS.

Za účelom globálneho spracovania chybových odpovedí servera - namiesto na požiadanie - zaregistrujeme zachytávač na serveri $ httpPoskytovateľ:

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

A tu je naša reprezentácia správ v HTML:

 {{message}}

9. Záver

Toto bol rýchly zápis spotreby REST API od AngularJS.

The úplná implementácia tohto tutoriálu nájdete v projekte github - toto je projekt založený na Eclipse, takže by malo byť ľahké ho importovať a spustiť tak, ako je.

streamalism.org