streamalism.org

1. Pregled

U ovom brzom vodiču naučit ćemo kako konzumirati RESTful API s jednostavnog prednjeg dijela AngularJS-a.

Prikazat ćemo podatke u tablici, stvoriti resurs, ažurirati ga i konačno izbrisati.

2. REST API

Prvo, pogledajmo na brzinu naš jednostavni API - izlaganje a Feed resurs s paginacijom:

• postanite paginirani - DOBITI / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
• stvoriti - OBJAVI / api / myFeeds
• ažuriranje - STAVITI / api / myFeeds / {id}
• izbriši - IZBRISATI / api / myFeeds / {id}

Ovdje kratko napominjemo da se paginacija koristi sljedeća 4 parametra:

• stranica: indeks tražene stranice
• veličina: maksimalan broj zapisa po stranici
• vrsta: naziv svojstva koje se koristi za sortiranje
• sortDir: smjer sortiranja

I evo primjera što Feed resurs izgleda ovako:

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

3. Stranica sažetaka

Sada, pogledajmo našu stranicu feedova:

      Dodaj novi RSS feed 
{{row.name}}
{{row.url}}
 Uredi Izbriši 

Imajte na umu da smo koristili ng-tablicu za prikaz podataka - više o tome u sljedećim odjeljcima.

4. Kutni kontroler

Dalje, pogledajmo naš AngularJS kontroler:

var app = angular.module ('myApp', ["ngTable", "ngResource"]); app.controller ('mainCtrl', funkcija ($ opseg, NgTableParams, $ resurs) {...});

Imajte na umu da:

• Ubrizgali smo ngTablica modul koji ga koristi za prikaz naših podataka u korisničkoj tablici i rukovanje operacijama paginacije / sortiranja
• Također smo ubrizgavali ngResource modul da ga koristi za pristup našim REST API resursima

5. Tablica podataka AngularJS

Krenimo sada na brzinu ng-stol modul - evo konfiguracije:

$ scope.feed = $ resurs ("api / myFeeds /: feedId", {feedId: '@ id'}); $ scope.tableParams = novi NgTableParams ({}, {getData: funkcija (params) {var queryParams = {stranica: params.page () - 1, veličina: 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, funkcija (podaci, zaglavlja) {var totalRecords = zaglavlja ("PAGING_INFO"). split (",") [0] .split ("=") [1]; params.total (totalRecords ); vratiti podatke;}). $ obećanje;}});

API očekuje određeni stil paginacije, pa ga moramo prilagoditi ovdje u tablici kako bi mu odgovarao. Koristimo parametarima od ng-modul i stvorimo svoje queryParams ovdje.

Nekoliko dodatnih napomena o paginaciji:

• params.page () započinje od 1, tako da također moramo osigurati da indeks postaje nula kada komuniciramo s API-jem
• params.sorting () vraća objekt - na primjer {"Ime": "uzlazno"}, pa moramo ključ i vrijednost odvojiti kao dva različita parametra - vrsta, sortDir
• izvlačimo ukupan broj elemenata iz HTTP zaglavlja odgovora

6. Više operacija

Napokon, možemo izvesti puno operacija pomoću ngResource modul - $ resurs pokriva punu HTTP semantiku u smislu dostupnih operacija. Također možemo definirati našu prilagođenu funkcionalnost.

Mi smo koristili upit u prethodnom odjeljku kako biste dobili popis feedova. Imajte na umu da oboje dobiti i upit čini DOBITI - ali upit koristi se za obradu odgovora niza.

6.1. Dodajte novo Feed

Kako bismo dodali novi feed koji ćemo koristiti $ resurs metoda uštedjeti - kako slijedi:

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

6.2. Ažurirajte a Feed

Možemo koristiti vlastitu prilagođenu metodu s $ resurs - kako slijedi:

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

Primijetite kako smo konfigurirali vlastiti ažuriranje metoda za slanje a STAVITI zahtjev.

6.3. Izbriši a Feed

Napokon, feed možemo izbrisati pomoću izbrisati metoda:

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

7. Dijalog AngularJs

Pogledajmo sada kako se koristi ngDialog modul za prikaz jednostavnog obrasca za dodavanje / ažuriranje naših feedova.

Evo našeg predloška, ​​možemo ga definirati na zasebnoj HTML stranici ili na istoj stranici:

{{feed.name}}
 Uštedjeti 

A onda ćemo otvoriti naš dijaloški okvir za dodavanje / uređivanje feeda:

$ scope.addNewFeed = function () {$ scope.feed = {name: "Novi feed", url: ""}; ngDialog.open ({predložak: 'templateId', opseg: $ opseg}); } $ scope.editFeed = funkcija (redak) {$ scope.feed.id = row.id; $ scope.feed.name = row.name; $ scope.feed.url = row.url; ngDialog.open ({predložak: 'templateId', opseg: $ opseg}); } $ scope.save = function () {ngDialog.close ('ngdialog1'); if (! $ scope.feed.id) {$ scope.createFeed (); } else {$ scope.updateFeed (); }}

Imajte na umu da:

• $ scope.save () poziva se kada korisnik klikne Uštedjeti u našem dijaloškom okviru
• $ scope.addNewFeed () poziva se kada korisnik klikne Dodaj novi feed gumb na stranici feedova - inicijalizira novi Feed objekt (bez iskaznica)
• $ scope.editFeed () poziva se kada korisnik želi urediti određeni redak u tablici feedova

8. Rukovanje pogreškama

Napokon, da vidimo kako postupati s porukama o pogreškama odgovora koristeći AngularJS.

Kako bismo globalno obradili odgovore na pogreške poslužitelja - umjesto po zahtjevu - registrirat ćemo presretač na $ 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);}};});}]);

I evo našeg predstavljanja poruka u HTML-u:

 {{poruka}} 

9. Zaključak

Ovo je bilo brzo opisivanje konzumiranja REST API-ja iz AngularJS-a.

The puna provedba ovog vodiča možete pronaći u projektu github - ovo je projekt zasnovan na Eclipseu, pa bi ga trebalo lako uvesti i pokrenuti kakav jest.