tiempo - Lazy la carga de módulos AngularJS con RequireJS

servicio angularjs

Question

Gracias al gran artículo de Dan Wahlin , logré implementar la carga perezosa de los controladores y servicios de Angular. Sin embargo, no parece haber una forma clara de cargar de forma independiente los módulos independientes.

Para explicar mejor mi pregunta, suponga que tengo una aplicación que estaría estructurada de la siguiente manera sin RequireJS:

// Create independent module ''dataServices'' module with ''Pictures'' object
angular.module("dataServices", []).factory("Pictures", function (...) {...});

// Create ''webapp'' ng-app, with dependency to ''dataServices'', defining controllers
angular.module("webapp", [''dataServices''])
.controller("View1Controller", function (...) {...})
.controller("View2Controller", function (...) {...});

Aquí está la aplicación de ejemplo con RequireJS en Plunker:
http://plnkr.co/aiarzVpMJchYPjFRrkwn

El núcleo del problema es que Angular no permite agregar dependencia a la ng-app instancias de ng-app . Como resultado, mi solución es usar angular.injector para recuperar la instancia del objeto Picture que se usará en mi View2Controller . Consulte el archivo js/scripts/controllers/ctrl2.js .

Esto crea 2 problemas para mí:

1. Los servicios inyectados se ejecutan fuera de angular y, por lo tanto, todas las llamadas asíncronas deben terminar con $ scope. $ Apply ()
2. Código desordenado donde se puede inyectar algún objeto utilizando la sintaxis angular estándar, mientras que otros requieren el uso explícito del inyector.

¿Alguno de ustedes ha descubierto cómo cargar perezosamente el módulo independiente usando RequireJS y de alguna manera enganchar este módulo en una forma angular para que se pueda usar la sintaxis de inyección de dependencia angular normal?

Nota :
La pregunta es sobre la carga perezosa de un módulo independiente . Una solución simple para este ejemplo específico es crear el objeto "Imágenes" usando $ proveedores en caché durante ng-app.config pero eso no es lo que estoy buscando. Estoy buscando una solución que funcione con un módulo de terceros, como angular-resource .

Answer 1

Echa un vistazo a mi proyecto en GitHub: angular-require-lazy

Este proyecto pretende demostrar una idea y motivar discusiones. Pero es lo que usted quiere (ver expenses-view.js , carga ng-grid perezosamente).

Estoy muy interesado en comentarios, ideas, etc.

(EDITAR) El módulo Angular de ng-grid se carga perezosamente de la siguiente manera:

1. expenses-view.js se carga de forma perezosa, cuando se activa la ruta /expenses
2. expenses-view.js especifica ng-grid como una dependencia, por lo que RequireJs carga primero ng-grid
3. ng-grid es el que llama angular.module(...)

Para lograr esto, reemplacé (en realidad el proxy) el método angular.module real con el mío, que soporta la pereza. Consulte bootstrap.js y route-config.js (las funciones initLazyModules() y callRunBlocks() ).

Esta implementación tiene sus inconvenientes que debe tener en cuenta:

1. Las funciones de configuración aún no están implementadas. No sé si es posible proporcionar dependencias de tiempo de configuración de forma perezosa .
2. El orden importa en las definiciones. Si el servicio A depende de B, pero A se define después de B en su módulo, DI fallará. Esto se debe a que el proxy lazyAngular ejecuta las definiciones de forma inmediata, a diferencia de Angular real que garantiza que las dependencias se resuelvan antes de ejecutar las definiciones.

Answer 2

Parece que el módulo de Node.js ocLazyLoad define una forma de realizar esta carga perezosa, aunque no estoy seguro de cómo funciona, en términos de rendimiento, en comparación con los métodos de las otras respuestas o la codificación de las dependencias. Cualquier información sobre esto se agradecerá. Una cosa interesante es que las otras respuestas necesitan RequireJS para operar, mientras que ocLazyLoad no lo hace.

Parece que ocLazyLoad define otro proveedor que inyecta la dependencia después de que el módulo que contiene ya haya sido instanciado. Parece que lo hace esencialmente replicando un comportamiento Angular de bajo nivel, como la carga y la provisión de módulos, por lo que parece tan complicado. Parece que agrega casi todos los módulos principales de Angular como una dependencia: $compileProvider , $q , $injector , ng y muchos más.

Answer 3

angularAMD mi propia implementación llamada angularAMD y aquí está el sitio de muestra que lo usa:

http://marcoslin.github.io/angularAMD/

Maneja funciones de configuración y definiciones de módulos fuera de orden.

Esperemos que esto pueda ayudar a otros que buscan algo que les ayude con la integración de RequireJS y AngularJS.