Módulos AngularJS de carregamento lento com RequireJS

Graças ao excelente artigo de Dan Wahlin , consegui implementar o carregamento lento dos controladores e serviços da Angular. No entanto, não parece haver uma maneira limpa de carregar módulos independentes.

Para melhor explicar minha pergunta, suponha que eu tenha um aplicativo que seria estruturado como abaixo sem 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 (...) {...}); 

Aqui está o aplicativo de amostra com RequireJS no Plunker:
http://plnkr.co/aiarzVpMJchYPjFRrkwn

O núcleo do problema é que Angular não permite adicionar dependência à instanciação pós ng-app . Como resultado, minha solução é usar o angular.injector para recuperar a instância do object Picture a ser usado no meu View2Controller . Veja o arquivo js/scripts/controllers/ctrl2.js .

Isso cria dois problemas para mim:

  1. Os serviços injetados são executados fora do ângulo e, portanto, todas as chamadas assíncronas devem terminar com $ scope. $ Apply ()
  2. Código confuso onde algum object pode ser injetado usando a syntax angular padrão, enquanto outros exigem o uso explícito do injetor.

Algum de vocês descobriu como preguiçoso carregar módulo independente usando RequireJS e de alguma forma ligar este módulo em angular tão normal syntax de injeção de dependência angular pode ser usado?

Nota :
A questão é sobre o carregamento lento do módulo independente . Uma solução simples para este exemplo específico é criar objects “Imagens” usando $ caches de provedores durante o ng-app.config mas não é isso que estou procurando. Eu estou procurando solução que funciona com módulo de terceiros, como angular-resource .

Dê uma olhada no meu projeto no GitHub: angular-require-lazy

Este projeto pretende demonstrar uma ideia e motivar discussões. Mas é o que você quer (verifique expenses-view.js , ele carrega ng-grid preguiçosamente).

Estou muito interessado em comentários, idéias etc.


(EDIT) O módulo angular da ng-grid é carregado com preguiça da seguinte maneira:

  1. expenses-view.js é carregado expenses-view.js quando a rota /expenses é ativada
  2. expenses-view.js especifica ng-grid como uma dependência, portanto, o RequireJs carrega ng-grid primeiro
  3. ng-grid é o que chama angular.module(...)

Para conseguir isso, eu substituí (na verdade, angular.module ) o método real angular.module com o meu próprio, que suporta a preguiça. Veja bootstrap.js e route-config.js (as funções initLazyModules() e callRunBlocks() ).

Esta implementação tem suas desvantagens que você deve estar ciente de:

  1. As funções de configuração não estão implementadas (ainda). Eu não sei se é possível fornecer preguiçosamente dependencies de tempo de configuração .
  2. A ordem importa nas definições. Se o serviço A depender de B, mas A for definido após B em seu módulo, o DI falhará. Isso ocorre porque o proxy lazyAngular executa as definições imediatamente, ao contrário do Angular real, que garante que as dependencies sejam resolvidas antes de executar as definições.

Finalizei minha própria implementação chamada angularAMD e aqui está o site de amostra que a usa:

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

Ele lida com funções de configuração e definições de módulos fora de ordem.

Espero que isso ajude outras pessoas à procura de algo para ajudá-las com a integração RequireJS e AngularJS.

Parece que o módulo Node.js ocLazyLoad define uma maneira de fazer esse carregamento ocLazyLoad , embora eu não tenha certeza de como ele funciona, em termos de desempenho, comparado aos methods nas outras respostas ou codificando as dependencies. Qualquer informação sobre isso seria apreciada. Uma coisa interessante é que as outras respostas precisam do RequireJS para funcionar, enquanto o ocLazyLoad não funciona.

Parece que ocLazyLoad define outro provedor que injeta a dependência após o módulo de contenção já ter sido instanciado. Parece fazer isso essencialmente replicando algum comportamento Angular de baixo nível, como carregamento e fornecimento de módulos, e por isso parece tão complicado. Parece que ele adiciona praticamente todos os módulos angulares do núcleo como uma dependência: $compileProvider , $q , $injector , ng e muitos mais.