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?
var elId = 'ng-header'; var el = document.getElementById(elId);should work fine...