Comment appeler une fonction au sein d'un fichier JavaScript externe sous Angular ?

Le framework Angular possède sa propre logique lorsqu'il s'agit d'inclure des fichiers JavaScript externes. Il faut indiquer au framework l'emplacement de votre script puis importer le type dont vous avez besoin et finalement l'importer dans votre fichier. Votre script doit en conséquence être une classe JavaScript si vous souhaitez utiliser des fonctions que vous avez écrites vous-mêmes. Cette procédure permet également d'importer des librairies comme JQuery.

La première étape consiste à paramétrer la configuration de votre application pour intégrer votre script. Ouvrez le fichier "angular.json" (ou "angular-cli.json" dans les versions antérieures du framework). Dans la section "scripts", ajouter le chemin vers votre fichier.

"scripts": [
    "/chemin/vers/mon/fichier/javascript" 
 ];

Vous devez ensuite importer la classe contenue dans votre fichier. L'ajout de types de variable se fait dans le fichier "typing.d.ts". On utilise la directive "declare".

declare var maVariable:any;

Pour terminer, dans le ou les fichiers dans lesquels vous allez faire appel à vos fonctions, vous devez importer votre variable pour utiliser les fonctions liées. On utilise pour cela la directive "import". Vous pouvez indiquer en paramètre les méthodes que vous souhaitez importer (si vous souhaitez faire une sélection) ou bien le caractère "*" pour tout importer. Précisez avec le mot-clé "as" le nom de la variable qui contiendra les méthodes et avec le mot-clé "from" le nom de votre variable déclarée dans le fichier "typing.d.ts".

import * as variable from 'maVariable';
#Exemple d'utilisation
variable.maMethode();

AngularJS