Come configurare un'app AngularJS al momento del caricamento?

Question

voglio fare qualcosa di simile (ma ovviamente non esattamente questo, perché questa funzione non funziona in questo modo)

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

voglio passare in un oggetto di configurazione, dal momento che si può decidere di avere più di un'istanza dell'app su una pagina, con impostazioni diverse, ecc. Tutto ciò a cui riesco a pensare sono brutte soluzioni alternative. Sto pensando che la cosa migliore sarebbe quella di scavalcare un servizio "Opzioni" di mia creazione, ma non riesco ancora a capire il modo corretto di farlo (in modo casuale).

Grazie in anticipo!

Answer 1

Che ne dite di provare qualcosa di simile:

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 per tutti i metodi dei moduli disponibili (probabilmente siete interessati solo a .run() e .config())

Answer 2

Ecco un codice di lavoro: 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

L'esempio seguente ci ha aiutato bootstrap un widget a una pagina. Prima viene creato un div - con un po 'di jQuery - per il widget che carica un modello con un ng-include, è controllato da WidgetLogoController. Successivamente viene creato un modulo WidgetConfig che contiene la configurazione del widget.

modulo

$('#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 include la configurazione WidgetConfig ma ha anche un posto per esso proprio in CONFIG:

(function (window, angular) { 

    'use strict'; 

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

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

})(window, angular); 

WidgetController può accedere CONFIG e 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

Che dire:

1. Load config e di carico angolare:

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

2. Accesso config:

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