Рубрики
Без рубрики

Простой интерфейс AngularJS для API REST

Краткое введение в использование RESTful API от AngularJS.

Автор оригинала: baeldung.

1. Обзор

В этом кратком руководстве мы узнаем, как использовать RESTful API из простого интерфейса AngularJS.

Мы собираемся отобразить данные в таблице, создать ресурс, обновить его и, наконец, удалить.

2. API REST

Во – первых, давайте быстро взглянем на наш простой API-доступ к ресурсу Feed с разбиением на страницы:

  • get paginated – GET /api/myFeeds?page={page}&size={size}&sortDir={dir}&sort={propertyName}
  • create – POST /api/myFeeds
  • обновление – PUT /api/myFeeds/{id}
  • удалить – УДАЛИТЬ /api/myFeeds/{id}

Краткое примечание здесь заключается в том, что для разбиения на страницы используются следующие 4 параметра:

  • страница : индекс запрашиваемой страницы
  • размер : максимальное количество записей на странице
  • сортировка : имя свойства, используемого при сортировке
  • sortDir : направление сортировки

И вот пример того, как выглядит ресурс Feed :

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

3. Страница Ленты

Теперь давайте взглянем на нашу страницу в лентах:






Add New RSS Feed


    

        {{row.name}}
        {{row.url}}
        
            Edit
            Delete

Обратите внимание, что мы использовали ng-table для отображения данных – подробнее об этом в следующих разделах.

4. Угловой Контроллер

Далее, давайте взглянем на наш контроллер AngularJS:

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

Обратите внимание, что:

  • Мы внедрили модуль ngTable , чтобы использовать его для отображения ваших данных в удобной для пользователя таблице и обработки операций разбиения на страницы/сортировки
  • Мы также внедрили модуль ngResource , чтобы использовать его для доступа к нашим ресурсам REST API

5. Таблицы данных AngularJS

Давайте теперь быстро взглянем на модуль ng-table – вот конфигурация:

$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]];
        }
        return $scope.feed.query(queryParams, function(data, headers) {
            var totalRecords = headers("PAGING_INFO").split(",")[0].split("=")[1];
            params.total(totalRecords);
            return data;
        }).$promise;
    }
});

API ожидает определенного стиля разбиения на страницы, поэтому нам нужно настроить его здесь, в таблице, чтобы он соответствовал ему. Мы используем params из ng-модуля и создаем свои собственные параметры запроса здесь.

Несколько дополнительных замечаний о разбиении на страницы:

  • params.page() начинается с 1, поэтому нам также нужно убедиться, что он становится нулевым индексированным при общении с API
  • params.sorting() возвращает объект – например {“name”: “asc”} , поэтому нам нужно разделить ключ и значение как два разных параметра – sort , sortDir
  • мы извлекаем общее количество элементов из заголовка HTTP ответа

6. Больше Операций

Наконец, мы можем выполнять множество операций, используя ngResource module – $resource действительно охватывает полную семантику HTTP с точки зрения доступных операций. Мы также можем определить нашу пользовательскую функциональность.

Мы использовали query в предыдущем разделе, чтобы получить список каналов. Обратите внимание, что и get и query do GET – но query используется для обработки ответа массива.

6.1. Добавить новую ленту

Для добавления нового канала мы будем использовать $resource method save – следующим образом:

$scope.feed = {name:"New feed", url: "http://www.example.com/feed"};

$scope.createFeed = function(){
    $scope.feeds.save($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

6.2. Обновление ленты

Мы можем использовать наш собственный пользовательский метод с $resource – следующим образом:

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

$scope.updateFeed = function(){
    $scope.feeds.update($scope.feed, function(){
        $scope.tableParams.reload();
    });
}

Обратите внимание, как мы настроили наш собственный метод update для отправки запроса PUT .

6.3. Удалить ленту

Наконец, мы можем удалить канал с помощью метода delete :

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

7. Диалог AngularJS

Теперь давайте посмотрим, как использовать модуль ngDialog для отображения простой формы добавления/обновления наших каналов.

Вот наш шаблон, мы можем определить его на отдельной HTML-странице или на той же странице:

А затем мы откроем наш диалог для добавления/редактирования ленты:

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

Обратите внимание, что:

  • $scope.save() вызывается, когда пользователь нажимает кнопку Save в нашем диалоговом окне
  • $scope.addNewFeed() вызывается, когда пользователь нажимает кнопку Добавить новый канал на странице каналов – он инициализирует новый Канал объект (без id )
  • $$scope.edit Feed() вызывается, когда пользователь хочет отредактировать определенную строку в таблице Feeds

8. Обработка ошибок

Наконец, давайте посмотрим как обрабатывать сообщения об ошибках ответа с помощью AngularJS.

Чтобы обрабатывать ответы на ошибки сервера глобально – вместо каждого запроса – мы зарегистрируем перехватчик в $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);
            }
        };
    });
}]);

А вот наше представление сообщений в HTML:


    {{message}}

9. Заключение

Это была быстрая запись использования API REST от AngularJS.

полную реализацию этого учебника можно найти в проекте github – это проект на основе Eclipse, поэтому его должно быть легко импортировать и запускать как есть.

Читайте ещё по теме: