Простой AngularJS Front-End для REST API

REST

Простой AngularJS Front-End для REST API

1. обзор

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

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

2. REST API

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

постранично - * GET * / api / myFeeds? Page = {page} & size = {size} & sortDir = {dir} & sort = {propertyName}
Создайте - * ЗАПИСЬ * / api / myFeeds
Обновить - * PUT * / api / myFeeds / {id}
Удалить - * УДАЛИТЬ * / api / myFeeds / {id}

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

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

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

{
    "id":1,
    "name":"example 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-module и создаем здесь свои собственныеqueryParams.

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

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

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

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

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

6.1. Добавить новыйFeed

Чтобы добавить новый канал, мы будем использовать метод$resourcesave - следующим образом:

$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. ОбновитьFeed

Мы можем использовать наш собственный метод с$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. УдалитьFeed

Наконец, мы можем удалить фид, используя метод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() вызывается, когда пользователь нажимает кнопкуAdd New Feed на странице каналов - он инициализирует новый объектFeed (безid)
$scope.editFeed() вызывается, когда пользователь хочет отредактировать определенную строку в таблице каналов.

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

Наконец, давайте посмотримhow to handle response error messages с помощью 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. Заключение

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

full implementation этого руководства можно найти вthe github project - это проект на основе Eclipse, поэтому его должно быть легко импортировать и запускать как есть.

TOC

Простой AngularJS Front-End для REST API