streamalism.org

1. סקירה כללית

במדריך מהיר זה נלמד כיצד לצרוך ממשק API RESTful מממשק פשוט של AngularJS.

אנו הולכים להציג נתונים בטבלה, ליצור משאב, לעדכן אותם ולבסוף למחוק אותם.

2. ממשק ה- API של REST

ראשית, בואו נסתכל במהירות על ה- API הפשוט שלנו - חשיפת a הזנה משאב עם עמוד:

• תעמוד - לקבל / api / myFeeds? page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
• ליצור - הודעה / api / myFeeds
• עדכון - לָשִׂים / api / myFeeds / {id}
• מחק - לִמְחוֹק / api / myFeeds / {id}

הערה מהירה כאן היא שהעימוד משתמש בארבעת הפרמטרים הבאים:

• עמוד: אינדקס העמוד המבוקש
• גודל: מספר רשומות מרבי בעמוד
• סוג: שם המאפיין המשמש במיון
• sortDir: כיוון המיון

והנה דוגמה למה ש הזנה משאב נראה כמו:

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

3. דף ההזנות

עכשיו, בואו נסתכל על דף הפידים שלנו:

      הוסף עדכון RSS חדש 
{{row.name}}
{{row.url}}
 ערוך מחק 

שים לב שהשתמשנו בטבלה ng כדי להציג נתונים - עוד על כך בסעיפים הבאים.

4. בקר זוויתי

לאחר מכן, בואו נסתכל על בקר AngularJS שלנו:

var app = angular.module ('myApp', ["ngTable", "ngResource"]); app.controller ('mainCtrl', פונקציה ($ scope, NgTableParams, $ resource) {...});

ציין זאת:

• הזרקנו את ngTable מודול לשימוש בו לצורך הצגת הנתונים שלנו בטבלה ידידותית למשתמש וטיפול בפעולות עמוד / מיון
• הזרקנו גם ngResource מודול כדי להשתמש בו לגישה למשאבי ה- REST API שלנו

5. טבלת נתונים AngularJS

בואו נסתכל במהירות על ה- ng-table מודול - הנה התצורה:

$ scope.feed = $ resource ("api / myFeeds /: feedId", {feedId: '@ id'}); $ scope.tableParams = 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]];} החזר $ scope.feed.query (queryParams, function (data, headers) {var totalRecords = headers ("PAGING_INFO"). split (",") [0] .split ("=") [1]; params.total (totalRecords נתוני החזרה;}). $ הבטחה;}});

ה- API מצפה לסגנון עימוד מסוים, לכן עלינו להתאים את זה כאן בטבלה כדי להתאים אותו. אנחנו משתמשים פאראמים מִתוֹך מודול ng וליצור משלנו queryParams פה.

כמה הערות נוספות על עימוד:

• params.page () מתחיל מ -1 ולכן עלינו לוודא שהוא הופך לאינדקס לאינדקס כאשר מתקשרים עם ה- API
• params.sorting () מחזיר אובייקט - למשל {“שם”: “עלייה”}אז עלינו להפריד בין המפתח לבין הערך כשני פרמטרים שונים - סוג, sortDir
• אנו מחלצים את ספירת האלמנטים הכוללת מכותרת HTTP של התגובה

6. פעולות נוספות

לבסוף, אנו יכולים לבצע פעולות רבות באמצעות ngResource מודול - משאב $ האם מכסה את סמנטיקה מלאה של HTTP מבחינת הפעולות הזמינות. אנו יכולים גם להגדיר את הפונקציונליות המותאמת אישית שלנו.

השתמשנו שאילתא בסעיף הקודם כדי לקבל את רשימת העדכונים. שים לב ששניהם לקבל ו שאילתא לַעֲשׂוֹת לקבל - אבל שאילתא משמש לטיפול בתגובת מערך.

6.1. הוסף חדש הזנה

על מנת להוסיף פיד חדש נשתמש משאב $ שיטה לשמור - כדלהלן:

$ scope.feed = {name: "עדכון חדש", url: "//www.example.com/feed"}; $ scope.createFeed = פונקציה () {$ scope.feeds.save ($ scope.feed, function () {$ scope.tableParams.reload ();}); }

6.2. עדכן א הזנה

אנו יכולים להשתמש בשיטה המותאמת אישית שלנו עם משאב $ - כדלהלן:

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

שים לב כיצד הגדרנו את עצמנו עדכון שיטה לשלוח א לָשִׂים בַּקָשָׁה.

6.3. מחק א הזנה

לבסוף, אנו יכולים למחוק עדכון באמצעות לִמְחוֹק שיטה:

$ scope.confirmDelete = פונקציה (id) {$ scope.feeds.delete ({feedId: id}, פונקציה () {$ scope.tableParams.reload ();}); }

7. דיאלוג AngularJs

עכשיו, בואו נראה כיצד להשתמש ngDialog מודול להצגת טופס פשוט להוספת / עדכון העדכונים שלנו.

הנה התבנית שלנו, אנו יכולים להגדיר אותה בדף HTML נפרד או באותו דף:

{{feed.name}}
 להציל 

ואז נפתח את הדו-שיח שלנו כדי להוסיף / לערוך עדכון:

$ scope.addNewFeed = פונקציה () {$ scope.feed = {name: "עדכון חדש", url: ""}; ngDialog.open ({תבנית: 'templateId', scope: $ scope}); } $ scope.editFeed = פונקציה (שורה) {$ scope.feed.id = row.id; $ scope.feed.name = row.name; $ scope.feed.url = row.url; ngDialog.open ({תבנית: 'templateId', scope: $ scope}); } $ scope.save = פונקציה () {ngDialog.close ('ngdialog1'); אם (! $ scope.feed.id) {$ scope.createFeed (); } אחר {$ scope.updateFeed (); }}

ציין זאת:

• $ scope.save () נקרא כאשר המשתמש לוחץ להציל כפתור בדיאלוג שלנו
• $ scope.addNewFeed () נקרא כאשר המשתמש לוחץ הוסף פיד חדש כפתור בעמוד ההזנות - הוא מאותחל חדש הזנה אובייקט (בלי תְעוּדַת זֶהוּת)
• $ scope.editFeed () נקרא כאשר המשתמש רוצה לערוך שורה ספציפית בטבלת העדכונים

8. טיפול בשגיאות

לבסוף, בואו נראה כיצד לטפל בהודעות שגיאה בתגובה באמצעות AngularJS.

על מנת לטפל בתגובות שגיאות שרת ברחבי העולם - במקום לכל בקשה - נרשום מיירט ל- $ http ספק:

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

והנה ייצוג המסרים שלנו ב- HTML:

 {{הוֹדָעָה}} 

9. מסקנה

זה היה כתיבה מהירה של צריכת REST API מ- AngularJS.

ה יישום מלא של מדריך זה ניתן למצוא בפרויקט github - זהו פרויקט מבוסס ליקוי חמה, כך שיהיה קל לייבא ולהפעיל אותו כפי שהוא.