如何在加载AngularJS之前初始化第三方JavaScript异步库

Question

我在AngularJS的RUN方法中初始化第三方JavaScript API（iHUB）时遇到问题。目前，代码在异步模式下运行。我希望IHUB首先初始化然后调用AngularJS路由/控制器。 （是否可以利用IHUB提供的回调方法？）

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

nameApp.run(['$window', 'myService', function($window, myService) {

   //initialize IHUB
   var actuate= new actuate();
   actuate.initialize('http://localhost:8700/iportal', settings.reqOps, "user", "pwd", callback);

   function callback(){
     alert('started!!');
   }

}]);

nameApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/:tabname', {
      templateUrl: 'pages/analyticsDetail.html',
      controller: 'tabDetailCtrl'
    }).
    when('/:tabname/:reportName', {
      templateUrl: 'pages/analyticsDetail.html',
      controller: 'reportDetailCtrl'
    }).
    otherwise({
      redirectTo: '/Buy Side Dashboard'
    });
}]);

Answer 1

使用angular.bootstrap();只有一种方法可以在AngularJS初始化行为之前实现“真实”。这允许您手动初始化AngularJS应用程序。

  

注意：手动引导应用时，不应使用ng-app指令。

<强>＆GT; Fiddle demo

视图

<div ng-controller="MyController">
  Hello, {{greetMe}}!
</div>

应用

angular.module('myApp', [])
  .controller('MyController', ['$scope', function ($scope) {
    $scope.greetMe = 'World';
  }]);

var actuateDummy = {
  initialize: function (callback) {
    setTimeout(callback, 2500);
  }
};

actuateDummy.initialize(function () {
  angular.element(function() {
    angular.bootstrap(document, ['myApp']);
  });
})

这是另一种使用resolve ui-router状态的方法。如果尚未初始化此服务，则仅初始化iHUB：

此服务还会返回actuate个对象。这样，您可以在init之后在控制器或组件中使用它。

<强>＆GT; Demo fiddle

视图

<nav>
  <a ui-sref="state1">State 1</a>
  <a ui-sref="state2">State 2</a>
</nav>

<div ui-view></div>

AngularJS应用程序

var myApp = angular.module("myApp", ["ui.router"]);

myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider.state("state1", {
    url: "#",
    template: "<p>State 1</p>",
    controller: "Ctrl1",
    resolve: {
      iHubInit: function(iHubService) {
        return iHubService.init()
      }
    }
  }).state("state2", {
    url: "#",
    template: "<p>State 2</p>",
    controller: "Ctrl2",
    resolve: {
      iHubInit: function(iHubService) {
        return iHubService.init()
      }
    }
  });
});

myApp.controller("Ctrl1", function($scope, iHubService) {
  console.log("Ctrl1 loaded.");
});

myApp.controller("Ctrl2", function($scope, iHubService) {
  console.log("Ctrl2 loaded.");
});

myApp.service('iHubService', ["$q", function($q) {

  this.iHubServiceInitialized = false;
  this.actuate = null;

  this.init = function() {

    if (!this.iHubServiceInitialized) {

      //Init
      var self = this;
      var deferred = $q.defer();
      this.actuate = new actuate();

      //initialize
      this.actuate.initialize('http://localhost:8700/iportal', settings.reqOps, "user", "pwd", function() {
        self.iHubServiceInitialized = true;
        deferred.resolve(self.actuate);
      });

      return deferred.promise;
    } else {
      return this.actuate;
    }
  }
}]);

Answer 2

尝试在配置路由提供程序时添加resolve属性，如下所示：

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

nameApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
    when('/:tabname', {
      templateUrl: 'pages/analyticsDetail.html',
      controller: 'tabDetailCtrl',
      resolve: {
                ihubInit: ['iHubService', function (iHubService) {
                    return iHubService.init();
                }]
            }
    }).
    when('/:tabname/:reportName', {
      templateUrl: 'pages/analyticsDetail.html',
      controller: 'reportDetailCtrl',
      resolve: {
                ihubInit: ['iHubService', function (iHubService) {
                    return iHubService.init();
                }]
            }
    }).
    otherwise({
      redirectTo: '/Buy Side Dashboard'
    });
}]);

nameApp.service('iHubService', ["$q", function($q){
  this.init = function() {
    var deferred = $q.defer();
    var actuate= new actuate();
    actuate.initialize('http://localhost:8700/iportal', settings.reqOps, "user", "pwd", callback);

    function callback(){
       deferred.resolve();
    }
    return deferred.promise;
  }
}]);