AngularJS $resource
AngularJS $resource는 보다 Angular 친화적인 방식으로 RESTful 웹 서비스에 액세스할 수 있는 서비스입니다. $resource는 애플리케이션 논리에 집중할 수 있도록 데이터 직렬화 및 역직렬화를 처리합니다.
또한 AngularJS $resource는 RESTful API와 통신하는 기능을 제공합니다. 이러한 함수는 모든 HTTP 메서드를 지원하여 다양한 소스에서 데이터 검색을 단순화합니다.
기본적으로 $resource는 다음 다섯 가지 REST 작업을 수행합니다.
- 항목 목록 가져오기
- 아이템 얻기
- 항목 삽입
- 항목 업데이트
- 항목 삭제
AngularJS $resource 대 $http
$resource 서비스는 REST 끝점과 같은 원격 리소스를 쿼리하는 방법입니다. 원격 데이터를 나타내는 객체를 생성하고 해당 객체에서 CRUD 작업을 수행하는 기능을 제공하는 AngularJS 서비스입니다.
$http는 서버에 AJAX 요청을 하는 기능을 제공하는 AngularJS 서비스입니다. 모든 AJAX 라이브러리와 함께 사용할 수 있지만 전체 CRUD 기능을 사용하려면 AngularJS의 $resource 서비스와 함께 사용해야 합니다.
$resource는 한 번 선언된 후 컨트롤러/서비스에서 가져오기, 게시, 쿼리, 제거 및 삭제를 호출하는 데 사용되는 변수입니다. $resource에는 내장된 모든 편리한 메소드가 포함되어 있으며 이는 훌륭한 기능입니다.
$resource를 사용하여 REST API에 액세스할 때 반복 코드를 작성할 필요가 없으므로 호출을 보다 피상적이고 관련성 있게 만들 수 있습니다.
AngularJS $resource의 예
자바스크립트 코드:
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 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