Faisant suite à notre précédent article sur Typescript, nous allons maintenant créer un projet AngularJS  avec TypeScript (en attendant la version 2.0 d’AngularJS qui est en cours de développement)

Quels sont les avantages à utiliser cette surcouche ?

Bien qu’angular soit déjà un framework permettant de structurer son architecture projet, il devient vite compliqué de maintenir un code dans le temps sans une certaine rigueur.
Prenons un exemple, nous pouvons ajouter des propriétés sur le $scope dans une fonction du controller sans les déclarer ailleurs. Cependant, lors d’une refactorisation, nous pouvons passer à coté de cette déclaration à l’intérieur d’une fonction et causer une régression. C’est ici que nous pouvons voir l’un des avantages de Typescript en utilisant les interfaces.

Cet article se décomposera en plusieurs parties :

  • Installation de l’environnement de développement
  • Initialisation du projet
  • Construction du gruntfile

Installation de l’environnement de développement

Initialisation du projet

Afin d’avoir une base pour commencer notre projet voici la structure de la solution :

 

Pour initaliser la solution nous allons télécharger la bibliothèque angularJS

L’option –save permet d’enregistrer les dépendances dans le fichier bower.json

tsd

La première étape de configuration d’un projet Angular en Typescript est de récupérer les fichiers de définition, ayant pour extension *.d.ts. Dès que vous souhaitez utiliser une bibliothèque externe n’étant pas écrite en Typescript, il vous faudra récupérer ces fichiers afin de permettre l’autocomplétion.
Ces fichiers sont disponibles grâce au projet tsd manager. Pour l’utiliser il faut l’installer grâce à NPM.

Une fois tsd installé, il faut l’initialiser. Pour cela, tapez la commande suivante :

Vous venez d’ajouter un fichier tsd.json qui permet de configurer l’ensemble des fichiers de définitions que vous allez installer pour votre projet. C’est grâce à  ce fichier que les autres développeurs récupéreront exactement les mêmes versions que vous.
Le fichier tsd.d.ts permet quand à lui de recenser tous les fichiers de définitions que vous avez configuré. C’est ce fichier que vous référencerai afin d’obtenir l’auto complétion sur vos bibliothèques externes.

De base nous installons 2 fichiers de définition :

  • angular
  • angular-ui-router

N’oubliez pas de rajouter l’option –save pour que les fichiers *.d.ts soit inscrit dans le fichier typings\tsd.d.ts

Grunt

Afin de pouvoir compiler nos fichiers typescript nous devons également installer quelques dépendances npm :

  • grunt-ts
  • load-grunt-tasks
  • typescript

Afin que ces dépendances soient sauvegardées sur le projet (package.json), n’oubliez pas de rajouter –save sur la commande

Nous allons maintenant modifier le Gruntfile pour réaliser la compilation des fichiers TS. A cette étape le Gruntfile ne servira que pour la compilation. Nous verrons lors d’un prochain article comment l’enrichir pour générer les fichiers CSS, faire les tests et effectuer un déploiement du site.

Ici, la tache par défaut du Gruntfile permet de nettoyer le répertoire des fichiers JS avant de compiler les fichiers TS.

Ensuite, ouvrez ce répertoire avec un éditeur de code (par exemple VSCode, IDE disponible sur plusieurs plateformes).

La première étape est de configurer son environnement pour ne voir uniquement que les fichiers TS. En effet nous n’aurons plus besoin de manipuler les fichiers JS puisqu’ils vont être générés automatiquement. Pour faire cela dans VsCode : File > Preferences > Workspace Settings

Rajoutez les extension js et js.map dans la liste des extensions à exclure. Afin d’être restrictif nous allons appliquer cette modification uniquement sur les répertoires app et app_engine.

settingsVsCode

Visual Studio Code settings

Maintenant que l’environnement est prêt nous allons pouvoir entamer le développement du projet.

Développement

Avant toute chose nous devons ajouter un fichier reference.ts à la racine du site. Ce fichier nous permettra de referencer l’ensemble des fichiers TS pour faciliter l’auto-complétion (il ne devra donc contenir aucun code).
Rajoutez la ligne suivante (qui permet de référencer les fichiers de définition que nous avons intégré avec tsd manager):

