Wait for Async Task to Finish Before starting Angular JS

Question

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

Maybe wrap your `WLAuthorizationManager` in an angular component, and don't use it as a global variable. If you really cannot do this, use the manual bootstrapping method of angular to start your app when ready. — mguimard, Aug 11 '16 at 16:03
@mguimard when you say "wrap your WLAuthorizationManager in an angular component, and don't use it as a global variable" do you mean to wrap it in the Service? — iqueqiorio, Aug 11 '16 at 16:05
Yes, in a new service or factory, you can also expose the `wlCommonInit` method on this new component, call it and wait for its ending. In anyway, this is rarely a good idea to use globals (unless you're doing it well). Edit : I really don't know anything about MobileFirst V8, and those wl prefixed methods :/ — mguimard, Aug 11 '16 at 16:08
@mguimard so are you saying I probably should not expose the wlCommonInit method on this new component, call it and wait for its ending I should do the manual bootstrapping of angular when I start my app? — iqueqiorio, Aug 11 '16 at 16:13
I think both should work. The easiest and quickest seems to be the manual bootstrapping once `wlCommonInit` is finished (only if you can subscribe to its callback) — mguimard, Aug 11 '16 at 16:17
@mguimard I tried bootstrapping but code an error I have update as an edit in the question if you wouldnt mind taking a look — iqueqiorio, Aug 11 '16 at 16:31
It seems good. Cannot help you further, seems to be related to MobileFirst. Read this : http://stackoverflow.com/questions/35774608/angularjs-1-5-error-bootstrap-ibm-mobilefirst — mguimard, Aug 11 '16 at 16:43
@mguimard thanks if you want to post as answer for others i will mark the bootstrap method as correct — iqueqiorio, Aug 11 '16 at 16:52

score 0 · Accepted Answer · answered Aug 11 '16 at 16:55

0

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

answered Aug 11 '16 at 16:55

mguimard

1,881
13
14

Wait for Async Task to Finish Before starting Angular JS

1 Answers1