configuration - 如何在加载时配置 AngularJS 应用程序？

Question

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

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

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

提前致谢！

Answer 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() 感兴趣）

Answer 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;
}

Answer 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));

Answer 4

关于什么：

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

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

2. 访问配置：

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