La 1ere étape du développement consiste à déclarer notre application Angular. Pour cela créez un fichier app.startup.ts pour initialiser les différentes routes et configurer l’application (Vous pouvez vous inspirer du fichier présent dans le starter).

Création d’un controller

Pour créer un controller, il y a deux étapes. la première est de recenser les variables que l’on veut exposer à la vue pour les ajouter à une interface. Ce travail permet de typer l’utilisation du $scope et d’éviter les déclarations de variables n’importe où dans le code. Pour cela on étend ng.IScope et on définit nos variables. La déclaration du namespace est laissée à votre discrétion bien entendu.

La seconde étape est de la déclarer la classe du controller dans laquelle on va injecter le $scope typé :

L’enregistrement du controller ce fait comme d’habitude grâce à angular.module(“…”).controller(“…”)

Ajout d’une classe model

Afin d’avoir un projet typé, les classes Model doivent elles aussi être déclarées. Pour cela, créez un répertoire Models à la racine du projet, puis ajoutez un fichier ts pour référencer votre nouvelle classe :

N’oubliez pas d’ajouter la référence vers ce fichier ts dans le fichier reference.ts. De cette manière la déclaration de cette classe pourra être utilisée dans tout le reste du projet. Il faut également ajouter la référence vers le fichier js qui sera généré dans l’index.html.

utilisation de la classe school dans un controller :

Déclaration d’un service

Dans notre cas nous nous servons des services pour séparer les couches au niveau de notre app_engine (par exemple pour faire les appels vers les API). Afin de garder une réactivité sur l’appel de nos services, nous utilisons également les promises.

Dans cette classe d’accès aux données nous allons utiliser ng.IHttpService pour accéder aux API et ng.IQService pour les promises.

Lorsque vous rajoutez des services ou tout fichier TS devant être utilisé dans le reste de la solution n’oubliez pas de rajouter la référence dans le fichier reference.ts à la racine du projet. Sinon vous n’obtiendrez pas l’auto-complétion.

Cas de la directive

Pour réaliser une directive il faut implémenter ng.IDirective. La particularité de la directive est le fait de définir une méthode (Factory) permettant de retourner une instance de la directive. Cela est du à Angular qui demande toujours une fonction en paramètre lors la déclaration d’une directive.
Si vous devez récupérer des paramètres de la directive vous pouvez enrichir ng.IAttributes, par exemple pour exécuter une fonction du controller.

Dernière étape la compilation

Etant donné que nous avons créé un gruntfile au début du projet nous allons pouvoir automatiser cette partie.
Si vous êtes sous VS Code vous pouvez lancer une tache grunt avec la commande :
crl + maj + p
Sélectionnez launch task, puis le nom de la tache à lancer (dans notre cas Default).

Lancement d'une task

Lancement d’une task

Si on souhaite gagner un peu de temps et lancer directement une tache de compilation nous pouvons configurer le task runner. Si le fichier tasks.json n’est pas encore créé vous pouvez faire une première fois ctrl + maj + b et VS Code va vous proposer de rajouter ce fichier.

Configuration de la tache de build

Configuration de la tache de build

Il faut ensuite compléter le fichier avec le nom de la tache que l’on souhaite exécuter (dans notre cas default).

Maintenant lorsque l’on refait ctrl + maj + b nous pouvons lancer directement notre tache de compilation.

L’interet d’utiliser ce type de technologie c’est que nous ne sommes pas lié à un IDE. Ainsi si nous ouvrons un invite de commande nous pouvons également executer notre tache grunt.

Tester le site

Pour tester le site, vous pouvez soit configurez le serveur web pour pointer sur le répertoire, soit vous pouvez lancer la commande grunt web. Cette commande dépend du plugin grunt-http-server

Conclusion

Nous avons pu voir ici l’utilisation de TypeScript dans un projet AngularJS. Vous pouvez télécharger le projet exemple sur notre github.

Dans le prochain article nous verrons comment intégrer toutes les étapes du gruntfile afin de pouvoir déployer notre site et exécuter un suite de tests unitaires.

Partager