Force AngularJS service to return data before loading controller

问题

I have a service in Angular which uses my API to get user information and provides it to my controllers. It's set up like this:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
  .service('userInfo', function($http, $cookies){
    $http.get('/api/users/' + $cookies.id).
    success(function(data) {
      var userInfo = data.user[0];

      return userInfo;
    });
  }). // other stuff comes after this

In my controllers, I include it like:

function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
    $scope.user = userInfo;
    console.log('user info is')
    console.log(userInfo);

This is returning no data, while if I put the same service function in the controller itself it returns just fine. What am I missing here? Never used DI/Services in Angular before so might be a simple mistake somewhere.

I need to ensure that the service returns data before the controller loads. How can this be accomplished

回答1:

You can make the factory to return a promise like this:

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'ngResource', 'infinite-scroll', 'ui.bootstrap', 'ngCookies', 'seo'])
    .service('userInfo', function ($http, $cookies) {
    var promise = $http.get('/api/users/' + $cookies.id).
    success(function (data) {
        var userInfo = data.user[0];
        return userInfo;
    });
    return promise;
}) // other stuff comes after this

And in your controller, do

function userProfile($scope, $cookies, userInfo, $http, $resource, $routeParams, $rootScope){
    userInfo.then(function(data){
        $scope.user = data;
    });
}

This can guarantee that whenever you use the service, it always gives you the data synchronously, you don't have to necessarily load any data before loading the controller.

回答2:

Your userInfo service has to return the promise returned by $http. That promise will then be injected into your controller, and the view will be updated as soon as the promise successfully resolves.

If you don't want the view to be rendered at all before userInfo resolves, you should set a resolve property on your route, and inject your service there:

$routeProvider.when('/profile', {
    templateUrl: 'profile',
    controller: userProfile,
    resolve: {
         userInfoData: function ($q, userInfo) {
             return userInfo;
         }
    }
});

Then just inject userInfoData into your controller in place of the userInfo service.

回答3:

You can assign the resource object to your variable like that return $http.get(url)

回答4:

I've faced the same problem in which I had to load data into a service using $resource and get that data into controllers $scope. I didn't wanted to directly return the promise and then use a resolver in the controller (as @zsong wrote) but to do all the magic into the service once and use the ability to assign a promise directly to a $scope as @Joseph Silber point out, so here is what I did :

return function($scope){promise.then(function(data){$scope.user = data})};

And used it in the controller like this :

userInfo($scope);

Not much of an improvement but it allowed me a clearer syntax in my controllers, hope it'll help even three years later !

来源：https://stackoverflow.com/questions/18477711/force-angularjs-service-to-return-data-before-loading-controller

标签

javascript

angularjs

angularjs-service