Angular JS: Полный пример клиента GET/POST/DELETE/PUT для бэкэда REST/CRUD?
Я реализовал бэкэнд REST/CRUD, следуя этой статье в качестве примера: http://coenraets.org/blog/2012/10/creating-a-rest-api-using-node-js-express-and-mongodb/. У меня MongoDB работает локально, я не использую MongoLabs.
Я следил за учебником Google, в котором используется шаблон ngResource и Factory, и у меня есть запрос (GET все элементы), получить элемент (GET), создать элемент (POST) и удалить элемент (DELETE) за работой. У меня возникли трудности с реализацией PUT, как это требует интерфейс API-интерфейса: PUT для URL-адреса, который включает идентификатор (.../foo/), а также включает обновленные данные.
У меня есть этот бит кода для определения моих сервисов:
angular.module('realmenServices', ['ngResource']).
factory('RealMen', function($resource){
return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
query: {method:'GET', params:{entryId:''}, isArray:true},
post: {method:'POST'},
update: {method:'PUT'},
remove: {method:'DELETE'}
});
Я вызываю метод из этого кода контроллера:
$scope.change = function() {
RealMen.update({entryId: $scope.entryId}, function() {
$location.path('/');
});
}
но когда я вызываю функцию обновления, URL-адрес не включает значение ID: это только "/realmen", а не "/realmen/ID".
Я пробовал различные решения, связанные с добавлением "RealMen.prototype.update", но по-прежнему не могу заставить entryId отображаться по URL-адресу. (Похоже, мне придется строить JSON, сохраняя только значения полей базы данных - операция POST делает это для меня автоматически при создании новой записи, но, похоже, не существует структуры данных, которая содержит только значения поля, когда я просматриваю/редактирую одну запись).
Есть ли пример клиентского приложения, которое использует все четыре глагола в ожидаемом RESTful пути?
Я также видел ссылки на Restangular и другое решение, которое переопределяет $save, чтобы он мог выдавать POST или PUT (http://kirkbushell.me/angular-js-using-ng-resource-in-a-more-restful-manner/). Эта технология, кажется, меняется настолько быстро, что, похоже, не существует хорошего справочного решения, которое люди могут использовать в качестве примера.
Ответы
Ответ 1
Я создатель Restangular.
Вы можете взглянуть на этот пример CRUD, чтобы узнать, как вы можете создавать элементы PUT/POST/GET без настройки этой конфигурации URL и конфигурации ресурсов. Помимо этого, вы можете использовать вложенные ресурсы без какой-либо конфигурации:).
Проверьте этот пример plunkr:
http://plnkr.co/edit/d6yDka?p=preview
Вы также можете увидеть README и проверить документацию здесь https://github.com/mgonto/restangular
Если вам нужна какая-то функция, которая не существует, просто создайте проблему. Я обычно добавляю функции в течение недели, так как я также использую эту библиотеку для всех моих проектов AngularJS:)
Надеюсь, что это поможет!
Ответ 2
Поскольку ваш update
использует метод PUT, {entryId: $scope.entryId}
рассматривается как данные, чтобы сообщить angular генерировать из данных PUT, вам нужно добавить params: {entryId: '@entryId'}
, когда вы определяете свой update
, что означает
return $resource('http://localhost\\:3000/realmen/:entryId', {}, {
query: {method:'GET', params:{entryId:''}, isArray:true},
post: {method:'POST'},
update: {method:'PUT', params: {entryId: '@entryId'}},
remove: {method:'DELETE'}
});
Исправлено: отсутствовала закрывающая фигурная скобка на линии обновления.
Ответ 3
Вы можете реализовать этот способ
$resource('http://localhost\\:3000/realmen/:entryId', {entryId: '@entryId'}, {
UPDATE: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId' },
ACTION: {method: 'PUT', url: 'http://localhost\\:3000/realmen/:entryId/action' }
})
RealMen.query() //GET /realmen/
RealMen.save({entryId: 1},{post data}) // POST /realmen/1
RealMen.delete({entryId: 1}) //DELETE /realmen/1
//any optional method
RealMen.UPDATE({entryId:1}, {post data}) // PUT /realmen/1
//query string
RealMen.query({name:'john'}) //GET /realmen?name=john
Документация:
https://docs.angularjs.org/api/ngResource/service/$resource
Надеюсь, что это поможет