Search code examples
javascriptangularjsfrontendangularjs-service

What's the difference between this services declaration methods?


what's the best way to declare a service I found this 2 different ways i can't seem to see the difference: first method:

angular.module('app', [])
   .factory('Data', ['$http',function($http){
     return {
         get: function(fileName,callback){
              $http.get(fileName).
              success(function(data, status) {
                  callback(data);
              });
         }
     };
   }]);

second method:

angular.module('app', [])
   .factory('Data', ['$http', function($http){
     var Url   = "data.json";
     var Data = $http.get(Url).then(function(response){
       return response.data;
     });
     return Data;
   }]);

Which one is better and why? Thanks in advance.


Solution

  • There are a few things to separate out here.

    Object vs Promise

    Services are singletons, so in the second method (returning just the promise) your data will never be updated again. That's often the desired result. In your first method, it will be called fresh every time (though $http has a cache option).

    From my perspective, one would only return a service object if there were multiple methods (e.g. get, create, delete, etc.) or it needed to be called multiple times. Otherwise, we're just piling on cruft.

    Promise vs Callback

    Promises are awesome - we should be leveraging them. Passing in a callback is nice, but it's also very limiting. With promises, we can easily chain them together, e.g.:

    Data.get()
    .then( massageDataFn )
    .then( secondMassageFn )
    .then(function ( data ) {
      $scope.items = data;
    });
    

    Besides, $http already returns a promise. Why throw that away?

    Method Parameters

    Your former (object method) took in some parameters. While I am wary of a controller passing in an URL, there are some cases where it's desirable. But you can do this by just returning a function rather than an object:

    .factory( 'Data', [ '$http', function ( $http ) {
      return function ( fileName, callback ) {
        // $http call here...
      };
    }]);
    

    And then only the consideration is Object vs Promise, discussed above.

    Conclusion

    If your service has an API, return an object with public API methods, where each of those methods returns a promise. If your service is just to get some data once, just return the promise and be done with it.