¿Cómo configurar una aplicación AngularJS en el momento de la carga?

Question

quiero hacer algo como esto (pero obviamente no es esto exactamente, ya que esta función no funciona de esta manera)

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

quiero pasar en un objeto de configuración, ya que es posible que desee tener más de una instancia de la aplicación en una página, con diferentes configuraciones, etc. Todo lo que puedo pensar son soluciones feas. Estoy pensando que lo mejor sería anular un servicio de "Opciones" de mi propia creación, pero todavía no puedo encontrar la forma adecuada de hacerlo (lacónicamente).

¡Gracias de antemano!

Answer 1

¿Qué tal intentar algo como esto:

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 para todos los métodos de módulos disponibles (es probable que estés interesado sólo en .run() y .config())

Answer 2

Aquí es una el código de trabajo: 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

El siguiente ejemplo nos ayudó bootstrapping un widget a una página. Primero se crea un div, con un poco de jQuery, para que el widget cargue una plantilla con un ng-include, está controlado por WidgetLogoController. A continuación, se crea un módulo WidgetConfig que contiene la configuración del widget.

módulo

$('#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 incluye la configuración WidgetConfig pero también tiene un punto para que se compra en CONFIG:

(function (window, angular) { 

    'use strict'; 

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

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

})(window, angular); 

WidgetController puede acceder CONFIG y 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

¿Qué hay de:

1. Cargar config y que la carga angular:

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

2. un acceso a la configuración:

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