如何在加載時配置AngularJS應用程序？

我想這樣做（但顯然不是這樣就是這樣，因爲此功能不會以這種方式工作）如何在加載時配置AngularJS應用程序？

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

我想在配置對象來傳遞，因爲我們可能需要有一個以上一個頁面上的應用程序實例，具有不同的設置等。我所能想到的都是醜陋的解決方法。我想最好的辦法是重寫我自己製作的「選項」服務，但我仍然無法弄清楚這種做法（簡潔）的正確方法。

在此先感謝！

來源

2012-10-12 doubledriscoll

你怎麼樣嘗試這樣的事：

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（））

來源

2012-10-12 01:29:46

是的，我目前正在使用一個模塊來覆蓋在原始模塊上定義的'Config'服務，這看起來也可以工作，只需少一點打字。唯一的問題是，我必須爲新的模塊名稱生成一個字符串。任何使模塊無名的方法，只需將模塊對象傳遞給引導的依賴關係？我無法讓它工作。 – doubledriscoll

您不必爲配置模塊提供唯一的名稱。您可以在引導下一個實例時覆蓋舊的。看到這裏：http://jsfiddle.net/Sjeiti/eT4Z5/ – Sjeiti

不錯的Sjeiti :-) –

這裏是一個工作代碼： 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; 
}

來源

2016-06-14 08:56:24

下面的例子幫助我們走出自舉一個小部件的頁面。首先創建一個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));

來源

2016-07-14 07:12:18

什麼：

加載配置，比負荷角度：

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 
}

來源

2016-11-20 18:13:11

如何在加載時配置AngularJS應用程序？

回答

相關問題