लोड समय पर AngularJS ऐप को कॉन्फ़िगर कैसे करें?

Question

मैं (, लेकिन स्पष्ट रूप से यह बिल्कुल नहीं है क्योंकि इस समारोह इस तरह से काम नहीं करता है) कुछ इस तरह करना चाहते हैं

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

मैं एक विन्यास वस्तु में पारित करने के लिए, क्योंकि हम की तुलना में अधिक है करने के लिए चाहते हो सकता है चाहता हूँ एक पृष्ठ पर ऐप का एक उदाहरण, अलग-अलग सेटिंग्स आदि के साथ, मैं सोच सकता हूं कि बदसूरत कामकाज हैं। मैं सोच रहा हूं कि मेरी खुद की बनाने की "विकल्प" सेवा को ओवरराइड करना सबसे अच्छा काम होगा, लेकिन मैं अभी भी ऐसा करने का उचित तरीका नहीं समझ सकता हूं।

अग्रिम धन्यवाद!

Answer 1

कैसे के बारे में आप कुछ इस तरह का प्रयास करें: सभी उपलब्ध मॉड्यूल तरीकों के लिए (.config() आप शायद ही .run में रुचि रखते हैं() और)

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

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

निम्न उदाहरण हमें बाहर एक पृष्ठ पर एक विजेट bootstrapping में मदद की। पहले एक 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); 

WidgetControllerCONFIG और 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. लोड config और भार से कोणीय:

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

2. पहुँच config:

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