Episode 1 : Pourquoi, et comment générer une nouvelle application Angular avec Angular CLI ?

Pour générer une application Angular, on fait souvent le même travail répétitif : ajouter le fichier de déclaration des dépendances package.json, créer le fichier index.html, installer les dépendances avec la commande npm install, etc. C’est pratique pour se former au début, mais pour développer une application professionnelle, ce n’est pas ce qui est le plus recommandé. 

Angular CLI, ça sert à quoi ?

En fait, l’équipe Angular de chez Google propose un outil en ligne de commande, qui nous permet d’automatiser les tâches de développement les plus courantes. Cet outil se nomme Angular-CLI. Il permet d’automatiser les tâches suivantes :

  • Générer l’architecture d’une nouvelle application : emplacement des dossiers, pré-remplissage des fichiers indispensables comme index.html ou package.json, par exemple. 
  • Générer de nouveaux composants, de nouveaux services, de nouveaux modules, etc. 
  • Inspecter et relever les erreurs de syntaxe de notre code. 
  • Lancer des tests automatisés pour vérifier la qualité de notre code. 
  • Construire une archive de notre application, prête à déployer pour la production. 

Techniquement, nous ne sommes pas obligés d’utiliser Angular CLI pour développer notre application Angular, mais beaucoup de fonctionnalités embarquées par cet outil nous permettent d’améliorer fortement la qualité de notre code, et il nous permet également d’économiser beaucoup de temps. Voyons tout de suite comment installer ce formidable outil ! 

Pour information, le terme CLI est un terme que vous retrouverez souvent en informatique, qui signifie Command Line Interface (Interface en ligne de commande, en français). Concrètement, cela signifie qu’il s’agit d’un outil qui vous permet de lancer des commandes dans un terminal, et pas depuis une belle interface graphique. C’est tout ! 

Sur Internet, vous pourriez tomber sur deux noms de paquets assez similaires : angular-cli et @angular/cli. Le premier concerne l’ancien nom du paquet d’Angular CLI, et ne doit donc plus être utilisé, au profit du paquet @angular/cli

Installer Angular CLI 

Angular CLI se présente comme un simple paquet Npm, et il peut donc s’installer sur votre poste de travail en une seule ligne de commande. La même commande permet d’installer ou de mettre à jour Angular CLI : 

npm install -g @angular/cli@latest

Cette commande permet d’installer la dernière version d’Angular CLI, grâce à l’option @latest. L’ajout du paramètre –g permet d’installer Angular CLI au niveau global sur votre ordinateur, et pas seulement au niveau d’un projet. En fait, voici le schéma de base de la commande permettant d’installer un paquet avec Npm : 

npm install <nom_du_paquet>@<version> 

Rien de très compliqué. Ensuite, lors de l’installation, Angular-CLI devrait installer une nouvelle commande nommée ng sur votre poste de travail. C’est cette commande que nous utiliserons pour demander à Angular CLI d’exécuter des tâches pour nous.  

Pour vérifier que cette commande est bien installée, fermez votre terminal et ouvrez-en un nouveau. Exécutez ensuite la commande ng version : 

Angular CLI est correctement installé sur notre poste de travail

Si un message similaire à celui ci-dessus s’ouvre, alors vous pouvez passer à la suite. Ce message indique que Angular CLI est correctement installé sur votre machine, c’est plutôt encourageant ! 

Générer le socle de notre application

Angular CLI dispose d’une commande permettant de générer le socle de votre application. Sur le site officiel d’Angular CLI, on trouve la commande suivante : 

ng new <nom-application> 

Cette commande doit générer une architecture de dossiers, et certains fichiers pour votre nouveau projet. 

Heu… est-ce que cette simple commande  est suffisante pour démarrer un projet professionnel ? 

Pas vraiment. Vous avez eu raison de poser la question. En fait, il existe plusieurs options que vous pouvez passer à la commande ng new, afin de paramétrer un minimum le socle de l’application qui sera générée. Voici les principales options que nous allons utiliser : 

