AngularJS $resource
AngularJS $resource es un servicio que le permite acceder a los servicios web RESTful de una manera más amigable con Angular. $resource se encarga de serializar y deserializar datos para que usted se concentre en la lógica de la aplicación.
Además, AngularJS $resource proporciona funciones para comunicarse con las API RESTful. Estas funciones simplifican la recuperación de datos de varias fuentes y admiten todos los métodos HTTP.
Por defecto, $resource realiza las siguientes cinco operaciones REST.
- Obtener una lista de elementos
- Conseguir un artículo
- Insertar un elemento
- Actualizar un artículo
- Eliminación de un elemento
AngularJS $resource frente a $http
El servicio $resource es una forma de consultar recursos remotos, como puntos finales REST. Es un servicio de AngularJS que proporciona funciones para crear objetos que representan datos remotos y realizar operaciones CRUD en esos objetos.
$http es un servicio AngularJS que proporciona funciones para realizar solicitudes AJAX al servidor. Puede usarse con cualquier biblioteca AJAX, pero debe usarse con el servicio $resource de AngularJS para obtener la funcionalidad CRUD completa.
$resource es una variable que se declara una vez y luego se usa para llamar a get, post, query, remove y delete a través de nuestro controlador/servicio. El $resource contiene todos los métodos prácticos incorporados, lo cual es una gran característica.
No necesitamos escribir código repetitivo al acceder a la API REST con $resource, lo que nos permite hacer que nuestras llamadas sean más superficiales y más relevantes.
Ejemplo de AngularJS $resource
Código JavaScript:
var app = angular.module('plunker', ['ngResource']);
app.factory('demo', function($resource) {
var url = 'sample.json';
var res = $resource(url, null, {
query: {
isArray: true,
transformResponse: function(data) {
var items = angular.fromJson(data);
var models = [];
class Person {
constructor(config) {
this.name=config.name;
}
sayHello() {
} }
angular.forEach(items, function(item) {
models.push(new Person(item));
});
console.log("models: ", models);
return models;
}
}
});
return res;
});
app.controller('MainCtrl', function($scope, demo) {
demo.query()
.$promise.then(function (data) {
$scope.names = data;
});
});
Código HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
<script data-require="angular-resource@1.3.x" data-semver="1.3.14" src="http://code.angularjs.org/1.3.14/angular-resource.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Hello.
<ul>
<li ng-repeat="n in names">
{{n.name}}
</li>
</ul>
</body>
</html>
Es una herramienta poderosa y útil para los desarrolladores, que simplifica el proceso de consulta de datos del servidor.
Se usa más comúnmente para operaciones CRUD en API RESTful, pero también se puede usar para recuperar datos de cualquier API.
El principal beneficio de AngularJS $resource es que ahorra tiempo y facilita la codificación al reducir la necesidad de escribir código repetitivo.
Haga clic aquí para ver la demostración en vivo del código como se mencionó anteriormente.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook