Inizializzazione del controller di ritardo Angular.js

Question

Vorrei ritardare l'inizializzazione di un controller finché non sono arrivati ​​i dati necessari dal server.

ho trovato questa soluzione per 1.0.1 Angolare: Delaying AngularJS route change until model loaded to prevent flicker, ma non poteva farlo funzionare con angolare 1.1.0

Template

<script type="text/ng-template" id="/editor-tpl.html"> 
Editor Template {{datasets}} 
</script> 
    <div ng-view> 
</div> 

JavaScript

function MyCtrl($scope) {  
    $scope.datasets = "initial value"; 
} 

MyCtrl.resolve = { 
    datasets : function($q, $http, $location) { 
     var deferred = $q.defer(); 

     //use setTimeout instead of $http.get to simulate waiting for reply from server 
     setTimeout(function(){ 
      console.log("whatever"); 
      deferred.resolve("updated value"); 
     }, 2000); 

     return deferred.promise; 
    } 
}; 

var myApp = angular.module('myApp', [], function($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/editor-tpl.html', 
     controller: MyCtrl, 
     resolve: MyCtrl.resolve 
    }); 
});​ 

http://jsfiddle.net/dTJ9N/1/

Answer 1

Da $ http restituisce una promessa, è un calo di prestazioni per creare il proprio differita solo di restituire la promessa, quando arriva il dato http. Si dovrebbe essere in grado di fare:

MyCtrl.resolve = { 
    datasets: function ($http) { 
     return $http({method: 'GET', url: '/someUrl'}); 
    } 
}; 

Se avete bisogno di fare un po 'di elaborazione del risultato, utilizzare .poi, e la promessa è incatenato in gratuitamente:

MyCtrl.resolve = { 
    datasets: function ($http) { 
     return $http({method: 'GET', url: '/someUrl'}) 
       .then (function (data) { 
        return frob (data); 
       }); 
    } 
}; 

Answer 2

È possibile dare un'occhiata a un quasi identica domanda here che utilizza le risorse, ma funziona allo stesso modo con $ http. Penso che questo dovrebbe funzionare

function MyCtrl($scope, datasets) {  
    $scope.datasets = datasets; 
} 

MyCtrl.resolve = { 
    datasets: function($http, $q) { 
     var deferred = $q.defer(); 

     $http({method: 'GET', url: '/someUrl'}) 
      .success(function(data) { 
       deferred.resolve(data) 
     } 

     return deferred.promise; 
    } 
}; 

var myApp = angular.module('myApp', [], function($routeProvider) { 
    $routeProvider.when('/', { 
     templateUrl: '/editor-tpl.html', 
     controller: MyCtrl, 
     resolve: MyCtrl.resolve 
    }); 
});​ 

Answer 3

si può sempre e solo mettere "ng-show" sull'elemento DOM più esterno e impostalo uguale ai dati che si desidera attendere.

Per l'esempio indicato sulla home page angolare JS si può vedere come è facile: http://plnkr.co/CQu8QB94Ra687IK6KgHn Tutto ciò che doveva essere fatto è stato In questo modo il modulo non mostrerà fino a quando è stato impostato il valore.

Molto più intuitivo e meno lavoro in questo modo.