Aplicativo de página única – carrega o arquivo js dinamicamente com base na visualização parcial

Acabei de começar a aprender Angular e seguir o tutorial aqui – http://docs.angularjs.org/tutorial/step_00

Eu fiz o download do exemplo de semente do GitHub e ele funciona muito bem. Eu tenho uma pergunta – se uma visão parcial requer que um arquivo js externo seja referenciado, ele precisa ser adicionado ao arquivo index.html no começo? Eu quero que o aplicativo seja o mais enxuto possível e queira include apenas as referências js necessárias para a exibição atual. É possível carregar os arquivos js dinamicamente com base em uma visualização?

Eu acho que esse recurso não é interno com o AngularJS.

No entanto, você pode dar uma olhada neste projeto que oferece um projeto base para usar o AngularJS com o RequireJS para carregar sob demanda os arquivos js necessários.

https://github.com/tnajdek/angular-requirejs-seed

Se a sua aplicação é enorme, pode ser útil, caso contrário, pode ser um exagero, porque apenas o fato de usar o AngularJS reduz a quantidade de código a ser escrita. Pessoalmente, eu carrego todos os scripts necessários no começo.

Também dê uma olhada neste post de Briant Ford (que está trabalhando no AngularJS no Google) sobre como fazer aplicativos enormes:

http://briantford.com/blog/huuuuuge-angular-apps.html

Isso só funcionou para mim. Imaginei que iria postar para qualquer outra pessoa buscando a solução mais leve.

Eu tenho um controlador de nível superior na tag html da página e um controlador secundário para cada exibição parcial.

No controlador de nível superior, defini a seguinte function…

$scope.loadScript = function(url, type, charset) { if (type===undefined) type = 'text/javascript'; if (url) { var script = document.querySelector("script[src*='"+url+"']"); if (!script) { var heads = document.getElementsByTagName("head"); if (heads && heads.length) { var head = heads[0]; if (head) { script = document.createElement('script'); script.setAttribute('src', url); script.setAttribute('type', type); if (charset) script.setAttribute('charset', charset); head.appendChild(script); } } } return script; } }; 

Então nos controladores secundários eu posso carregar os scripts necessários com uma chamada como a seguinte…

 $scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8'); 

Há um pequeno atraso antes que os objects contidos no script externo estejam disponíveis, portanto, você precisará verificar sua existência antes de tentar usá-los.

Espero que isso poupe alguém algum tempo.

Eu apenas tentei o https://oclazyload.readme.io/ . Funciona fora da checkbox.

 bower install oclazyload --save 

Carregue no seu módulo e injete o módulo requerido no controller:

 var myModule = angular.module('myModule', ['oc.lazyLoad']) .controller('myController', ['$scope', '$ocLazyLoad', '$injector', function($scope, $ocLazyLoad, $injector) { $ocLazyLoad.load( ['myExtraModule.js', 'orAnyOtherBowerLibraryCopiedToPublicFolder.js' ]) .then(function() { // Inject the loaded module var myExraModule = $injector.get('myExtraModule'); }); } ]); 

Eu realmente quebrei a minha cabeça neste. É tão difícil que o carregamento lento não seja suportado por padrão no angularjs. De qualquer forma aqui estão dois links que me ajudaram a resolvê-lo:

http://ify.io/lazy-loading-in-angularjs/

http://www.bennadel.com/blog/2554-Loading-AngularJS-Components-With-RequireJS-After-Application-Bootstrap.htm