AngularJS $resource サービス

Muhammad Adil 2023年3月20日

Angular Angular REST

AngularJS $resource と $http
AngularJS の例 $resource

AngularJS $resource は、より Angular に適した方法で RESTful Web サービスにアクセスできるようにするサービスです。 $resource は、ユーザーがアプリケーションロジックに集中できるように、データのシリアライズとデシリアライズを処理します。

さらに、AngularJS $resource は RESTful API と通信するための関数を提供します。これらの関数は、さまざまなソースからのデータの取得を簡素化し、すべての HTTP メソッドをサポートします。

デフォルトでは、$resource は次の 5つの REST 操作を実行します。

アイテムのリストを取得する
アイテムの入手
アイテムの挿入
アイテムの更新
アイテムの削除

AngularJS `$resource` と `$http`

$resource サービスは、REST エンドポイントなどのリモートリソースをクエリする方法です。これは、リモートデータを表すオブジェクトを作成し、それらのオブジェクトに対して CRUD 操作を実行するための機能を提供する AngularJS サービスです。

$http は、サーバーに対して AJAX リクエストを作成する機能を提供する AngularJS サービスです。任意の AJAX ライブラリで使用できますが、完全な CRUD 機能を得るには、AngularJS の $resource サービスで使用する必要があります。

$resource は、一度宣言された後、コントローラー/サービス全体で get、post、query、remove、delete を呼び出すために使用される変数です。 $resource には便利なメソッドがすべて組み込まれており、これは優れた機能です。

$resource を使用して REST API にアクセスするときに繰り返しコードを記述する必要はありません。これにより、呼び出しをより表面的で関連性の高いものにすることができます。

AngularJS の例 `$resource`

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;

	});
});

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>

これは開発者にとって強力で便利なツールであり、サーバーからデータをクエリするプロセスを簡素化します。

RESTful API での CRUD 操作に最も一般的に使用されますが、任意の API からデータを取得するためにも使用できます。

AngularJS $resource の主な利点は、ボイラープレートコードを記述する必要性を減らすことで、時間を節約し、コーディングを容易にすることです。

ここをクリックで、上記のコードのライブデモを確認できます。

著者： Muhammad Adil

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

AngularJS $resource と $http

AngularJS の例 $resource

AngularJS `$resource` と `$http`

AngularJS の例 `$resource`