在angularjs中加載視圖後服務

Question

在我的角度應用程序中，我有一個視圖，一個控制器和一個服務。 服務負載資源例如：服務負載人員和結果初始值。 我想在我的服務完成他的功能加載他的資源後加載我的視圖。

var myApp = angular.module('myApp',[]); 

myApp.controller('PersonsCtrl', ($scope, Persons) { 
    $scope.persons = Persons.data; 
}); 

myApp.factory('Persons', { 
    data: [[function that load resources => take time]] 
}); 

所以我想加載我的控制器，當我的服務完成他的初始化。 有些想法？

Answer 1

假設你有一個路由提供者，這裏是一個基本的例子。當承諾解決後，「personData」將被注入到您的控制器中。關於你的服務做什麼沒有太多的信息，所以我不得不提供非常通用的東西。

myApp.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 
     .when('/persons', { 
      controller: 'PersonsCtrl', 
      templateUrl: 'persons.html', 
      resolve: { 
       personData: ['Persons', function(Persons) { 
        return Persons.getData(); 
       }] 
      } 
     }); 
}]); 

myApp.controller('PersonsCtrl', ($scope, personData) { 
    $scope.persons = personData; 
}); 

myApp.factory('Persons', { 
    getData: function() {//function that returns a promise (like from $http or $q)}; 
}); 

Answer 2

也許嘗試使用下面

var myApp = angular.module('myApp',[]); 

myApp.controller('PersonsCtrl', ($scope, Persons) { 
    $scope.persons = Persons.getData().then(function(response){ 
     //do whatever you want with response 
    }); 
}); 

myApp.factory('Persons', function ($http, $q) { 
    return { 
     getData: function() { 
      var def = $q.defer(); 
      $http.get('url'). 
       success(function (response) { 
        def.resolve(response); 
       }) 
      return def.promise(); 
     } 
    } 
});