Carga lenta de módulos AngularJS con RequireJS

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

Para explicar mejor mi pregunta, supongamos que tengo una aplicación estructurada como la siguiente 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 muestra con RequireJS en Plunker:
http://plnkr.co/aiarzVpMJchYPjFRrkwn

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

Esto me crea 2 problemas:

  1. Los servicios inyectados se ejecutan fuera de angular y, por lo tanto, todas las llamadas asincrónicas deben finalizar con $ scope. $ Apply ()
  2. Código desordenado donde algunos objetos pueden ser inyectados usando syntax angular estándar mientras que otros requieren el uso explícito del inyector.

¿Alguno de ustedes ha descubierto cómo cargar el módulo independiente de carga lenta usando RequireJS y de alguna manera enganchar este módulo en angular para que se pueda usar la syntax de dependency injection angular normal?

Nota :
La pregunta es sobre la carga diferida del módulo independiente . Una solución simple para este ejemplo específico es crear objetos “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 .

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

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

Estoy muy interesado en comentarios, ideas, etc.


(EDITAR) El módulo Angular ng-grid se carga de forma diferida 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 ng-grid primero
  3. ng-grid es el que llama angular.module(...)

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

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

  1. Las funciones de configuración no están implementadas (todavía). No sé si es posible proporcionar de forma perezosa dependencias de tiempo de configuración .
  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 definiciones de forma inmediata, a diferencia de Angular real que asegura que las dependencias se resuelven antes de ejecutar las definiciones.

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 servicio.

Con suerte, esto puede ayudar a otros a buscar algo que los ayude con la integración de RequireJS y AngularJS.

Parece que el módulo ocLazyLoad define una forma de hacer esta carga ocLazyLoad , aunque no estoy seguro de cómo le va, en cuanto al rendimiento, en comparación con los métodos en las otras respuestas o codificar 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.

Parece que ocLazyLoad define otro proveedor que inyecta la dependencia después de que el módulo que lo contiene ya haya sido instanciado. Parece hacer esto al replicar esencialmente algún comportamiento angular de bajo nivel, como la carga y el suministro de módulos, y por eso parece tan complicado. Parece que agrega casi todos los módulos angulares básicos como una dependencia: $compileProvider , $q , $injector , ng y muchos más.