Wie konfiguriere ich eine AngularJS App zur Ladezeit?

Question

Ich mag so etwas wie dies tun (aber natürlich nicht genau, da diese Funktion nicht so funktionieren)

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

ich in einem Konfigurationsobjekt übergeben will, da wir mehr haben wollen, können als eine Instanz der App auf einer Seite, mit verschiedenen Einstellungen, etc. Alles, was ich mir vorstellen kann, sind hässliche Problemumgehungen. Ich denke, das Beste wäre, einen eigenen "Options" -Service außer Kraft zu setzen, aber ich kann immer noch nicht den richtigen Weg finden (lapidar).

Vielen Dank im Voraus!

Answer 1

Wie über Sie so etwas wie dies versuchen:

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 für alle verfügbaren Modulmethoden (sind Sie wahrscheinlich daran interessiert sind nur in .run() und CONFIG())

Answer 2

Hier a Arbeitscode: 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

Das folgende Beispiel hat uns geholfen, zu einer Seite Bootstrapping ein Widget aus. Zuerst wird ein div gemacht - mit ein bisschen jQuery - damit das Widget eine Vorlage mit ng-include lädt, wird es von WidgetLogoController gesteuert. Als nächstes wird ein Modul WidgetConfig erstellt, das die Konfiguration des Widgets enthält.

$('#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 Modul beinhaltet die WidgetConfig Konfiguration, sondern hat auch einen Platz für sie in CONFIG besitzen:

(function (window, angular) { 

    'use strict'; 

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

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

})(window, angular); 

WidgetController kann CONFIG und WidgetConfig zugreifen.

(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

Was:

1. Last config und als Lastwinkel:

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

2. Zugriff auf die config:

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