Introduction

Ce chapitre marque notre entrée dans les fondamentaux du développement Angular, conçu pour vous doter des connaissances et des outils essentiels pour la mise en place d’un environnement de développement structuré. Il faudra exécuter certaines instructions en ligne de commandes mais cela ne requiert pas de connaissances particulières au préalable.

Configuration de l’environnement

1. Visual Studio Code

Visual Studio Code est un éditeur de code créé par Microsoft et disponible sur Windows, macOS et Linux. Utiliser cet éditeur est un choix personnel pour l’écriture de ce livre. Visual Studio Code est reconnu comme un éditeur efficace, mais aussi le plus utilisé selon une enquête menée par StackOverflow en 2023. Cependant, vous n’aurez aucune gêne à poursuivre la lecture de ce livre en utilisant un autre éditeur de votre choix.

Pour l’installer, rendez-vous sur la page https://code.visualstudio.com/ afin de télécharger l’installeur. Une fois prêt, nous vous recommandons fortement d’installer au minimum ces trois extensions :

ESLint (EcmaScript Lint) : un outil d’analyse de code statique (ou lint), extrêmement populaire, utilisé pour identifier les erreurs, de syntaxe mais aussi de convention de code pour JavaScript/TypeScript. Grâce à lui, en plus de prévenir des erreurs, vous allez pouvoir maintenir la qualité du code et assurer la cohérence de syntaxe/format au sein d’une équipe. L’extension permet à votre éditeur d’analyser votre code en temps réel afin d’alerter et même de corriger automatiquement les erreurs, facilitant ainsi le développement.
Prettier : un formateur de code, qui prend en charge de nombreux langages. Contrairement à ESLint qui se concentre sur la détection d’erreurs, Prettier...

Structure d’un projet Angular

Regardons ensemble ce que la CLI a généré :

Il y a d’une part, à la racine de notre projet, une série de fichiers de configuration qui orchestrent le comportement de l’application, comme les options relatives à npm et TypeScript, certaines réservées aux éditeurs ou à la gestion de version de code. D’autre part, le vif du sujet, le dossier src où se trouve le code de votre application.

1. Fichiers de configuration

a. package.json et package-lock.json

Le premier représente la carte d’identité de votre application : vous pouvez y configurer le nom de votre application, sa version, ses packages de dépendances externes, mais aussi des alias de scripts à exécuter. Le second fichier est quant à lui un manifeste généré automatiquement lorsque l’on change les dépendances du projet, et qui documente avec précision les versions de chacun d’eux. Ce fichier est là comme garant lors de l’installation du projet sur différents postes et environnements.

b. angular.json

Semblable à cela, nous trouverons aussi le fichier angular.json. Comme son nom le laisse entendre, il est très spécifique à la configuration d’Angular. Nous pouvons y spécifier des options de compilation, de test, de déploiement, mais aussi la définition de votre espace de travail, car un projet Angular n’est pas forcément composé d’un seul projet. Il peut être une suite d’applications et de librairies. Nous...

Projet fil rouge

1. Introduction

Tout au long de ce livre, nous allons créer ensemble une application web qui représente un tableau Kanban. Ce type de projet est suffisamment simple pour être appréhendé dans le cadre du livre, ce qui va nous permettre de nous concentrer sur le fait d’implémenter ce que l’on apprend au fur et à mesure des chapitres, sans être ralentis à cause de spécificités du projet.

2. Qu’est-ce qu’un tableau Kanban ?

Un tableau Kanban ou Kanban board est un outil visuel, efficace pour gérer et suivre l’avancement des tâches dans un projet. Couramment utilisé dans les méthodologies agiles et lean pour organiser le travail de manière flexible et efficiente, ce tableau est divisé en colonnes ; chacune représentant une étape spécifique du flux de travail et disposée généralement de gauche à droite. Les tâches sont représentées par des cartes ou des post-it qui se déplacent d’une colonne à l’autre, à mesure qu’elles progressent dans le processus. Ce système permet une visualisation claire de l’état des tâches, facilite la collaboration entre les membres de l’équipe et aide à identifier les goulots d’étranglement dans le flux de travail....

Les premières étapes avec Angular