Lazy-load JavaScript esterno in uno dei controller AngularJS

Question

Alcuni dei miei percorsi richiedono funzionalità da JS esterno. Non voglio caricarli tutti in una volta poiché quei JS sono necessari solo in determinate rotte (ad esempio, /upload ha bisogno di JS per il caricamento delle foto, /photos ha bisogno di un altro JS per lightbox, /funny ha bisogno di JS per le animazioni, ecc.).

Qual è la procedura migliore per caricare pigramente quei JavaScript esterni?

quelle rotte si può accedere più volte (ad esempio utente può andare a /upload poi /photos poi /upload di nuovo)

Answer 1

L'unico modo che conosco per gestire casi come questo sta usando il metodo di "volontà" di un percorso. Questo metodo può essere utilizzato per definire una dipendenza da caricare prima dell'istanza del controllore della rotta. Uno dei diversi tipi di ritorno possibili di questo metodo è una promessa. Pertanto, è possibile utilizzarlo per iniziare a caricare il codice JavaScript esterno in modo asincrono e restituire una promessa risolta non appena vengono caricati gli script esterni.

La documentazione per questo può essere trovata qui: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider nella sezione "quando".

Answer 2

@ alex3683 La risposta è probabilmente il modo corretto di AngularJS, ma io non afferro il concetto, quindi invece faccio uso di jQuery getScript(). Quindi, in CoffeeScript:

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

E basta chiamarlo dal controller. Poiché i servizi di AngularJS sono pigri e singleton, questo caricherà lo script solo una volta.

Answer 3

In aggiunta a ciò che Alex ha affermato, se si sarà pigri a caricare artefatti AngularJS come controller e direttive, sarà necessario utilizzare il provider rilevante per registrarli invece dell'API modulo. Gli artefatti registrati utilizzando l'API modulo dopo che l'applicazione è stata avviata, non saranno disponibili per l'applicazione. Ad esempio, si definirebbe un controller pigri come questo ...

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

invece di questo ...

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

ho scritto un post sul blog i dettagli di tale e come utilizzare il ' risolvere 'il metodo di cui parla Alex, per implementare il caricamento lento in AngularJS. http://ify.io/lazy-loading-in-angularjs/