Carregando dinamicamente módulos AngularJS de dentro de Templates (Views)
Fundo: Vamos supor, por uma questão de argumento, que você tenha 100.000 visualizações (parciais). Vamos supor também que você tenha controladores de escopo de visão associados e, potencialmente, serviços e filtros com escopo de visão. Tente imaginar um aplicativo de agregação que hospede 100.000 pequenos aplicativos diferentes.
Questão: Quando você tem "parciais" que exigem controladores de acompanhamento, a solução típica é fazer algo assim:
$routeProvider.when('/app1', {
templateUrl: 'partials/view1.html',
controller: 'controller1'
});
O controlador é tipicamente carregado de index.html via:
<script src="js/directives/Controller1.js"></script>
O problema com essa abordagem é que ela não é dimensionada. Existem soluções lá fora para carregar controladores dinamicamente, mas eles ainda exigem a adição de pontos de contato em várias configurações.
Solução Ideal: Idealmente - novamente para aplicações muito pequenas, cujos números estão nos 000's, o controlador pode ser carregado dinamicamente e a partir da própria parcial. Isso aliviaria a necessidade de gerenciar vários arquivos e vários pontos de contato de configuração (para não mencionar as solicitações de rede) e manter cada parcial muito bem contida.
Seria algo parecido com isto:
No roteador:
$routeProvider.when('/apps/:appId', {
templateUrl: 'partials/app-frame.html',
controller: 'AppCtrl'
});
Em contendo html (app-frame) inclua o "mini app" relativamente discrepante:
<h1>Currently hosting {{appId}}</h1><hr>
<div class="ng-include: appUrl"></div>
Em parcial resolvido com appUrl, defina o controladore marcação em um:
<script>
myApp.controller('controller1', ['$scope', function ($scope) {
$scope.foo = "bar";
}]);
</script>
<div ng-controller="controller1">
{{foo}}
</div>
Para casos como este, onde existem várias parciais e um mapeamento 1-1 para controlador e visualização, pode fazer sentido juntar os dois para eficiência e manutenção de desenvolvimento. É muito mais limpo do que usar vários arquivos e pontos de contato de configuração adicionais.
O problema é que isso não funciona. Pode ser tão simples quanto forçar o script a carregar antes de aplicar a diretiva ... mas não sabe como fazer isso?
Aqui estão algumas explicações semelhantes do problema:
https://groups.google.com/forum/#!topic/angular/H4haaMePJU0
Carregar Página Parcial Com Angular e Compilar o Controlador
Igor da equipe AngularJS diz:
I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite.
Mas eu não sei o que ele quer dizer com "use jquery" ...JQuery já está carregado no aplicativo de index.html (e antes de angularjs), mas parece que eu preciso fazer algo especificamente dentro da parcial em si.