Application à une seule page – Charge le fichier js dynamicment en fonction de la vue partielle

Je viens de commencer à apprendre Angular et à suivre le tutoriel ici – http://docs.angularjs.org/tutorial/step_00

Je suis téléchargé l’exemple de base de GitHub et cela fonctionne très bien. J’ai une question cependant – si une vue partielle nécessite un fichier js externe pour être référencé, doit-il être ajouté au fichier index.html au début? Je souhaite que l’application soit aussi légère que possible et que je souhaite uniquement inclure les références js requirejses pour la vue actuelle. Est-il possible de charger les fichiers js dynamicment en fonction d’une vue?

Je pense que cette fonctionnalité n’est pas intégrée à AngularJS.

Cependant, vous pouvez consulter ce projet qui propose un projet de base pour utiliser AngularJS avec RequireJS pour charger à la demande les fichiers js requirejs.

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

Si votre application est énorme, cela peut être utile, sinon cela peut être excessif, car le simple fait d’utiliser AngularJS réduit la quantité de code à écrire. Personnellement, je charge tous les scripts nécessaires au début.

Jetez également un coup d’œil à cet article de Briant Ford (qui travaille sur AngularJS chez Google) sur la création d’applications gigantesques:

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

Cela a juste fonctionné pour moi. Figuré je le posterais pour n’importe qui d’autre cherchant la solution la plus légère.

J’ai un contrôleur de niveau supérieur sur la balise HTML de la page et un contrôleur secondaire pour chaque vue partielle.

Dans le contrôleur de niveau supérieur, j’ai défini la fonction suivante…

$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.setAtsortingbute('src', url); script.setAtsortingbute('type', type); if (charset) script.setAtsortingbute('charset', charset); head.appendChild(script); } } } return script; } }; 

Donc, dans les contrôleurs secondaires, je peux charger les scripts nécessaires avec un appel comme celui-ci…

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

Il y a un léger délai avant que les objects contenus dans le script externe soient disponibles. Vous devez donc vérifier leur existence avant de les utiliser.

J’espère que ça fera gagner du temps à quelqu’un.

Je viens d’essayer le https://oclazyload.readme.io/ . Cela fonctionne hors de la boîte.

 bower install oclazyload --save 

Chargez-le dans votre module et injectez le module requirejs dans le contrôleur:

 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'); }); } ]); 

J’ai vraiment brisé mon esprit sur celui-ci. C’est une telle douleur que le chargement paresseux n’est pas supporté par défaut dans angularjs. En tout cas, voici deux liens qui m’ont aidé à le résoudre:

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

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