Logo AngularJS

Lazy loading d’éléments avec AngularJS

Flattr this!

Il y a peu, j'ai rencontré un problème. Je travaillais sur une appli one-pae assez lourde avec AngularJS et j'avais besoin qu'elle soit accessible sur mobile ou en dégradé sur du IE8 par exemple. J'ai donc fait le choix du lazy loading de mes composants. Et là, la doc de AngularJS n'en parle tout simplement pas.

Lazy loading

Le lazy loading, c'est tout simplement le chargement d'éléments quand on en a besoin et non immédiatement.

Ressource

Je suis tombé sur ce site : http://ify.io/lazy-loading-in-angularjs/. Il explique bien la solution mais j'ai plusieurs soucis avec celle-ci :

  • j'utilise curl ;
  • j'utilise UI-Router.

Curl

J'ai utilisé mon outil de comparaison de loaders de scripts pour déterminer ce que j'avais besoin et en l'occurrence, curl est mon favori. De ce côté là inverser $script par curl n'est pas compliqué pour un sou. Il suffit juste d'échanger les appels de fonction.

UI-Router

La solution propose d'ajouter divers providers à l'objet du module principal de l'application. Dans l'idée, c'est pas idiot. Le problème c'est qu'ils utilisent ceux là :

  • $routeProvider ;
  • $controllerProvider ;
  • $compileProvider ;
  • $filterProvider ;
  • $provide.

Globalement, ils sont tous bons, sauf $routeProvider. Vu que j'utilise UI-Router, il suffit de remplacer ça :

app.config(function($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide)
    {
        app.controllerProvider = $controllerProvider;
        app.compileProvider    = $compileProvider;
        app.routeProvider      = $routeProvider;
        app.filterProvider     = $filterProvider;
        app.provide            = $provide;
    });

Par ça :

app.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
        app.stateProvider = $stateProvider;
        app.routeProvider = $urlRouterProvider;
        app.controllerProvider = $controllerProvider;
        app.compileProvider = $compileProvider;
        app.filterProvider = $filterProvider;
        app.provide = $provide;
    });

L'idée est assez simple. Après tout $urlRouteProvider n'est qu'une sur-couche à $routeProvider dans UI-Router. Ça aide pas mal.

Remerciements

Merci à @OCombe et @revolunet pour leur sérieux coup de main quand je me suis pris la tête sur ce problème. Trouvé l'info n'a pas été des plus simples. L'appliquer l'était plus.

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans AngularJS, avec comme mot(s)-clef(s) , , , , . Vous pouvez la mettre en favoris avec ce permalien.

Articles liés