Routing using RESOLVE does not wait on complete result to start with second reolve function

Question

Still new to AngularJS , I have following situation...Which I'm looking for a solution ...

When the APP is loaded (before any screen is shown) - I need to load following (in a fixed order as shown in the list):

• .properties file and store the properties to a ARRAY
• REST service method to get all translations labels to be used in the application

Because the properties file will contain for example connection properties, it's important this properties file is loaded & parsed before proceeding with the app...

Using the $routeProvider I've used following to work with the 'resolve' approach:

// routing
app.config(function($routeProvider) {
  $routeProvider

    // login
    .when('/', {
        templateUrl : 'pages/login.html',
        controller  : 'loginController',
        resolve:{
            // load properties
            loadProperties: function(properties){
                return properties.initProperties();
            },
            // load labels
            loadLocalization: function(localize, properties){
                console.log(properties.getProperties());
                return localize.initLocalizedResources();
            }
        }
    })

    // dashboard
    .when('/dashboard', {
        templateUrl : 'pages/login.html'
    })        
});

The 'initLocalizedResources' method:

initLocalizedResources: function(){
        if (!localize.loadedFromRest){
            localize.loading = true;

            //$localStorage.restServer = "http://localhost:8084";
            // var restServer = properties.getProperty('restServer') + '/WebSDPServiceMobileAPI/i18n/i18nlabels_get/culture/';

            var restServer = 'http://localhost:3034';
            var restServer = restServer + '/WebSDPServiceMobileAPI/i18n/i18nlabels_get/culture/';

            var culture = 'en-gb';
            if ($localStorage.language !== undefined)
                culture = $localStorage.language.culture;
            var restCall = restServer + culture;

            logMessage(' - Localize - callRestServer called -  : ' + restCall);
            return $http.get(restCall)
                .success(localize.successCallback)
                .error(function(data, status){
                    // set the flag to keep from looping in init
                    localize.loadedFromRest = false; 
                    localize.loading = false;
                }); 

        }
    },

The 'properties' service:

app.factory('properties', function($http){  
var arrProperties = [];    
return { 
    getProperties: function(){
        return arrProperties;
    },
    getProperty: function(key){
        return arrProperties[key];
    },
    addProperty: function(key, value){
        console.log('add property : ' + key + ' - ' + value);
        arrProperties[key] = value;
    },
    initProperties: function(){  
        return $http.get('serviceapp.properties').then(function (response) {
            var props = response.data.split("\n");
            for (var i = 0, len = props.length; i < len; i++) {
                var value = props[i].split("=");
                arrProperties[value[0]] = value[1];
            }
            console.log(arrProperties);
        });            
    }
};
});    

But what I notice is that the order of the Resolve is not the correct order... When logging the properties inside the initLocalizedResources method, they are still []... While logging the 'properties' inside the loginControllerthey are correctly filled with data... But at a stage too far...

What I need to accomplish is to load the properties before the localization labels (REST)...

My ideas of workaround:

• Add an extra route for loading the properties, and when completing navigating to the second route, where it will load the localization, then continue to the /login route

• Manually bootstrap the AngularJS application after loading & parsing the properties

As mentioned, these feel and are workarounds, ...

Is there anybody with any other ideas / tips or any help?

Thanks

Answer 1

I believe you can do it like this:

resolve:{
            // load properties
            loadProperties: function(properties){
                return properties.initProperties();
            },
            // load labels
            loadLocalization: function(localize, properties, loadProperties){
                console.log(properties.getProperties());
                return localize.initLocalizedResources();
            }
        }

Notice, how the second resolve is dependent on the loadProperties resolve.

https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c