如何在加载时配置 AngularJS 应用程序？答案

【问题标题】：How to configure an AngularJS app at load time?如何在加载时配置 AngularJS 应用程序？
【发布时间】：2012-10-12 00:26:59
【问题描述】：

我想做这样的事情（但显然不完全是这样，因为这个功能不能这样工作）

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

我想传入一个配置对象，因为我们可能希望在一个页面上拥有多个应用程序实例，具有不同的设置等。我能想到的只是丑陋的解决方法。我认为最好的办法是覆盖我自己制作的“选项”服务，但我仍然无法找到正确的方法来做到这一点（简而言之）。

提前致谢！

【问题讨论】：

标签： configuration angularjs dry bootstrapping

【解决方案1】：

你可以试试这样的：

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 用于所有可用的模块方法（您可能只对 .run() 和 .config() 感兴趣）

【讨论】：

是的，我目前正在使用一个覆盖在原始模块上定义的“配置”服务的模块，这看起来也可以工作，而且输入更少。唯一的痛苦是我必须为新模块名称生成一个字符串。有什么方法可以使模块无名，只需将模块对象传递给引导程序的依赖项？我无法让它工作。
您不必为配置模块提供唯一的名称。当您引导下一个实例时，您可以覆盖旧的。见这里：jsfiddle.net/Sjeiti/eT4Z5

【解决方案2】：

这是一个工作代码： 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;
}

【讨论】：

【解决方案3】：

以下示例帮助我们将小部件引导至页面。首先制作一个 div - 使用一点 jQuery - 让小部件加载带有ng-include 的模板，它由WidgetLogoController 控制。接下来创建一个模块WidgetConfig 来保存小部件的配置。

$('#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 模块包含WidgetConfig 配置，但在CONFIG 中也有自己的位置：

(function (window, angular) {

    'use strict';

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

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

})(window, angular);

WidgetController 可以访问CONFIG 和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));

【讨论】：

【解决方案4】：

怎么样：

加载配置而不是加载角度：

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

访问配置：

angular.module('myApp').run(myAppRun);

function myAppRun($window) {
    $window.config; // here I have config
}

【讨论】：