AngularJS $resource

  1. AngularJS $resource vs. $http
  2. Example of AngularJS $resource

AngularJS $resource is a service that lets you access RESTful web services in a way that is more Angular-friendly. $resource takes care of serializing and deserializing data for you to focus on the application logic.

Moreover, AngularJS $resource provides functions to communicate with RESTful APIs. These functions simplify retrieving data from various sources, supporting all HTTP methods.

By default, $resource performs the following five REST operations.

  1. Getting a list of items
  2. Getting an item
  3. Inserting an item
  4. Updating an item
  5. Deleting an item

AngularJS $resource vs. $http

The $resource service is a way to query remote resources, like REST endpoints. It is an AngularJS service that provides functions for creating objects representing remote data and performing CRUD operations on those objects.

$http is an AngularJS service that provides functions for making AJAX requests to the server. It can be used with any AJAX library, but it must be used with AngularJS’s $resource service to get the full CRUD functionality.

$resource is a variable that is declared once and then used to call get, post, query, remove, and delete across our controller/service. The $resource contains all the handy methods built-in, which is a great feature.

We don’t need to write repeating code when accessing REST API with $resource, which allows us to make our calls more superficial and more relevant.

Example of 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 Code:

<!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>

It’s a powerful and helpful tool for developers, simplifying the process of querying data from the server.

It is most commonly used for CRUD operations on RESTful APIs, but it can also be used to retrieve data from any API.

The main benefit of AngularJS $resource is that it saves time and makes coding easier by reducing the need to write boilerplate code.

Click here to check the live demonstration of the code as mentioned above.

Write for us
DelftStack articles are written by software geeks like you. If you also would like to contribute to DelftStack by writing paid articles, you can check the write for us page.