streamalism.org

1. Áttekintés

Ebben a gyors oktatóanyagban megtudhatjuk, hogyan használhatunk egy RESTful API-t egy egyszerű AngularJS kezelőfelületről.

Meg fogjuk jeleníteni az adatokat egy táblázatban, létrehozunk egy erőforrást, frissítjük és végül töröljük.

2. A REST API

Először vessünk egy gyors pillantást az egyszerű API-ra - tegyük ki a Feed erőforrás oldalszámozással:

• lapozzon - KAP / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
• létrehozni - POST / api / myFeeds
• frissítés - PUT / api / myFeeds / {id}
• törlés - TÖRÖL / api / myFeeds / {id}

Egy rövid megjegyzés, hogy a lapozás a következő 4 paramétert használja:

• oldalt: a kért oldal indexe
• méret: oldalankénti rekordok maximális száma
• fajta: a rendezésnél használt tulajdonság neve
• sortDir: a rendezési irány

És itt van egy példa arra, hogy mi a Feed forrás néz ki:

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

3. A hírcsatornák oldal

Most nézzük meg a hírcsatornák oldalt:

      Új RSS-hírcsatorna hozzáadása 
{{row.name}}
{{row.url}}
 Szerkesztés Törlés 

Ne feledje, hogy az ng-table-t használtuk adatok megjelenítésére - erről a következő szakaszokban olvashat bővebben.

4. Szögvezérlő

Ezután vessünk egy pillantást az AngularJS vezérlőnkre:

var app = szögletes.modul ('myApp', ["ngTable", "ngResource"]); app.controller ('mainCtrl', function ($ hatókör, NgTableParams, $ erőforrás) {...});

Vegye figyelembe, hogy:

• Fecskendeztük a ngTable modul segítségével adatainkat egy felhasználóbarát táblában jeleníthetjük meg, és kezelhetjük a lapozás / rendezés műveleteket
• Mi is beadtunk injekciót ngResource modul a REST API-erőforrásaink eléréséhez használja

5. Egy AngularJS DataTable

Vessünk egy gyors pillantást a ng-table modul - itt van a konfiguráció:

$ scope.feed = $ erőforrás ("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]];} return $ hatókör.feed.query (queryParams, függvény (adatok, fejlécek) {var totalRecords = fejlécek ("PAGING_INFO"). split (",") [0] .split ("=") [1]; params.total (totalRecords ); visszatérési adatok;}). $ ígéret;}});

Az API egy bizonyos stílusú lapozást vár, ezért ezt a táblázatban kell testre szabnunk, hogy megfeleljen annak. Használjuk params kívül ng-modul és létrehozzuk a sajátunkat queryParams itt.

Néhány további megjegyzés a lapozásról:

• params.page () 1-től kezdődik, ezért arra is figyelnünk kell, hogy nulla indexelésű legyen, amikor kommunikálunk az API-val
• params.sorting () egy objektumot ad vissza - például {“Név”: “asc”}, ezért el kell különítenünk a kulcsot és az értéket két különböző paraméterként - fajta, sortDir
• kivonjuk a teljes elemszámot a Válasz HTTP fejlécéből

6. További műveletek

Végül sok műveletet hajthatunk végre ngResource modul - $ erőforrás lefedi a teljes HTTP szemantikát az elérhető műveletek szempontjából. Meghatározhatjuk egyedi funkcióinkat is.

Használtuk lekérdezés az előző szakaszban a hírcsatornák listájának megszerzéséhez. Vegye figyelembe, hogy mindkettő kap és lekérdezés csinálni KAP - de lekérdezés tömb válasz kezelésére szolgál.

6.1. Új hozzáadása Feed

Új hírcsatorna hozzáadásához használjuk $ erőforrás módszer mentés - alábbiak szerint:

$ scope.feed = {név: "Új hírcsatorna", url: "//www.example.com/feed"}; $ scope.createFeed = function () {$ scope.feeds.save ($ scope.feed, function () {$ scope.tableParams.reload ();}); }

6.2. Frissítés a Feed

Használhatjuk saját egyéni módszerünket $ erőforrás - alábbiak szerint:

$ scope.feeds = $ erőforrás ("api / myFeeds /: feedId", {feedId: '@ id'}, {'update': {módszer: 'PUT'}}); $ scope.updateFeed = function () {$ scope.feeds.update ($ scope.feed, function () {$ scope.tableParams.reload ();}); } 

Vegye figyelembe, hogyan konfiguráltuk a sajátunkat frissítés módszer a küldésre a PUT kérés.

6.3. Törölje a Feed

Végül a (z) használatával törölhetünk egy hírcsatornát töröl módszer:

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

7. Szögletes Js párbeszédpanel

Most nézzük meg, hogyan kell használni ngDialog modul az űrlapok egyszerű hozzáadásához / frissítéséhez.

Itt van a sablonunk, külön HTML oldalon vagy ugyanazon az oldalon definiálhatjuk:

{{feed.name}}
 Mentés 

Ezután megnyitjuk a párbeszédpanelt egy hírcsatorna hozzáadásához / szerkesztéséhez:

$ scope.addNewFeed = function () {$ scope.feed = {név: "Új hírcsatorna", url: ""}; ngDialog.open ({sablon: 'templateId', hatókör: $ hatókör}); } $ hatókör.editFeed = függvény (sor) {$ hatókör.csatorna.id = sor.azonosító; $ hatókör.csatorna.név = sor.név; $ hatókör.feed.url = sor.url; ngDialog.open ({sablon: 'templateId', hatókör: $ hatókör}); } $ scope.save = function () {ngDialog.close ('ngdialog1'); if (! $ hatókör.feed.id) {$ hatókör.createFeed (); } else {$ scope.updateFeed (); }}

Vegye figyelembe, hogy:

• $ scope.save () hívják, amikor a felhasználó rákattint Mentés gombra a párbeszédpanelen
• $ scope.addNewFeed () hívják, amikor a felhasználó rákattint Új hírcsatorna hozzáadása gomb a hírcsatornák oldalon - inicializál egy újat Feed objektum ( id)
• $ scope.editFeed () akkor hívódik meg, amikor a felhasználó egy adott sort akar szerkeszteni a Hírcsatornák táblázatban

8. Hibakezelés

Végül nézzük meg hogyan kell kezelni a válasz hibaüzeneteit az AngularJS segítségével.

A szerverhibákra adott válaszok globális kezelése érdekében - kérésenként - regisztrálunk egy elfogót a $ 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);}};});}]);

És íme az üzenet megjelenítésünk HTML-ben:

 {{üzenet}} 

9. Következtetés

Ez gyors leírást jelentett az AngularJS REST API-jának felhasználásával.

A teljes végrehajtása ennek az oktatóanyagnak a github projektje található meg - ez egy Eclipse alapú projekt, ezért könnyen importálhatónak és futtathatónak kell lennie.