2012-10-12 28 views
5

quiero hacer algo como esto (pero obviamente no es esto exactamente, ya que esta función no funciona de esta manera)¿Cómo configurar una aplicación AngularJS en el momento de la carga?

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!

Respuesta

8

¿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())

+0

Sí, actualmente estoy usando un módulo que anula un servicio 'Config' que está definido en el módulo original, parece que también funcionaría, con un poco menos de tipeo. El único problema es que tengo que generar una cadena para el nuevo nombre del módulo. ¿Hay alguna forma de anular el módulo y simplemente pasar el objeto del módulo a las dependencias del programa de arranque? No pude hacer que eso funcione. – doubledriscoll

+1

No tiene que proporcionar un nombre único para su módulo de configuración. Puede sobrescribir el anterior cuando inicia su próxima instancia. Vea aquí: http://jsfiddle.net/Sjeiti/eT4Z5/ – Sjeiti

+0

nice Sjeiti :-) –

0

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; 
} 
0

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)); 
0

¿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 
    } 
    
Cuestiones relacionadas