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

«1. Обзор

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

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

2. REST API

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

get paginated — GET /api/myFeeds?page={page }\u0026size={size}\u0026sortDir={dir}\u0026sort={propertyName} create – POST /api/myFeeds update – PUT /api/myFeeds/{id} delete – DELETE /api/myFeeds/{id }

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

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

3. Страница Feeds

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

Теперь давайте посмотрим на нашу страницу фидов:

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

<script 
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script 
  src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js">
</script>
<script th:src="@{/resources/ng-table.min.js}"></script>
<script th:src="@{/resources/mainCtrl.js}"></script>

<a href="#" ng-click="addNewFeed()">Add New RSS Feed</a>
<table ng-table="tableParams">
    <tr ng-repeat="row in $data track by row.id">
        <td data-title="'Name'" sortable="'name'">{{row.name}}</td>
        <td data-title="'Feed URL'" sortable="'url'">{{row.url}}</td>
        <td data-title="'Actions'">
            <a href="#" ng-click="editFeed(row) ">Edit</a>
            <a href="#" ng-click="confirmDelete(row.id) ">Delete</a>
        </td>
    </tr>
</table>
</div>
</body>
</html>

4. Контроллер Angular

Далее давайте посмотрим на наш контроллер AngularJS:

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

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

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

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

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

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

$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;
    }
});

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

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

6. Еще Операции

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

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

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

Чтобы добавить новую ленту, мы будем использовать метод сохранения $resource – следующим образом:

6.2. Обновление фида

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

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

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

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

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

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

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

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

7. Диалог AngularJs

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

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

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

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

<script type="text/ng-template" id="templateId">
<div class="ngdialog-message">
    <h2>{{feed.name}}</h2>
    <input ng-model="feed.name"/>
    <input ng-model="feed.url"/>
</div>
<div class="ngdialog-buttons mt">
    <button ng-click="save()">Save</button>
</div>
</script>

Примечание что:

$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() вызывается, когда пользователь нажимает кнопку «Сохранить» в нашем диалоговом окне. $scope.addNewFeed() вызывается, когда пользователь нажимает кнопку «Добавить новый канал» на странице каналов — он инициализирует новый объект канала (без id) $scope.editFeed() вызывается, когда пользователь хочет отредактировать определенную строку в таблице Feeds

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

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

Чтобы обрабатывать ответы об ошибках сервера глобально, а не по запросу, мы зарегистрируем перехватчик в $httpProvider:

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

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

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

<div ng-show="message" class="alert alert-danger">
    {{message}}
</div>

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

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

«