JavaScript externo Lazy-load en uno de los controladores AngularJS

Question

Algunas de mis rutas necesitan funcionalidad de JS externo. No quiero cargarlos todos a la vez ya que esos JS son necesarios solo en ciertas rutas (por ejemplo, /upload necesita algo de JS para cargar fotos, /photos necesita otro JS para lightbox, /funny necesita JS para material de animación, etc.).

¿Cuál es la mejor práctica para cargar de forma lenta esos JavaScripts externos?

Esas rutas se puede acceder a varias veces (por ejemplo, el usuario puede ir a continuación /upload/photos/upload luego otra vez)

Answer 1

La única manera que conozco para manejar casos como éste está utilizando el método de "resolver" de una ruta. Este método se puede usar para definir una dependencia que se cargará antes de que se cree una instancia del controlador de la ruta. Uno de los diferentes posibles tipos de devolución de este método es una promesa. Por lo tanto, puede usar esto para comenzar a cargar su código JavaScript externo de forma asincrónica y devolver una promesa que se resuelve tan pronto como se carguen sus scripts externos.

La documentación para esto se puede encontrar aquí: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider en la sección "cuándo".

Answer 2

@ La respuesta de alex3683 es ​​probablemente la forma correcta de AngularJS, pero no capto el concepto, así que en su lugar utilizo el getScript() de jQuery. Por lo tanto, en CoffeeScript:

yourModule.factory 'foo', -> 
    $.getScript 'https://script-to-load', -> 
     # whatever you want to do once the script is loaded 

Y simplemente llámelo desde su controlador. Como los servicios de AngularJS son flojos y únicos, esto solo cargará el script una vez.

Answer 3

Además de lo que ha dicho Alex, si va a cargar elementos angulares como controladores y directivas, debería usar el proveedor correspondiente para registrarlos en lugar del API del módulo. Los artefactos registrados utilizando el API del módulo después de que la aplicación se haya iniciado, no estarán disponibles para la aplicación. Por ejemplo, definiría un controlador vago como esto ...

$controllerProvider.register('SomeLazyController', function($scope) 
{ 
    $scope.key = '...'; 
}); 

en lugar de esto ...

angular.module('app').controller('SomeLazyController', function($scope) 
{ 
    $scope.key = '...'; 
}); 

He escrito un post detallando esto, así como el uso de la ' resolver el método que Alex habla, para implementar la carga diferida en AngularJS. http://ify.io/lazy-loading-in-angularjs/