angularjs - generar - hola mundo angular 2
reabre y agregue dependencias a una aplicación ya iniciada (5)
¿Hay alguna forma de inyectar una dependencia tardía a un módulo angular ya arrancado? Esto es lo que quiero decir:
Digamos que tengo una aplicación angular para todo el sitio, definida como:
// in app.js
var App = angular.module("App", []);
Y en cada página:
<html ng-app="App">
Más tarde, volveré a abrir la aplicación para agregar lógica según las necesidades de la página actual:
// in reports.js
var App = angular.module("App")
App.controller("ReportsController", [''$scope'', function($scope) {
// .. reports controller code
}])
Ahora, diga que uno de esos bits de lógica bajo demanda también requiere sus propias dependencias (como ngTouch , ngAnimate , ngResource , etc.). ¿Cómo puedo adjuntarlos a la aplicación base? Esto no parece funcionar:
// in reports.js
var App = angular.module("App", [''ui.event'', ''ngResource'']); // <-- raise error when App was already bootstrapped
Me doy cuenta de que puedo hacer todo por adelantado, es decir,
// in app.js
var App = angular.module("App", [''ui.event'', ''ngResource'', ''ngAnimate'', ...]);
O bien, defina cada módulo por sí mismo y luego inserte todo en la aplicación principal ( consulte aquí para obtener más información ):
// in reports.js
angular.module("Reports", [''ui.event'', ''ngResource''])
.controller("ReportsController", [''$scope'', function($scope) {
// .. reports controller code
}])
// in home.js
angular.module("Home", [''ngAnimate''])
.controller("HomeController", [''$scope'', ''$http'', function($scope, $http){
// ...
}])
// in app.js, loaded last into the page (different for every page that varies in dependencies)
var App = angular.module("App", [''Reports'', ''Home''])
Pero esto requerirá que inicialice la aplicación cada vez con las dependencias de la página actual.
Prefiero incluir el app.js básico en cada página y simplemente introducir las extensiones necesarias para cada página ( home.js , home.js , etc.), sin tener que revisar la lógica de arranque cada vez que agrego o elimino algo.
¿Hay alguna manera de introducir dependencias cuando la aplicación ya está iniciada? ¿Qué se considera la forma idiomática (o formas) de hacer esto? Me inclino por la última solución, pero quería ver si la forma en que describí también podría hacerse. Gracias.
De acuerdo con esta propuesta en el grupo de Google Angular JS, esta funcionalidad no existe a partir de este momento. Con suerte, el equipo central decide agregar esta funcionalidad, podría usarla yo mismo.
Lo solucioné así:
hacer referencia a la aplicación de nuevo:
var app = angular.module(''app'');
luego inserte sus nuevos requisitos en la matriz de requisitos:
app.requires.push(''newDependency'');
Me doy cuenta de que esta es una vieja pregunta, sin embargo, todavía no se ha proporcionado ninguna respuesta, así que decidí compartir cómo la resolví.
La solución requiere bifurcación angular, por lo que ya no puede usar CDN. Sin embargo, la modificación es muy pequeña, por lo que me sorprende que esta característica no exista en Angular.
Seguí el enlace a los grupos de google que se proporcionó en una de las otras respuestas a esta pregunta. Allí encontré el siguiente código, que resolvió el problema:
instanceInjector.loadNewModules = function (mods) {
forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};
Cuando agregué este código a la línea 4414 en el código fuente angular 1.5.0 (dentro de la función createInjector , antes de la declaración return instanceInjector; ), me permitió agregar dependencias después de la inicialización como this $injector.loadNewModules([''ngCookies'']); .
Si desea agregar varias dependencias a la vez, puede pasarlas de la siguiente manera:
<script>
var app = angular.module(''appName'');
app.requires.push(''dependencyCtrl1'', ''dependencyService1'');
</script>
Simple ... Obtenga una instancia del módulo usando el getter de esta manera: var app = angular.module ("App");
A continuación, agregue a la colección "requires" de esta manera: app.requires [app.requires.length] = "ngResource";
De todos modos, esto funcionó para mí. ¡BUENA SUERTE!