Перейти к основному содержимому

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

· 5 мин. чтения

Задача: Сумма двух чисел

Напишите функцию twoSum. Которая получает массив целых чисел nums и целую сумму target, а возвращает индексы двух чисел, сумма которых равна target. Любой набор входных данных имеет ровно одно решение, и вы не можете использовать один и тот же элемент дважды. Ответ можно возвращать в любом порядке...

ANDROMEDA

1. Обзор

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

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

2. REST-API

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

  • разбить на страницы – GET /api/myFeeds?page={page}&size={size}&sortDir={dir}&sort={propertyName}
  • создать — POST /api/myFeeds
  • обновить — PUT /api/myFeeds/{id}
  • удалить – УДАЛИТЬ /api/myFeeds/{id}

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

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

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

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

3. Страница каналов

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

<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>

Обратите внимание, что мы использовали 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 ожидает определенный стиль нумерации страниц, поэтому нам нужно настроить его здесь, в таблице, чтобы он соответствовал ему. Мы используем параметры из ng-модуля и создаем здесь свои собственные параметры запроса .

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

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

6. Дополнительные операции

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

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

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

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

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

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

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

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

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

7. Диалог AngularJs

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

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

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

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

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