Angular - correct approach to handle the data fetch from server?

Question

Assume that, I am using the angular-resource - module with my ng-app. I don't able to understand the data handling easy and scale able way.. any one give me / show me a correct way to answering all this questions?

a) Generally how to fetch data from url in the angular.?

b) in case each of the controller may require different url and data if so how the fetch process added on each of controller.?

c) or need we make a service to provide the data according to the controllers parameters - if so how to pass parametes to service?

d) All above have GET, PUT and DELETE, 'POST` then how to handle all them - is all this need separate services?

Thanks in advance.

Answer 1

Use angular-resource as you said within a service/factory. It already provides a lot of your requirements:

myApp.factory("dataService", [
 "$resource",
 function ($resource) {
 return $resource("http://someBaseUrl/:action/:id", {
 id: "@id" // default parameters
 },
 {
 // custom methods
 update: { method: "PUT" },
 doOtherStuff: { method: "GET", action: "DoOtherStuff" }
 });
 }
]);

The $resource default provides for the following REST compliant functions:

{ 
 'get': {method:'GET'},
 'save': {method:'POST'},
 'query': {method:'GET', isArray:true},
 'remove': {method:'DELETE'},
 'delete': {method:'DELETE'} 
};

Any other functions you have to include yourself, like the update and the doOtherStuff in the example above.

The :action part is an easy way to provide any custom action, that is not REST compliant.

Usage in controllers:

myApp.controller("myCtrl", [
 "dataService",
 function (dataService) {
 // first parameter can be used for any extra query parameters
 // second parameter always is a callback
 var myData = dataService.query({}, function() {
 // success
 });
 var mySingleInstance = dataService.get({ id: 12 });
 this.doUpdate = function (entity) {
 dataService.update(entity);
 // Or, if the 'entity' is a resource entity:
 // entity.$update();
 }
 this.customMethod = function () {
 dataService.doOtherStuff();
 }
 }
]);

See https://docs.angularjs.org/api/ngResource/service/$resource for the full documentation

• 3gwebtrain: looks good. by the way how to create standalone directives i tried here which not works : jsfiddle.net/ydkezd15/7
• 3gwebtrain: But it dependents the app variable right? I am looking that the directive how can be converted as like `component'?
• 3gwebtrain: in the resource management, you didn't talk about the promise how to implement the promise here?
• devqon: You do have promises, but the $resource call will evaluate to an object, with a $promise object on it. So you can do (if you want, but don't see why) do dataService.get({ id: 12 }).$promise.then( // stuff);