In order to expose a RESTful web API, we can use the $http service, as shown in the previous CRUD operation using $http section. As we can see, in order to use $http, we created the methods Create, Read, and so on. However, on the other hand, we can use $resource, which provides a higher level of abstraction built on top of $http. The ngResource module is not included in the AngularJS framework:
var app = angular.module('myApp', ['ngResource']);First, in our controller, we create a function named customerResources:
<!-- RETREIVE DATA FROM DATABASE WITH $resource & WEB API -- >
app.controller('ctrlCustomer', function ($scope, $http) {
var customerResource = $resource('/api/Customer/Customer', {}, {
'get': { method: 'GET' },
'query': { method: 'GET', isArray: true },
'save': { method: 'POST' },
'delete': { method: 'DELETE' },
'add': { method: 'POST' },
'update': { method: 'PUT' }
});
});Then, we use the customerResource function to implement the HTTP verbs GET, POST, PUT, DELETE, and so on. This code shows the use of customResource, which we created earlier:
app.controller('ctrlCustomer', function ($scope, $http) {
var customerResource = $resource('/api/Customer/Customer', {}, {
'get': { method: 'GET' },
'query': { method: 'GET', isArray: true },
'save': { method: 'POST' },
'delete': { method: 'DELETE' },
'add': { method: 'POST' },
'update': { method: 'PUT' }
});
<! -------------- GET ALL CUSTOMERS --------------->
customerResource.query().$promise.then(function (custList) {
$scope.Customers = custList;
}, function (errorResponse) {
alert('Error'),
});
<!----GET SPECIFIC CUSTOMER - BY CUSTOMER ID -------->
$scope.GetCustomerByCustomerID = function (CustomerID) {
customerResource.get({ customerID: CustomerID
}).$promise.then(function (cust) {
$scope.Customer = cust;
}, function (errResponse) {
alert('Error'),
});
}
<! --------------- Add New Customer ------------- >
$scope.AddCustomer = function (Customer) {
customerResource.add(Customer).$promise.then(function () {
<! -- GET THE UPDATED CUSTOMER LIST -- >
customerResource.query().$promise.then(function (custList) {
$scope.Customers = custList;
}, function (errorResponse) {
alert('Error'),
});
}, function (errorResponse) {
alert('Error'),
});
}
<! --------------- Delete Customer ------------- >
$scope.DeleteCustomer = function (CustomerID) {
customerResource.delete({ customerID: CustomerID
}).$promise.then(function () {
<! -- GET THE UPDATED CUSTOMER LIST -- >
customerResource.query().$promise.then(function (custList) {
$scope.Customers = custList;
}, function (errorResponse) {
//FAIL
alert('Error'),
});
}, function (errorResponse) {
alert('Error'),
});
}
});The advantage of using the AngularJS $resource provider is that it provides a handful of methods, such as query, get, save, remove, and delete to work with resources, as you can see in the preceding code. The returned object of $resource has the basic $save, $remove, and $delete methods. These methods allow us to fetch data and update it, as shown here:
<!----GET SPECIFIC CUSTOMER & UPDATE THE VALUE -------->
$scope.GetCustomerByCustomerID = function (CustomerID) {
customerResource.get({ customerID: CustomerID
}).$promise.then(function (cust) {
cust.CompanyName = "New Company Name" ;
cust.$save();
}, function (errResponse) {
alert('Error'),
});
}As you have seen in the preceding code, we used $promise. In the AngularJS framework, $promise can be used to allow us to chain multiple functions together, which increases the readability and makes the function more reusable. The $promise can be chained with the following methods:
then(successCallback,errorCallback, andnotifyCallback): This calls thesuccessorerrormethod asynchronously as soon as the result is availablecatch: This is a shorthand ofthen(nullanderrorCallback)finally(callbackandnotifyCallback): This allows us to observe fulfilment or failure of a promise