Karim's Blog

Un peu de tout sur CSS, HTML, AngularJS, JavaScript, Php et le reste

Angular2 : Charger les scriptes séparement

Afin d'utiliser des bibliothèques jQuery ou Javascript dans une application AngularJS 2, if faut charger ces derniers dans index.html ce qui rend le chargement de la page très lent et consomme beaucoup de ressources système !
Dans ce tutoriel on va voir comment charger des scriptes seulement dans les composants spécifiques !

Dans le Component et dans la fonction ngOnInit() on ajout ces quelques lignes :

import {Component, OnInit, AfterViewInit} from '@angular/core';

....

....

export class MyComponent {


    constructor() { }



   ngOnInit() {

        
  
            $.fn.scriptLoad({

                source : ['scr1.js',

                          'src2.js',

                          'srcx.js']

               ,tag : 'body' //(optional) body : default, head, app, footer ...

            });


    }



   ngAfterViewInit(){


   
           $(selecor).NomPlugin(); // on fait appel à notre plugIn

   }


}

Maintenant on va voir ensemble le plugin $.scriptLoad (qui sera charger dans index.html) comment il fonctionne :

(function($) {


    $.fn.scriptLoad = function(options) {

        var settings = $.extend({

            source: null,

            tag: 'head'

        }, options);



   for(k in settings.source){
 // on fait le test sur l'ensemble des scripts

      var  ss = settings.source[k];
 
      var t   = document.querySelectorAll('[src="' + ss + '"]'); // on vérifie si le script est déjà chargé !

        if(t.length == 0) // si n'est pas chargé

        { 


/*

On crée un objet et on charge le script dans le TAG

*/

        var obj = document.createElement("script");

            obj.setAttribute("src", ss);

            obj.setAttribute("async", "async");
 // Async pour se charger à part

            document.getElementsByTagName(settings.tag)[0].appendChild(obj);


 } // sinon

        else

        {   

            console.log('JSLoad ['+ss+'] déjà chargé !');

        }



    } // fin de la boucle

    };



}(jQuery));

Vous trouvez plus de détails sur le script dans le code source
Merci !