iqueqiorio iqueqiorio - 3 months ago 114
Javascript Question

Wait for Async Task to Finish Before starting Angular JS

I am using MobileFirst v8 and Ionic v1.3.1 to build an app. When the app starts I have the regular ionic angular code in my

app.js
file

This is 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);
}
);


This is the 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;

}
}
})


What currently happens is the RememberMeService is called at fails at this line
WLAuthorizationManager.obtainAccessToken(securityCheckName).then
because it says
WLAuthorizationManager
is not defined. It is not defined because the
wlCommonInit()
function in
app.js
has not finished yet, it is the Async function.

So how can I delay either the controller or the service from being called until, the
wlCommonInit()
function has finished and
WLAuthorizationManager
is defined?

Thanks for the help

EDIT

Here is my new
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);
}
);


my index.html is

<body id="indexBody">
<h1>test</h1>
</body>


And I get error

kError in Success callbackId: WLAuthorizationManagerPlugin887134242 : Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: Cannot set property 'aHrefSanitizationWhitelist' of null


am i doing the bootstrap correctly

Answer

You can bootstrap manually your angular App in wlCommonInit success callback. See https://docs.angularjs.org/guide/bootstrap#manual-initialization for detailed explanations.

Comments