How to configure an AngularJS app at load time?

Question

I want to do something like this (but obviously not this exactly, because this function doesn't work this way)

angular.bootstrap( $("#myelement"), ['myModule'], {foo: bar} );

I want to pass in a configuration object, since we may want to have more than one instance of the app on a page, with different settings, etc. All I can think of are ugly workarounds. I'm thinking the best thing would be to override an "Options" service of my own making, but I still can't figure out the proper way to do that (tersely).

Thanks in advance!

Yippie

Answer 1

How about you try something like this:

angular.module('configFoo', []).run(function() {});

angular.module('configBar', []).run(function() {});

angular.bootstrap(myEl, ['myModule', 'configFoo']);

angular.bootstrap(myOtherEl, ['myModule', 'configBar']);

http://docs.angularjs.org/api/angular.Module for all available module methods (you're probably only interested in .run() and .config())

Pileum

Yeah, I am currently using a module that overrides a 'Config' service that's defined on the original module, this looks like it would work as well, with a bit less typing. The only pain about it, is that I have to generate a string for the new module name. Any way to make the module nameless, and simply pass the module object to the bootstrap's dependencies? I couldn't get that to work. – Yippie

You don't have to provide a unique name for your config-module. You can just overwrite the old one when you bootstrap your next instance. See here: jsfiddle.net/Sjeiti/eT4Z5 – Courier

Answer 2

Here is a working code: http://jsfiddle.net/x060aph7/

angular.module('myModule', [])
    .controller('myController', function($scope,myConfig) {            
        $scope.name = 'inst '+myConfig.foo;
    })
;

var aConfig = [{foo:1},{foo:2},{foo:3}];
aConfig.forEach(function(config){
    angular.module('fooConfig',[]).value('myConfig', config);
    angular.bootstrap(getDiv(), ['myModule','fooConfig']);
});

function getDiv(){
    var mDiv = document.createElement('div');
    mDiv.setAttribute('ng-controller','myController');
    mDiv.innerHTML = '<span>{{name}}</span>';
    document.body.appendChild(mDiv);
    return mDiv;
}

Fillander

Answer 3

The following example helped us out bootstrapping a widget to a page. First a div is made - with a bit of jQuery - for the widget to load a template with an ng-include, it is controlled by WidgetLogoController. Next a module WidgetConfig is created that holds the widget's configuration.

$('#pageWidget').html(`<ng-include src="'/dist/templates/widgetLogo.html'"></ng-include>`)
    .attr('ng-controller','WidgetLogoController');

    var widgetConfig = {
        'widgetId': data.pageWidgetId,
        'areaId': data.area,
        'pageId': data.pageId
    };
    angular.module('WidgetConfig', []).value('WidgetConfig', widgetConfig);
    angular.bootstrap(document.getElementById('pageWidget'), ['Widget', 'WidgetConfig']);

Widget module includes the WidgetConfig configuration but also has a spot for it own in CONFIG:

(function (window, angular) {

    'use strict';

    window.app = angular.module('Widget', ['ngFileUpload', 'WidgetConfig'])

    .constant('CONFIG', {
        BASE_URL: 'http://osage.brandportal.com/'
    });

})(window, angular);

WidgetController can access CONFIG and WidgetConfig.

(function (app) {

    'use strict';

    app.controller('WidgetLogoController', ['CONFIG', 'WidgetConfig', 
        function(CONFIG, WidgetConfig){

            console.log('---WidgetLogoController');
            console.log('CONFIG', CONFIG);
            console.log('WidgetConfig', WidgetConfig);

        }]);

}(app));

Chantel

Answer 4

What about:

1. Load config and than load angular:

   angular.element(document).ready(() => {
   $.get('config', // url to my configuration 
          {},
          function (data) {
              window.config = data;
              angular.bootstrap(document, ['myApp']);
           }
       );
   });
   

2. Access the config:

   angular.module('myApp').run(myAppRun);
   
   function myAppRun($window) {
       $window.config; // here I have config
   }
   

Garret