Introduction à Angular

Dans ce tutoriel, nous allons voir comment initialiser et débuter un projet Angular.

Ces tutoriels resteront dans les bases d’Angular, afin de vous aider à démarrer votre projet. Si vous souhaitez toutefois faire un site très avancé, il restera des notions à voir.

Qu’est ce que c’est ?

Angular est un framework basé sur TypeScript. Il permet de créer des applications Web, et notamment des SPA (Single-Page Application). Dans cette partie, nous allons nous concentrer sur la création d’une application simple sur Angular, permettant d’héberger un site de login.

Initialiser un nouveau projet

Avant de commencer ce tutoriel, assurez vous d’avoir bien configuré votre environnement, notamment en installant Node Packet Manager (npm). Aussi, si nécessaire, consultez la partie "Bases du front (HTML/CSS)" si vous n’êtes pas à l’aise avec la manipulation de fichiers HTML ou de feuille de style CSS.

Pour commencer, il faut créer une nouvelle application. Pour cela, dans un dossier vide, exécutez la suite de commande suivante dans le terminal :

npm install -g @angular/cli
ng --version
ng new <nom de votre application>

La première commande va installer Angular CLI, une interface en ligne de commande qui vous permettra de manipuler Angular. Cette installation est faite avec npm.

Par la suite, ce sera la commande ng qui sera utilisée. C’est une commande d’Angular CLI. La deuxième commande permet de vérifier que l’installation a été correctement effectuée. La dernière commande permet de créer votre application.

Une fois la dernière commande exécutée, vous voyez apparaître un petit menu dans votre terminal vous demandant "Which stylesheet format would you like to use?". Vous allez sélectionner le format de feuille de style que vous voulez.

Si vous débutez avec Angular et la programmation Web, je vous recommande CSS. Ce type de feuille est plus simple à utiliser. Si vous savez un peu comment Sass (SCSS) fonctionne, ce type de feuille possède quelques atouts non négligeables. Cependant, ce tutoriel n’a pas vocation à développer ce format.

Pour le reste des options, laissez les par défaut : vous pouvez donc appuyer sur Entrée plusieurs fois jusqu’à ce que le CLI commence à générer votre projet.

Une fois cela fait, vous pouvez lancer votre projet en vous déplaçant dedans et en exécutant la commande :

ng serve

Une fois que votre serveur local est lancé, vous devriez pouvoir aller sur votre page web et voir une page par défaut avec le nom de votre application.

Félicitations, vous venez de démarrer votre premier projet Angular !

Comprendre l’architecture générée par Angular

Une fois votre projet généré avec Angular CLI, plusieurs fichiers et dossiers sont automatiquement créés. Voyons comment cette architecture s’organise et à quoi sert chaque partie.

Voici à quoi ressemble la structure d’un projet Angular juste après sa création :

<votre application>/
 ├── public/
 │   └── favicon.ico/
 └── src/
     ├── app/
     │   ├── app.component.css       // Fichier CSS du composant
     │   ├── app.component.html      // Fichier HTML du composant
     │   ├── app.component.spec.ts   // Tests front des composants (on ne s'en occupera pas)
     │   ├── app.component.ts        // Fichier TypeScript du composant
     │   ├── app.config.ts           // Configuration du composant
     │   └── app.routes.ts           // Routes du composant
     ├── index.html
     ├── main.ts
     └── styles.css

On retrouve 2 dossiers principaux : le dossier public et le dossier src

Le dossier public contient les fichiers accessibles publiquement par toute l’application. C’est ici qu’on place par exemple des images, icônes ou fichiers statiques. Par défaut, vous y trouverez un fichier favicon.ico, c’est la petite icône affichée dans l’onglet du navigateur.

Le dossier src, quant à lui, représente le cœur de votre application Angular : tout le code source se trouve ici. On y retrouve trois fichiers essentiels :

  • index.html : le point d’entrée HTML du projet

  • main.ts : le point d’entrée TypeScript (démarrage de l’app)

  • styles.css : les styles globaux de l’application

Ce dossier contient aussi le sous-dossier app/, qui regroupe les éléments du composant principal de votre application.

