Resolve promise in service without callback in controller

Question

Resolve promise in service without callback in controller

2.9k Views Asked by San Jay Falcon At 04 April 2025 at 01:10

I would like to ask/discuss wether this is good or bad practise - what are the pros and cons of making a service call insde a controller as clean and short as possible. In other words: not having a callback anymore but make use of the Angular binding principles of Angular.

Take a look at a Plnkr I forked: http://plnkr.co/edit/zNwy8tNKG6DxAzBAclKY

I would like to achieve what is commented out on line 42 of the Plnkr > $scope.data = DataService.getData(3);.

app.factory('DataService', function($q, $http) {
      var cache = {};
      var service= {
        data:{src:''},
        getData: function(id, callback) {
          var deffered = $q.defer();
          if (cache[id]) {
            service.data.src = 'cache';
            deffered.resolve(cache[id])
          } else {
            $http.get('data.json').then(function(res) {
              service.data.src = 'ajax';
              cache[id] = res.data;
              cache[id].dataSource = service.data.src;
              deffered.resolve(cache[id])
            })
          }
          return deffered.promise.then(callback);
        }
      }
      return service
    })
     app.controller('MainCtrl', function($scope, DataService) {

        DataService.getData(3, function(result) {
          $scope.data = result;
        });

     //$scope.data = DataService.getData(3);
});

Original Q&A

There are 3 best solutions below

Michael On 17 June 2015 at 14:22

AfaIk this is not possible - see this Thread

You can 'automatically' resolve the promise by using angular-route. The resolved promises will be injected into your controller.

simon On 17 June 2015 at 14:24

You can do like this plunker

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.4" src="http://code.angularjs.org/1.2.4/angular.js" data-require="[email protected]"></script>
  <script src="app.js"></script>
  <script>
    app.factory('DataService', function($q, $http) {
      var cache = {};
      var service= {
        data:{src:''},
        getData: function(id, callback) {
          var deffered = $q.defer();
          if (cache[id]) {
            service.data.src = 'cache';
            deffered.resolve(cache[id])
          } else {
            $http.get('data.json').then(function(res) {
              service.data.src = 'ajax';
              cache[id] = res.data;
              cache[id].dataSource = service.data.src;
              deffered.resolve(cache[id])
            })
          }
          return deffered.promise;
        }
      }
      return service
    })
     app.controller('MainCtrl', function($scope, DataService) {

         DataService.getData(3).then(function (data) {
          $scope.data = data;
        });
    });
  </script>
</head>

<body ng-controller="MainCtrl">

<div>Source: {{data.dataSource}}</div>
  <pre>{{data}}</pre>
</body>

</html>

**Rami Amar** · Accepted Answer

My best practice with regards to services requesting data and returning promises is:

return a promise (in DataService, return deferred.promise)
in the controller, call DataService.getData(3).then(, )

So I would not pass a callback to a service function that uses a promise.

The more difficult question is what should the service function do, and what should the then(function(data) {...}) do. Here are a few guidelines:

Anything that is shared (data / repetitive functionality), implement in the service
Anything related to binding data / functions to UI elements, implement in the controller
Keep your controllers as simple as possible - they should just link between UI elements and the model.
Any model logic, processing, format parsing, etc - implement in the service

I added this part after reading the comments:

If you need to do some processing (like checking a cached result, parsing the result, etc.), then the proper place to do this is in the service.

So I would modify your code as follows:

var service= {
  data:{src:''},
  getData: function(id) {
    var deffered = $q.defer();
    if (cache[id]) {
      service.data.src = 'cache';
      deffered.resolve(cache[id]);
      return deferred;
    } else {
      return $http.get('data.json').then(function(res) {
        service.data.src = 'ajax';
        cache[id] = res.data;
        cache[id].dataSource = service.data.src;
        return cache[id]; // this will resolve to the next ".then(..)"
      });
    }
  }
}

Resolve promise in service without callback in controller

There are 3 best solutions below

Related Questions in ANGULARJS

Related Questions in CALLBACK

Related Questions in CONTROLLER

Related Questions in PROMISE

Related Questions in ANGULAR-PROMISE

Trending Questions

Popular # Hahtags

Popular Questions