Bonjour Angular, Bonjour !

Dans cet article, nous allons voir comment démarrer un nouveau projet Angular grâce à l’Angular CLI. Puis, nous allons découvrir ensemble la signification des fichiers et dossiers générés par le CLI.

Qu’est-ce que l’Angular CLI ?

L’Angular CLI est l’interface de ligne de commande officielle utilisée dans l’écosystème Angular. Son objectif est de simplifier la vie du développeur dans la création d’applications Angular.

L’Angular CLI est une boîte à outils complète qui vous permet de démarrer rapidement un nouveau projet Angular via la commande ng new, de générer du code à partir de blueprints prédéfinis via ng generate, de mettre à jour du code existant via ng update et d’ajouter automatiquement le code nécessaire pour certaines librairies qui supportent la commande ng add.

L’Angular CLI prend également en charge le processus de build des applications avec la commande ng build et comprend un serveur intégré qui vous permet d’afficher l’application dans votre environnement de développement local grâce à la commande ng serve.

Installation des outils nécessaires

Node.js et npm

Pour utiliser l’Angular CLI, vous devez avoir la dernière version active LTS de Node.js. Si vous n’avez pas Node.js sur votre machine, référez-vous aux guides suivants :

• Installer Node.js sous Windows sans droits d’administration
• Installer Node.js sous macOS

Vérifiez que vous avez tout ce qu’il faut en lançant les deux commandes suivantes qui doivent afficher respectivement les versions de Node.js et de npm.

1node -v
2npm -v

IDEs: WebStorm ou Visual Studio Code

Pour développer des applications Angular, vous aurez aussi besoin d’un IDE. Les deux IDEs que je vous recommande sont par ordre de préférence :

• WebStorm, le meilleur IDE pour du JavaScript, développé par JetBrains.
• Visual Studio Code, IDE gratuit et open source, développé par Microsoft.

L’Angular CLI

Installez l’Angular CLI grâce à npm en lançant la commande suivante dans une fenêtre de ligne de commande :

1npm i -g @angular/cli

Une fois l’Angular CLI installé avec succès, vous aurez à votre disposition l’exécutable ng que vous pourrez invoquer sur la ligne de commande.

Pour vérifier que vous avez correctement installé l’Angular CLI, exécutez la commande suivante dans un terminal :

1ng version

En sortie de cette commande, vous devriez voir la version de l’Angular CLI que vous avez installée, ainsi que d’autres informations comme la version de Node.js que vous utilisez et votre système d’exploitation actuel comme le montre la capture d’écran suivante.

Création d’une nouvelle application Angular !

Maintenant que vous disposez des outils nécessaires, vous pouvez générer un nouveau projet Angular en lançant la commande suivante :

1ng new my-app

Cette commande va vous poser deux questions :

• Would you like to add Angular routing? (y/N) - Traduction française : Souhaitez-vous ajouter le routeur d’Angular ? Dans une vraie application, vous auriez certainement besoin du routeur, mais pour les besoins de cet article, acceptez la réponse par défaut (“No”) en appuyant sur la touche Entrée.
• Which stylesheet format would you like to use? - Traduction française : Quel format voulez-vous utiliser pour vos feuilles de styles ? Là encore, appuyez sur la touche Entrée pour choisir la réponse par défaut qui est “CSS”.

La sortie suivante devrait s’afficher dans votre terminal :

1$ ng new my-app
2? Would you like to add Angular routing? No
3? Which stylesheet format would you like to use? CSS
4
5CREATE my-app/README.md (1059 bytes)
6CREATE my-app/.editorconfig (274 bytes)
7CREATE my-app/.gitignore (548 bytes)
8CREATE my-app/angular.json (2700 bytes)
9CREATE my-app/package.json (1037 bytes)
10CREATE my-app/tsconfig.json (901 bytes)
11CREATE my-app/tsconfig.app.json (263 bytes)
12CREATE my-app/tsconfig.spec.json (273 bytes)
13CREATE my-app/.vscode/extensions.json (130 bytes)
14CREATE my-app/.vscode/launch.json (474 bytes)
15CREATE my-app/.vscode/tasks.json (938 bytes)
16CREATE my-app/src/favicon.ico (948 bytes)
17CREATE my-app/src/index.html (291 bytes)
18CREATE my-app/src/main.ts (214 bytes)
19CREATE my-app/src/styles.css (80 bytes)
20CREATE my-app/src/assets/.gitkeep (0 bytes)
21CREATE my-app/src/app/app.module.ts (314 bytes)
22CREATE my-app/src/app/app.component.css (0 bytes)
23CREATE my-app/src/app/app.component.html (23083 bytes)
24CREATE my-app/src/app/app.component.spec.ts (956 bytes)
25CREATE my-app/src/app/app.component.ts (210 bytes)
26✔ Packages installed successfully.
27    Successfully initialized git.

Nous allons détailler à quoi servent tous ces fichiers dans la section suivante, mais pour le moment, retenez que la commande ng new a généré un nouveau projet Angular dans le répertoire my-app avec tous les fichiers nécessaires. Il a ensuite installé toutes les dépendances requises pour le développement Angular grâce au gestionnaire de paquets npm. Magnifique !

Vous pouvez maintenant vous rendre dans le répertoire my-app et lancer votre projet nouvellement généré dans le navigateur en exécutant la commande suivante :

1ng serve

Dans votre terminal, vous devriez avoir une sortie similaire à ça :

