Улучшить эту документацию Просмотреть исходный код $resource
- $resourceProvider
- сервис в модуле ngResource
Обзор
Фабрика, которая создаёт объект ресурса, позволяющий взаимодействовать с RESTful источниками данных на стороне сервера.
Возвращаемый объект ресурса имеет методы действий, которые предоставляют высокоуровневое поведение без необходимости взаимодействия с низкоуровневым сервисом $http.
Требуется модуль ngResource для установки.
По умолчанию, конечные слэши будут удаляться из вычисленных URL, что может вызвать проблемы с серверными бэкендами, которые не ожидают такого поведения. Это можно отключить, настроив $resourceProvider следующим образом:
app.config(['$resourceProvider', function($resourceProvider) {
// Don't strip trailing slashes from calculated URLs
$resourceProvider.defaults.stripTrailingSlashes = false;
}]);
Зависимости
Использование
$resource(url, [paramDefaults], [actions], options);
Аргументы
| Параметр | Тип | Подробности |
|---|---|---|
| url | string | Шаблон параметризованного URL с параметрами, заданными префиксом Если вы используете URL с суффиксом, просто добавьте суффикс, например: |
| paramDefaults (необязательно) | Object | Значения по умолчанию для Каждое значение ключа в объекте параметра сначала привязывается к шаблону URL, если он присутствует, а затем все лишние ключи добавляются к поисковой строке URL после Учитывая шаблон Если значение параметра имеет префикс |
| actions (необязательно) | Object.<Object>= | Хеш с объявлением пользовательских действий, которые будут доступны в дополнение к набору стандартных действий ресурса (см. ниже). Если пользовательское действие имеет тот же ключ, что и стандартное действие (например, Объявление должно быть создано в формате $http.config: {
action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, headers:?, ...},
...
}
Где:
|
| options | Object | Хеш с пользовательскими настройками, которые должны расширить поведение по умолчанию
|
Возвращает
Object |
Объект ресурса "класса" с методами для набора стандартных действий с ресурсами, которые дополнительно могут быть расширены пользовательскими {
'get': {method: 'GET'},
'save': {method: 'POST'},
'query': {method: 'GET', isArray: true},
'remove': {method: 'DELETE'},
'delete': {method: 'DELETE'}
}
Вызов этих методов вызывает var User = $resource('/user/:userId', {userId: '@id'});
User.get({userId: 123}).$promise.then(function(user) {
user.abc = true;
user.$save();
});
Важно понимать, что вызов метода объекта Методы действий для объекта класса или экземпляра объекта могут вызываться со следующими параметрами:
При вызове методов экземпляра сам экземпляр используется в качестве тела запроса (если действие должно иметь тело). По умолчанию тела запроса имеют только действия, использующие Обратный вызов успеха вызывается с аргументами (значение (Объект|Массив), заголовки ответа (Функция), статус (число), текст статуса (строка)), где Действия класса возвращают пустой экземпляр (с дополнительными свойствами, перечисленными ниже). Действия экземпляра возвращают промис для операции. Экземпляры и коллекции ресурсов имеют следующие дополнительные свойства:
|
Примеры
Базовое использование
// Define a CreditCard class
var CreditCard = $resource('/users/:userId/cards/:cardId',
{userId: 123, cardId: '@id'}, {
charge: {method: 'POST', params: {charge: true}}
});
// We can retrieve a collection from the server
var cards = CreditCard.query();
// GET: /users/123/cards
// server returns: [{id: 456, number: '1234', name: 'Smith'}]
// Wait for the request to complete
cards.$promise.then(function() {
var card = cards[0];
// Each item is an instance of CreditCard
expect(card instanceof CreditCard).toEqual(true);
// Non-GET methods are mapped onto the instances
card.name = 'J. Smith';
card.$save();
// POST: /users/123/cards/456 {id: 456, number: '1234', name: 'J. Smith'}
// server returns: {id: 456, number: '1234', name: 'J. Smith'}
// Our custom method is mapped as well (since it uses POST)
card.$charge({amount: 9.99});
// POST: /users/123/cards/456?amount=9.99&charge=true {id: 456, number: '1234', name: 'J. Smith'}
});
// We can create an instance as well
var newCard = new CreditCard({number: '0123'});
newCard.name = 'Mike Smith';
var savePromise = newCard.$save();
// POST: /users/123/cards {number: '0123', name: 'Mike Smith'}
// server returns: {id: 789, number: '0123', name: 'Mike Smith'}
savePromise.then(function() {
// Once the promise is resolved, the created instance
// is populated with the data returned by the server
expect(newCard.id).toEqual(789);
});
Объект, возвращаемый при вызове $resource, — это ресурс "класса", у которого есть один "статический" метод для каждого действия в определении.
Вызов этих методов вызывает $http на шаблоне url с заданным HTTP-методом method, params и headers.
Доступ к ответу
Когда данные возвращаются сервером, объект становится экземпляром типа ресурса, и все методы, кроме GET, доступны с префиксом $. Это позволяет легко поддерживать операции CRUD (создание, чтение, обновление, удаление) с данными на стороне сервера.
var User = $resource('/users/:userId', {userId: '@id'});
User.get({userId: 123}).$promise.then(function(user) {
user.abc = true;
user.$save();
});
Стоит отметить, что обратный вызов успеха для get, query и других методов вызывается с экземпляром ресурса (заполненным данными, полученными с сервера), а также с функцией-получателем заголовков $http, кодом HTTP-статуса и текстом статуса ответа. Таким образом, можно переписать вышеприведённый пример и получить доступ к заголовкам HTTP следующим образом:
var User = $resource('/users/:userId', {userId: '@id'});
User.get({userId: 123}, function(user, getResponseHeaders) {
user.abc = true;
user.$save(function(user, putResponseHeaders) {
// `user` => saved `User` object
// `putResponseHeaders` => `$http` header getter
});
});
Создание пользовательских действий
В этом примере мы создаём пользовательский метод для нашего ресурса для выполнения запроса PUT:
var app = angular.module('app', ['ngResource']);
// Some APIs expect a PUT request in the format URL/object/ID
// Here we are creating an 'update' method
app.factory('Notes', ['$resource', function($resource) {
return $resource('/notes/:id', {id: '@id'}, {
update: {method: 'PUT'}
});
}]);
// In our controller we get the ID from the URL using `$location`
app.controller('NotesCtrl', ['$location', 'Notes', function($location, Notes) {
// First, retrieve the corresponding `Note` object from the server
// (Assuming a URL of the form `.../notes?id=XYZ`)
var noteId = $location.search().id;
var note = Notes.get({id: noteId});
note.$promise.then(function() {
note.content = 'Hello, world!';
// Now call `update` to save the changes on the server
Notes.update(note);
// This will PUT /notes/ID with the note object as the request payload
// Since `update` is a non-GET method, it will also be available on the instance
// (prefixed with `$`), so we could replace the `Note.update()` call with:
//note.$update();
});
}]);
Отмена запросов
Если конфигурация действия указывает, что оно отменяемо, вы можете отменить запрос, связанный с экземпляром или коллекцией (если это результат вызова "не экземпляра"):
// ...defining the `Hotel` resource...
var Hotel = $resource('/api/hotels/:id', {id: '@id'}, {
// Let's make the `query()` method cancellable
query: {method: 'get', isArray: true, cancellable: true}
});
// ...somewhere in the PlanVacationController...
...
this.onDestinationChanged = function onDestinationChanged(destination) {
// We don't care about any pending request for hotels
// in a different destination any more
if (this.availableHotels) {
this.availableHotels.$cancelRequest();
}
// Let's query for hotels in `destination`
// (calls: /api/hotels?location=<destination>)
this.availableHotels = Hotel.query({location: destination});
};
Использование интерцепторов
Вы можете использовать интерцепторы для преобразования запроса или ответа, выполнения дополнительных операций и изменения возвращаемого экземпляра/коллекции. В следующем примере используются интерцепторы request и response для дополнения возвращаемого экземпляра дополнительной информацией:
var Thing = $resource('/api/things/:id', {id: '@id'}, {
save: {
method: 'POST',
interceptor: {
request: function(config) {
// Before the request is sent out, store a timestamp on the request config
config.requestTimestamp = Date.now();
return config;
},
response: function(response) {
// Get the instance from the response object
var instance = response.resource;
// Augment the instance with a custom `saveLatency` property, computed as the time
// between sending the request and receiving the response.
instance.saveLatency = Date.now() - response.config.requestTimestamp;
// Return the instance
return instance;
}
}
}
});
Thing.save({foo: 'bar'}).$promise.then(function(thing) {
console.log('That thing was saved in ' + thing.saveLatency + 'ms.');
});
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ngResource/service/$resource
