0

I have a preloader module which retrieves some environment data. It then bootstraps the AngularJS app. I'd like to make this module reusable (as it should be) by passing variables for module and element values. This would allow the preloader to be used for both header and footer apps separately, for example.

I can't find the resource I worked from to build this, but here's an article that outlines the use case and solution. Basically, we're applying an Angular app to a legacy Perl Catalyst template wherein we're unable to include some critical environment data. Grabbing it via an ajax call was the best workaround.

Here's the gist of it:

angular.module('Preload', [])

.run(['$http', '$q', function ($http, $q) {

    // create an array of promises to be combined later 
    // (in case we ever need more than one)
    var promises = [];

    // call environment setup api
    var env = $http({
        method: 'GET',
        url: '/api/v3/environment_urls/',
        params: {}
    }).success(function (data, status, headers, config) {

        // store the retrieved data as a value in the Preload module
        angular.module('PreloadInjections').value('environment', data);
    });

    promises.push(env);

    // resolve combined promise when all included promises are resolved
    var combinedPromise = $q.all(promises);

    // manually bootstrap app when all promises are resolved
    combinedPromise.then(function () {
        var el = document.getElementById('ng-header'); // <----- VARS USED HERE
        angular.bootstrap(el, ['alUser']); // <----------------- VARS USED HERE
    });
}]);

All that's called from the document like so:

<script>
    angular.element(document).ready(function() {
        angular.bootstrap(null, ['Preload']); // <---------- VARS DEFINED HERE SOMEHOW
    });
</script>

In the last two functional lines there I'd like to replace the respective arguments with variables. I can't figure out how to pass them in. The AngularJS bootstrapping docs mention a third config argument, but it's apparently not set up to handle arbitrary data.

How can I pass those values into the module when it's called from the document file?

10
  • it's not really clear what the purpose of this is, exactly. what are these "environment" values, and why do you have to fetch them before the app is bootstrapped? Commented Dec 6, 2016 at 16:25
  • To be used throughout the app--api URLs, static server URLs, etc. That's not really relevant, though. Commented Dec 6, 2016 at 16:40
  • 1
    What is the problem with passing in variables? var elId = 'ng-header'; var el = document.getElementById(elId); should work fine... Commented Dec 6, 2016 at 16:47
  • 1
    It is relevant, IMO, This seems to be a very unusual way to solve a pretty common problem. You aren't describing anything that must be done before bootstrapping the app; and fetching a variable from a server to determine what the name of the element you want to bootstrap the app into seems quite unnecessary. Commented Dec 6, 2016 at 16:53
  • I didn't say that the variables come from the api call. They're determined by the index files that may use the preloader for various apps. Commented Dec 6, 2016 at 16:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.