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

Надеюсь, что это поможет