L’option - -routing: Cette option permet d’ajouter un fichier de configuration pour les routes de votre application. Comme nous sommes fainéants, et que nous ne voulons par rajouter ce fichier nous-mêmes par la suite, nous allons demander à Angular CLI de le faire pour nous. 😏 

L’option - -prefix : Cette option permet de préfixer le nom de vos composants par votre propre préfixe. Le préfixe par défaut est app. Par exemple, pour appeler un composant Home dans un template, vous devrez utiliser la balise <app-home>. Pour utiliser votre propre préfixe, il est recommandé de choisir quelques lettres seulement, qui font référence au nom de votre application. Par exemple, le préfixe pour une application de gestion de tâche nommée Awesome-List, le préfixe pourrait être « al« .

L’option - -scss : Cette option permet de spécifier le préprocesseur à utiliser pour le code CSS de votre application. Par défaut, l’option vaut css, ce qui signifie que vous utiliserez simplement du code CSS pour vos feuilles de style. Dans notre cas, nous spécifions scss, qui correspond au préprocesseur SASS. L’extension de nos feuilles de style sera donc ma-feuille-de-style.scss

Si vous ne savez pas ce qu’est un préprocesseur, ça n’est pas important pour la suite du cours. Un préprocesseur vous permet de déclarer des variables dans du code CSS, afin de vous éviter des duplications dans vos feuilles de style. Comme le préprocesseur génère du CSS en sortie, vous pouvez continuer à utiliser du code CSS comme vous en avez l’habitude, tout en vous laissant la possibilité d’utiliser le préprocesseur plus tard dans votre vie de développeur. Au moins, cette possibilité est déjà en place. 

Pour résumer les points précédents, voici donc la commande à exécuter pour démarrer notre projet professionnel avec Angular CLI: 

ng new awesome-list – -prefix=al – -style=scss – -routing 

Ensuite, il va falloir que nous soyons patients, car Angular-CLI va générer l’architecture de l’ensemble de notre application, et installer les dépendances pour nous (comme si nous lancions la commande npm install). Exceptionnellement, vous avez droit à une pause de cinq minutes avant de reprendre.  

Une fois que Angular CLI aura terminé, positionnez-vous à la racine de votre projet : 

cd awesome-list 

Enfin, Angular-CLI nous fournit une deuxième commande pour démarrer notre application directement dans un navigateur. Exécutez la commande suivante : 

ng serve – -open 

Par défaut, votre application va se lancer sur le port 4200. Si vous préférez démarrer votre application sur un port différent, c’est possible en spécifiant l’option port 

ng serve – -o – -port=3000 

L’option o et open sont équivalentes, il s’agit d’un raccourci de syntaxe. Cependant, je préfère éviter les raccourcis lors des explications, cela n’apporte pas grand-chose hormis de la confusion selon moi. 

Patientez encore quelques instants (eh oui, encore !). Voici ce que vous devriez obtenir : 

Le « Hello, world ! » d’Angular CLI.

Angular CLI a mis en place le socle de notre application, et l’a même démarré pour nous dans le navigateur ! 

En plus d’une architecture de base, nous disposons d’un fichier de configuration pour nos routes, un suffixe défini au niveau global de l’application, et un préprocesseur CSS. Nous avons mis en place tout cela en une seule ligne de commande, grâce à Angular CLI. 

Beaucoup de personnes utilisent la commande ng new sans spécifier d’options, et se retrouvent à devoir faire eux-mêmes ce qu’Angular CLI aurait pu faire pour eux. En tant que développeur, on préfère déléguer le travail à Angular CLI !

Dans le prochain article, nous verrons à quoi peuvent bien servir tous les fichiers générés par Angular CLI, et pourquoi il y en a autant, juste pour afficher un « Hello, World » ! 😮


Si vous n’avez pas la patience de chercher les articles sur le blog, je peux vous les envoyer dans l’ordre, directement dans votre boîte mail. En fait, cet article fait partie d’une série de 10 articles extraits de l’ouvrage Maîtriser Angular pour l’entreprise.