如何在加载 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

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

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

> 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 对象。通过这种方式，您可以在初始化后在控制器或组件中使用它。

> 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

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

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;
  }
}]);