在启动 Angular JS 之前等待异步任务完成
Posted
技术标签:
【中文标题】在启动 Angular JS 之前等待异步任务完成【英文标题】：Wait for Async Task to Finish Before starting Angular JS 【发布时间】：2016-08-11 15:56:19 【问题描述】：我正在使用 MobileFirst v8 和 Ionic v1.3.1 来构建应用程序。当应用程序启动时，我的app.js 文件中有常规的离子角度代码
这是 app.js
.run(function($ionicPlatform)
$ionicPlatform.ready(function()
...
)
.controller('IndexCtrl', function($scope, $state)
RememberMeService.checkIfLoggedIn().success(function(data)
alert("YAY!!");
).error(function(data)
alert('fail :(');
);
);
function wlCommonInit()
var serverUrl = WL.App.getServerUrl(function(success)
console.log(success);
, function(fail)
console.log(fail);
);
WLAuthorizationManager.obtainAccessToken().then(
function (accessToken)
console.log(">> Success - Connected to MobileFirst Server");
,
function (error)
console.log(">> Failed to connect to MobileFirst Server");
console.log(error);
);
这是RememberMeService
.service('RememberMeService', function($q)
return
checkIfLoggedIn: function()
var deferred = $q.defer();
var promise = deferred.promise;
var securityCheckName = 'UserLogin';
WLAuthorizationManager.obtainAccessToken(securityCheckName).then(
function (accessToken)
console.log('USER IS LOGGED IN!!!');
,
function (response)
console.log("obtainAccessToken onFailure: " + JSON.stringify(response));
);
promise.success = function(fn)
promise.then(fn);
return promise;
promise.error = function(fn)
promise.then(null, fn);
return promise;
return promise;
)
目前发生的情况是，在此行 WLAuthorizationManager.obtainAccessToken(securityCheckName).then 调用 RememberMeService 失败，因为它说 WLAuthorizationManager 未定义。没有定义是因为app.js中的wlCommonInit()函数还没有完成，是Async函数。
那么我如何才能延迟控制器或服务的调用，直到 wlCommonInit() 函数完成并定义 WLAuthorizationManager ？
感谢您的帮助
编辑
这是我的新function wlCommonInit()
function wlCommonInit()
var serverUrl = WL.App.getServerUrl(function(success)
console.log(success);
, function(fail)
console.log(fail);
);
WLAuthorizationManager.obtainAccessToken().then(
function (accessToken)
console.log(">> Success - Connected to MobileFirst Server");
angular.bootstrap(document.getElementById('indexBody'), ['app']);
,
function (error)
console.log(">> Failed to connect to MobileFirst Server");
console.log(error);
);
我的 index.html 是
<body id="indexBody">
<h1>test</h1>
</body>
我得到错误
kError in Success callbackId: WLAuthorizationManagerPlugin887134242 : Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null
我的引导是否正确
【问题讨论】：
也许将您的WLAuthorizationManager 包装在一个角度组件中，并且不要将其用作全局变量。如果你真的不能这样做，请使用 angular 的手动引导方法在准备好后启动你的应用程序。
@mguimard 当您说“将您的 WLAuthorizationManager 包装在一个角度组件中，并且不将其用作全局变量”时，您的意思是将其包装在服务中吗？
是的，在一个新的服务或工厂中，你也可以在这个新组件上暴露wlCommonInit方法，调用它并等待它的结束。无论如何，使用全局变量很少是一个好主意（除非你做得很好）。编辑：我真的对 MobileFirst V8 以及那些 wl 前缀方法一无所知：/
@mguimard 所以你是说我可能不应该在这个新组件上公开 wlCommonInit 方法，调用它并等待它的结束我应该在启动我的应用程序时手动引导 angular 吗？跨度>
我认为两者都应该工作。最简单和最快的似乎是在 wlCommonInit 完成后手动引导（仅当您可以订阅其回调时）
【参考方案1】：
您可以在 wlCommonInit 成功回调中手动引导您的 Angular 应用程序。详细解释见https://docs.angularjs.org/guide/bootstrap#manual-initialization。
【讨论】：
以上是关于在启动 Angular JS 之前等待异步任务完成的主要内容，如果未能解决你的问题，请参考以下文章