Jak skonfigurować aplikację AngularJS w czasie ładowania?

Question

chcę zrobić coś takiego (ale oczywiście nie to dokładnie, ponieważ ta funkcja nie działa w ten sposób)

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

Chcę przekazać w obiekcie konfiguracyjnym, ponieważ może chcemy mieć więcej niż jedno wystąpienie aplikacji na stronie, z różnymi ustawieniami itp. Wszystko, co mogę wymyślić, to brzydkie obejścia. Uważam, że najlepszą rzeczą byłoby zastąpienie usługi "Opcji" mojego autorstwa, ale nadal nie mogę wymyślić właściwego sposobu, aby to zrobić (zwięźle).

Z góry dziękuję!

Answer 1

Jak o spróbować czegoś takiego:

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 dla wszystkich dostępnych metod moduł (prawdopodobnie jesteś zainteresowany tylko w .run() i .config())

Answer 2

Oto Kod pracy: 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

Poniższy przykład pomógł nam ładowanie początkowe widżet do strony. Najpierw tworzy się div - z odrobiną jQuery - aby widget wczytał szablon z ng-include, kontrolowany jest przez WidgetLogoController. Następnie tworzony jest moduł WidgetConfig, który przechowuje konfigurację widżetu.

$('#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 moduł zawiera konfigurację WidgetConfig ale również ma miejsce gdyż właścicielem w CONFIG:

(function (window, angular) { 

    'use strict'; 

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

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

})(window, angular); 

WidgetController mogą uzyskać dostęp CONFIG i 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

Co o:

1. config i obciążenia niż obciążenia kątowa:

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

2. Dostęp config:

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