{"id":20056,"date":"2015-05-30T12:10:58","date_gmt":"2015-05-30T06:40:58","guid":{"rendered":"https:\/\/2thenew.today\/blog\/?p=20056"},"modified":"2017-08-03T15:56:51","modified_gmt":"2017-08-03T10:26:51","slug":"angulars-resource-for-crud-operations","status":"publish","type":"post","link":"https:\/\/2thenew.today\/blog\/angulars-resource-for-crud-operations\/","title":{"rendered":"Angular\u2019s $resource for CRUD Operations"},"content":{"rendered":"

$resouce<\/strong> is a perfect option to create a single page application which involve CRUD<\/strong> operations.You don’t write your CRUD methods (create,read,update and delete) when you use it.<\/p>\n

A RESTful web service with one endpoint for a data type that does different things with that data type based on HTTP methods like\u00a0GET,\u00a0POST,\u00a0PUT,\u00a0DELETE, etc. So with a\u00a0$resource service, you can call a\u00a0GET method to get the resource as a JavaScript object, then alter it and send it back using POST method, or may perform even delete operation with\u00a0DELETE method.
\nAs we already said that $resource is use full for REStful service so it expects a classic RESTful back-end and your end point should be in the following format:<\/p>\n\n\n\n\n\n\n\n\n
Method<\/th>\nAPI URL<\/th>\nPAYLOAD<\/th>\nResult<\/th>\n<\/tr>\n
GET<\/td>\n<\/td>\nempty<\/td>\nReturns all products<\/td>\n<\/tr>\n
POST<\/td>\n<\/td>\nJSON Object<\/td>\nNew product created<\/td>\n<\/tr>\n
GET<\/td>\n<\/td>\nempty<\/td>\nReturns single product<\/td>\n<\/tr>\n
PUT<\/td>\n<\/td>\nJSON Object<\/td>\nReturns all products<\/td>\n<\/tr>\n
DELETE<\/td>\n<\/td>\nempty<\/td>\nDelete existing product<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Let\u2019s use it<\/strong><\/p>\n

You need to download a file called\u00a0angular-resource.js<\/strong>\u00a0and include it in your HTML page<\/p>\n

[js]
\n<script src=\u00a0<strong>angular-resource.js<\/script>
\n[\/js]<\/p>\n

Then add as module dependency:<\/p>\n

[js]
\nangular.module("myApp", ["ngResource"]) \/\/myApp is our main
\n[\/js]<\/p>\n

After this create a service\u00a0in you app with $resouce dependency.<\/p>\n

Syntax<\/strong><\/p>\n

[js]
\n$resource(url,{paramDefaults},{actions},{options});
\n[\/js]<\/p>\n

Where url is required parameter which is web app url for endpoints.paramDefaults are defaults for url params. The action methods which map to CRUD operations (Note: you can have your own action methods).options are Used to remove the trailing slashes from the url with the help of stripTrailingSlashes property.<\/p>\n

Object of $resource returned\u00a0following action methods to perform CRUD operations<\/p>\n

‘save<\/strong>‘: {method:’POST’},
\n‘get<\/strong>‘: {method:’GET’},
\n‘query<\/strong>‘: {method:’GET’, isArray:true},
\n‘delete<\/strong>‘: {method:’DELETE’} };
\n‘remove<\/strong>‘: {method:’DELETE’},<\/p>\n

after this\u00a0, you can use them in your controller to perform CRUD operations:<\/p>\n

Example –<\/p>\n

Service :<\/p>\n

[js]
\nangular.module(‘myApp’)
\n.factory(‘ProductService’, [‘$resource’,
\n function ($resource) {
\n return $resource(‘\/products’, {}, {
\n query: { method: "GET", isArray: true },
\n create: { method: "POST"},
\n get: { method: "GET"},
\n remove: { method: "DELETE"},
\n update: { method: "PUT"}
\n\t\t});<\/p>\n

}]);
\n[\/js]<\/p>\n

Controller:<\/p>\n

[js]
\nangular.module(‘myApp’)
\n.controller(‘ProductCtrl’, [ ‘ProductService’, ‘$scope’, function (ProductService, $scope) {<\/p>\n

\/\/ Create a new product
\n\t$scope.createProduct = function() {
\n\t\tvar payload = {
\n \t\t\tname: ‘Shirt’,
\n\t\t\t color: ‘red’,
\n\t\t\t size: ‘small’
\n\t\t};
\n\t\tProductService.create(payload, function(data) {
\n \t\t\t\/\/ do something which you want with response
\n\t\t});
\n\t};<\/p>\n

\t\/\/ Get a single product
\n\t$scope.getProduct = function() {
\n\t\tProductService.get({id: 1234}, function(data) {
\n\t\t \/\/ do something which you want with response
\n\t\t});
\n\t};<\/p>\n

\t\/\/ Update a product
\n\t$scope.updateProduct = function() {
\n\t\tProductService.update({id: 1234,color:blue}, function(data) {
\n \t\t\/\/ do something which you want with response
\n });
\n\t};<\/p>\n

\t\/\/ Delete a product
\n\t$scope.deleteProduct = function() {
\n\t\tProductService.remove({id: 1234}, function(data) {
\n \t\t \/\/ do something which you want with response
\n \t\t});
\n\t};<\/p>\n

}]);
\n[\/js]<\/p>\n

So in this way we can quickly create a Single Page Applications which involve CRUD<\/a> operations.<\/p>\n

Hope this helps.<\/p>\n","protected":false},"excerpt":{"rendered":"

$resouce is a perfect option to create a single page application which involve CRUD operations.You don’t write your CRUD methods (create,read,update and delete) when you use it. A RESTful web service with one endpoint for a data type that does different things with that data type based on HTTP methods like\u00a0GET,\u00a0POST,\u00a0PUT,\u00a0DELETE, etc. So with a\u00a0$resource […]<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":18,"footnotes":""},"categories":[1439,3429,1185],"tags":[1820,3955,1186,1822,4697,55,1156,1821],"class_list":["post-20056","post","type-post","status-publish","format-standard","hentry","category-angular","category-front-end-development","category-node-js-2","tag-resouce","tag-angular-development","tag-angular-js","tag-angulars-resource-for-crud-operations","tag-angularjs-development-company","tag-javascript","tag-node","tag-restful-serivce"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t