1$ ng serve
2✔ Browser application bundle generation complete.
3
4Initial Chunk Files   | Names         |  Raw Size
5vendor.js             | vendor        |   1.71 MB |
6polyfills.js          | polyfills     | 314.27 kB |
7styles.css, styles.js | styles        | 209.39 kB |
8main.js               | main          |  45.98 kB |
9runtime.js            | runtime       |   6.51 kB |
10
11                      | Initial Total |   2.27 MB
12
13Build at: 2023-01-15T21:57:03.047Z - Hash: 2ac89e70ce3ac80c - Time: 4641ms
14
15** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
16
17
18✔ Compiled successfully.

Maintenant, ouvrez localhost:4200 dans votre navigateur préféré et vous devriez voir quelque chose de similaire à la capture d’écran suivante :

Félicitations ! Vous avez réussi à développer votre première application Angular. Maintenant, revenons sur les fichiers et dossiers générés par la commande ng new.

Structure d’un project Angular

Fichiers et dossiers à la racine du projet

Voici la liste des fichiers et des dossiers à la racine d’un projet Angular :

1.
2├── .angular
3├── .editorconfig
4├── .git
5├── .gitignore
6├── .vscode
7├── README.md
8├── angular.json
9├── node_modules
10├── package-lock.json
11├── package.json
12├── src
13├── tsconfig.app.json
14├── tsconfig.json
15└── tsconfig.spec.json

Voici une description brève de ces fichiers et dossiers :

Fichier ou dossier	Description
/.angular	Dossier contenant des fichiers mis en cache par l’Angular CLI. Vous n’allez jamais interagir directement avec ce dossier.
.editorconfig	Fichier de configuration pour les IDEs et éditeurs de texte.
.git	Dossier contenant les informations et données gérées par Git.
.gitignore	Fichier définissant la liste des fichiers ignorés par Git.
.vscode	Dossier contenant des fichiers de configuration pour Visual Studio Code.
README.md	Fichier contenant des informations et des instructions concernant votre projet.
angular.json	Fichier de configuration de l’Angular CLI dans le contexte de ce projet.
/node_modules	Dossier contenant tous les paquets npm dont dépend de votre projet.
package-lock.json	Fichier généré automatiquement par npm et contenant les versions exactes des dépendances installées dans votre projet.
package.json	Fichier de manifeste pour les projets Node.js contant des métadonnées (nom du projet, auteur, etc). Ce manifeste va être utilisé par npm pour installer les dépendances du projet.
/src	Dossier contenant le code source de votre application. Nous allons décrire son contenu dans la suite de l’article.
tsconfig.app.json	Fichier de configuration de TypeScript pour la partie applicative du projet.
tsconfig.spec.json	Fichier de configuration de TypeScript pour les tests unitaires.
tsconfig.json	Fichier de configuration de TypeScript permettant de factoriser la configuration commune des deux fichiers tsconfig.*.json cités plus haut.

Autres fichiers qui peuvent se trouver à la racine du projet

Dans les versions précédentes de Angular, on pouvait aussi trouver les fichiers suivants à la racine du projet :

Fichier	Description
.browserlistrc	Fichier qui configure la liste des navigateurs supportés par votre application.
karma.conf.js	Fichier de configuration de l’outil de test Karma.

Détaillons à présent le contenu du dossier /src d’un projet Angular.

Fichiers et dossiers contenus dans /src

Le dossier /src contient les sources de votre application Angular. C’est là où vous passerez le plus clair de votre temps à écrire du code. Voici la liste des fichiers et des dossiers qui s’y trouvent :

1.
2├── app
3│   ├── app.component.css
4│   ├── app.component.html
5│   ├── app.component.spec.ts
6│   ├── app.component.ts
7│   └── app.module.ts
8├── assets
9│   └── .gitkeep
10├── favicon.ico
11├── index.html
12├── main.ts
13└── styles.css

Voici une description brève de ces fichiers et dossiers :

Fichier ou dossier	Description
/app	Dossier contenant les entités Angular lié au composant principal AppComponent
app.component.css	Feuille de style CSS associé au composant principal.
app.component.html	Fichier HTML définissant le template du composant principal.
app.component.spec.ts	Fichier contenant des tests unitaires concernant le composant principal.
app.component.ts	Fichier TypeScript contenant la logique du composant principal.
app.module.ts	Fichier contenant le module qui déclare le composant principal.
/assets	Dossier contenant les ressources du projet comme des images, des fichiers PDF, etc.
favicon.ico	Fichier contenant l’icône qui s’affiche lorsque le site est ajouté dans les marque-pages.
index.html	La page principale de l’application qui sera servi aux navigateurs par le serveur qui va héberger votre application. Contient principalement la balise app-root.
main.ts	Point d’entrée principal de l’application. Contient la logique qui instruit au navigateur de générer le DOM de l’application.
styles.css	Feuille de style CSS global de l’application.

Autres fichiers ou dossiers pouvant se trouver dans /src

Dans les versions précédentes de Angular, on pouvait aussi trouver les fichiers et dossiers suivants dans /src :

Fichier ou dossier	Description
/environments	Dossier contenant des fichiers de configuration pour le build (mode dev vs mode production).
environments.ts	Fichier de configuration pour le mode développement.
environment.prod.ts	Fichier de configuration pour le mode production.
polyfills.ts	Fichier contenant des scripts permettant de combler des lacunes de certains navigateurs.
test.ts	Le point d’entrée principal pour les tests unitaires.

Conclusion

Dans cet article, nous avons appris à générer une nouvelle application Angular et à la lancer en local grâce à l’Angular CLI. Nous sommes ensuite partis à la découverte des fichiers et dossiers générés par le CLI pour un nouveau projet Angular.