然后AngularJS加载服务调用控制器并进行渲染

Question

我的问题是我需要在调用控制器并呈现模板之前加载服务. http://jsfiddle.net/g75XQ/2/

HTML:

<div ng-app="app" ng-controller="root">
    <h3>Do not render this before user has loaded</h3>            
    {{user}}
</div>
?

JavaScript的:

angular.module('app', []).
factory('user',function($timeout,$q){
    var user = {};            
    $timeout(function(){//Simulate a request
        user.name = "Jossi";
    },1000);
    return user;
}).
controller('root',function($scope,user){

    alert("Do not alert before user has loaded");
    $scope.user = user;

});
?

​

Answer 1

您可以使用手动初始化而不是带ng-app属性的自动初始化来推迟角度应用的初始化.

// define some service that has `$window` injected and read your data from it
angular.service('myService', ['$window', ($window) =>({   
      getData() {
          return $window.myData;
      }
}))    

const callService = (cb) => {
   $.ajax(...).success((data)=>{
         window.myData = data;
         cb(data)
   })
}

// init angular app 
angular.element(document).ready(function() {
       callService(function (data) {
          doSomething(data);
          angular.bootstrap(document);
       });
});

callService你的函数在哪里执行AJAX调用并接受成功回调,这将是init angular app.

还检查ngCloak指令,因为它可能是你需要的一切.

或者,当使用ngRoute时,您可以使用resolve属性,因为您可以看到@honkskillet的答案

Answer 2

甚至比手动引导更好(这也不总是一个坏主意).

angular.module('myApp', ['app.services'])
   .run(function(myservice) {
      //stuff here.
   });