如何链接来自不同控制器/位置的AngularJS Promise？

Question

So this is a bit complex, but I'll try to get into it, the best I can. In my config.js , I have:

.run(['$rootScope', '$location', 'UserService', 'CompanyService', function($rootScope, $location, UserService, CompanyService) {
  $rootScope.globals = {};

  $rootScope.$on('login', function(event, data) {
    $rootScope.api_key = data.api_key;
    CompanyService.get(data.user.company_id);
  });

  UserService.checkAuth().then(function(response) {
    if(response.data.user) {
      // Logged in user
      $rootScope.$broadcast('login', response.data);
    } else {
      UserService.logout();
    }
  });
}]);

which basically checks to see if a user is logged in. If he is, we find out which user he belongs to with the CompanyService :

angular.module('mean').service('CompanyService', ['$http', '$rootScope', function($http, $rootScope) {
  var company = this;
  company.company_data = {}

  company.getCompany = function() {
    return company.company_data;
  }

  company.get = function (company_id) {
    return $http({
      url: '/api/v1/company/' + company_id,
      method: 'GET',
      headers: {
        api_key: $rootScope.api_key
      }
    }).success(function(response) {
      if(response.status === 'ok') {
        company.company_data = response.company;
      }
    });
  };
}]);

Later on in my code, I have a call that relies on the singleton CompanyService to do an API call:

  $scope.index = function() {
    LocationService.get(CompanyService.getCompany()._id, $routeParams.location_parent_id).then(function(response) {
      if(response.data.status === 'ok') {
        $scope.locations = $scope.locations.concat(response.data.locations);
      }
    });
  }

if I refresh the page, however, sometimes this call gets executed before we've put data in the CompanyService singleton. How can I use promises to make sure that the LocationService doesn't happen until after we have data in the CompanyService singleton?

Answer 1

One way to do this is without changing your existing code too much would be to create a promise that is fulfilled when CompanyService has data. Note that this code doesn't deal with errors so that still has to be added...

angular.module('mean').service('CompanyService', 
        ['$http', '$rootScope', '$q', function ($http, $rootScope, $q) {
    var company = this;
    company.company_data = {}

    var initializedDeferred = $q.defer;
    company.initialized = initializedDeferred.promise;

    company.getCompany = function () {
        return company.company_data;
    }

    company.get = function (company_id) {
        return $http({
            url: '/api/v1/company/' + company_id,
            method: 'GET',
            headers: {
                api_key: $rootScope.api_key
            }
        }).success(function (response) {
            if (response.status === 'ok') {
                company.company_data = response.company;
                initializedDeferred.resolve(); // reject promise on error?
            }
        });
    };
}]);

---

$scope.index = function () {
    CompanyService.initialized.then(function () {
        LocationService.get(CompanyService.getCompany()._id,
            $routeParams.location_parent_id).then(function (response) {
            if (response.data.status === 'ok') {
                $scope.locations = $scope.locations
                      .concat(response.data.locations);
            }
        });
    });
}