AngularJS $resource
AngularJS $resource ist ein Dienst, mit dem Sie Angular-freundlicher auf RESTful-Webdienste zugreifen können. $resource kümmert sich um die Serialisierung und Deserialisierung von Daten, damit Sie sich auf die Anwendungslogik konzentrieren können.
Darüber hinaus bietet AngularJS $resource Funktionen zur Kommunikation mit RESTful APIs. Diese Funktionen vereinfachen das Abrufen von Daten aus verschiedenen Quellen und unterstützen alle HTTP-Methoden.
Standardmäßig führt $resource die folgenden fünf REST-Operationen aus.
- Abrufen einer Liste von Elementen
- Einen Gegenstand bekommen
- Artikel einfügen
- Aktualisieren eines Artikels
- Löschen eines Artikels
AngularJS $resource vs. $http
Der Dienst $resource ist eine Möglichkeit, Remote-Ressourcen wie REST-Endpunkte abzufragen. Es ist ein AngularJS-Dienst, der Funktionen zum Erstellen von Objekten bereitstellt, die Remote-Daten darstellen, und zum Ausführen von CRUD-Operationen an diesen Objekten.
$http ist ein AngularJS-Dienst, der Funktionen bereitstellt, um AJAX-Anfragen an den Server zu stellen. Es kann mit jeder AJAX-Bibliothek verwendet werden, aber es muss mit dem $resource-Dienst von AngularJS verwendet werden, um die volle CRUD-Funktionalität zu erhalten.
$resource ist eine Variable, die einmal deklariert und dann zum Aufrufen von get, post, query, remove und delete über unseren Controller/Dienst verwendet wird. Die $resource enthält alle praktischen eingebauten Methoden, was ein großartiges Feature ist.
Wir müssen keinen sich wiederholenden Code schreiben, wenn wir mit $resource auf die REST-API zugreifen, wodurch wir unsere Aufrufe oberflächlicher und relevanter machen können.
Beispiel für AngularJS $resource
JavaScript-Code:
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;
});
});
HTML Quelltext:
<!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 ist ein leistungsstarkes und hilfreiches Tool für Entwickler, das den Prozess der Datenabfrage vom Server vereinfacht.
Es wird am häufigsten für CRUD-Operationen auf RESTful-APIs verwendet, kann aber auch zum Abrufen von Daten von beliebigen APIs verwendet werden.
Der Hauptvorteil von AngularJS $resource besteht darin, dass es Zeit spart und das Codieren vereinfacht, indem es die Notwendigkeit reduziert, Boilerplate-Code zu schreiben.
Klicken Sie hier, um die Live-Demonstration des Codes wie oben erwähnt zu überprüfen.
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