Par défaut, Angular crée un composant principal appelé AppComponent, qui représente la page d’accueil de votre application. On y trouve plusieurs fichiers :

  • app.component.html : le contenu HTML du composant

  • app.component.css : les styles associés à ce composant

  • app.component.ts : la logique du composant, écrite en TypeScript

  • app.component.spec.ts : un fichier de test (que l’on peut ignorer pour l’instant)

  • app.config.ts : la configuration du composant

  • app.routes.ts : la définition des routes, c’est-à-dire la navigation entre les pages

Structurer votre projet

Vous êtes libre de réaliser l’architecture que vous souhaitez pour les fichiers de votre proje : par exemple, le projet exemple est tellement petit que j’ai décidé de les séparer par "catégorie" de composant (soit des composants individuels, soit des pages, soit des types ou soit des utilitaires, comme les services ou les guards).

Cependant, dans des projets à plus grande échelle (comme QuizMaker), vous pouvez vite vous perdre si vous suivez à la lettre l’architecture de l’exemple. C’est pour cela que dans cette partie, je vais vous donner une structure globale du projet pour bien l’agencer et éviter de vous perdre. La voici :

<votre application>/
 ├── public/
 │   └── favicon.ico/
 └── src/
     ├── app/
     │   ├── core/                     // Les fonctions qui gèrent les données de votre code (voir section "Utiliser Angular")
     │   │   ├── services              // Tous les services de données de votre application
     │   │   ├── guards                // Tous les modèles de données de votre application
     │   │   └── models                // Tous les modèles de données de votre application
     │   ├── modules/                  // Tous les modules spécifique à une page
     │   │   ├── composant_a           // Un composant quelconque
     │   │   │   ├── components        // Tous les composants exclusifs à votre composant
     │   │   │   └── pages             // Les pages reliées
     │   │   ├── composant_b           // Un autre composant quelconque
     │   │   │   ├── components        // Tous les composants exclusifs à votre composant
     │   │   │   └── pages             // Les pages reliées
     │   │   └── etc...                // Routes du composant
     │   ├── shared/                   // Tous les fichiers partagés entre composants
     │   │   ├── components            // Tous les composants partagés
     │   │   ├── header                // Le header de votre application
     │   │   └── footer                // Le footer de votre application
     │   ├── app.component.css
     │   ├── app.component.html
     │   ├── app.component.spec.ts
     │   ├── app.component.ts
     │   ├── app.config.ts
     │   └── app.routes.ts
     ├── index.html
     ├── main.ts
     └── styles.css

Tout est détaillé en commentaire, mais revenons sur les principes de cette architecture.

La partie core permet de stocker tous les fichiers que l’on stocke actuellement dans utils et types. Il s’agit de tous vos fichier utiles à votre projet pour la gestion et l’utilisation des données.

La partie modules permet quant à elle de stocker les composants et les pages d’un composant spécifique.

Enfin, la partie shared permet de stocker les composants et les pages partagés entre les composants (des boutons génériques, des formulaires, etc.).

Par exemple, si on applique cette architecture au projet exemple, on aurait quelque chose qui ressemble à ça :

<votre application>/
 ├── public/
 │   └── favicon.ico/
 └── src/
     ├── app/
     │   ├── core/
     │   │   ├── services              // équivalent à app/utils/services
     │   │   ├── guards                // équivalent à app/utils/guard
     │   │   └── models                // équivalent à app/types
     │   ├── modules/
     │   │   ├── login
     │   │   │   ├── components        // contient tous les composants de login
     │   │   └── └── pages             // équivalent à app/pages/login
     │   │   ├── logged
     │   │   │   ├── components        // contient tous les composants de logged
     │   │   └───└── pages             // équivalent à app/pages/logged
     │   ├── shared/
     │   │   ├── components            // contiendrait tous les composants générique
     │   │   ├── header                // serait vide, car nous n'avons pas de header
     │   │   └── footer                // serait vide, car nous n'avons pas de footer
     │   ├── app.component.css
     │   ├── app.component.html
     │   ├── app.component.spec.ts
     │   ├── app.component.ts
     │   ├── app.config.ts
     │   └── app.routes.ts
     ├── index.html
     ├── main.ts
     └── styles.css