Introduction

Angular est un framework Javascript réalisé par Google qui simplifie le développement d'applications web. Comme la plupart des frameworks modernes (React, Vue.js...), il utilise le principe des composants. Dans cette quête, tu apprendras à :

✅ Créer un projet Angular simple ✅ Modifier le composant principal de ton application

Angular (https://angular.io/) ne doit pas être confondu avec AngularJS (https://angularjs.org/). AngularJS est la première itération du framework faite par Google, la version 1.x. Angular a débuté avec la version 2.0, remplaçant AngularJS (version 1.x), et a adopté un rythme de mise à jour soutenu, avec la sortie de nouvelles versions majeures tous les six mois. C'est pourquoi Angular est souvent appelé Angular 2+.

Avant de démarrer, assure-toi d'avoir terminé les quêtes suivantes👇

🤓 À la fin de cette quête, tu seras capable de :

✅ Installer tous les outils nécessaires pour Angular ✅ Créer ton premier projet Angular ✅ Comprendre la structure d'un projet Angular

🛠 Installer les outils dont tu as besoin

Angular est livré avec un outil génial : le CLI ("commande line interface" ou interface en ligne de commande en français). Avec cet outil, tu peux créer des projets, générer du code automatiquement et bien d'autres choses utiles.

Pour l'installer, tu dois d'abord installer les éléments suivants sur ton ordinateur :

• nodejs (une version récente)
• npm

→ Détails de l'installation

Maintenant que tu as installé nodeJS et npm, tu peux installer Angular CLI. Tu dois l'installer globalement, ce qui signifie que tu peux l'utiliser depuis n'importe quel répertoire de ton ordinateur avec ton terminal (ce qui est ma foi fort pratique).

Pour installer un paquet globalement avec npm, tu dois ajouter le paramètre -g. Donc, pour installer le CLI Angular, tu dois faire :

npm install -g @angular/cli

Tout est maintenant prêt pour commencer à utiliser Angular ! 💃🏻

👶 Créer ton premier projet Angular

Créer un projet Angular est assez simple. Tout d'abord, tu dois décider où tu veux le créer, et naviguer vers ce dossier avec ton terminal. Par exemple, tu peux créer un dossier nommé Angular_Projects et ensuite naviguer à l'intérieur de celui-ci :

mkdir Angular_Projects
cd Angular_Projects/

Tu peux maintenant utiliser Angular CLI pour créer un projet et spécifier son nom :

• ng permet d'appeler le CLI d'Angular
• new demande au CLI de créer un nouveau projet Angular
• myFirstApp est le nom que l'on choisit de donner à ce projet (par exemple)

ng new myFirstApp

Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) 

→ Cette question te demande si tu souhaites activer le rendu côté serveur (SSR) et la génération de site statique (SSG), deux techniques avancées pour améliorer le temps de chargement initial de ton application et optimiser le référencement (SEO) :

• SSR (Server-Side Rendering) permet à ton application Angular d'être rendue sur le serveur, générant ainsi du HTML qui est ensuite envoyé au navigateur. Cela permet aux moteurs de recherche d'indexer ton application plus facilement et améliore le temps de chargement initial pour les utilisateurs.
• SSG (Static Site Generation), ou prérendu, génère à l'avance les pages statiques de ton application lors de la construction du projet. Ces pages peuvent être servies très rapidement.

Ces techniques améliorent ton application mais demandent une bonne compréhension d'Angular. Pour le moment, opte pour 'N' afin de poursuivre sans les activer. Nous explorerons le rendu côté serveur plus en détail plus tard dans la formation.

? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org  

→ Cela te permet de choisir le style tu souhaites utiliser pour tes feuilles de style. Ce choix n'est pas irrévocable mais la migration d'un style vers un autre peut s'avérer fastidieuse.

✅La création du projet se lance alors. Elle peut prendre un petit peu de temps : Angular installe tous les éléments dont tu auras besoin pour faire fonctionner le framework. Une fois l'installation terminée, tu peux naviguer vers ton dossier de projet :

cd myFirstApp

Tu peux ensuite ouvrir ce dossier avec éditeur éditeur de code préféré. Visual Studio Code est un très bon choix.

🏗 Structure du projet

Commençons par quelques définitions de base des termes propres à Angular :

• Composant : Pense à un composant comme à un petit élément de ton site web, qui combine du code HTML, CSS, et TypeScript pour réaliser une fonction spécifique. Les composants sont les briques de base de ton application, chacun étant dédié à une partie distincte de ton site. Utiliser des composants rend ton code plus organisé et facile à gérer, car tu travailles avec des petits fichiers clairs et spécialisés.

• Module : Historiquement, un module en Angular était vu comme une boîte regroupant plusieurs composants. La plupart du temps, un seul module était suffisant pour une petite application. Avec les versions plus récentes d'Angular, l'introduction des composants autonomes (standalone: true) modifie cette dynamique. Les composants sont désormais déclarés comme autonomes par défaut, ce qui signifie qu'ils ne nécessitent pas la déclaration dans un module Angular. Ce changement vise à simplifier l'architecture des applications.

Voici la structure d'un nouveau projet Angular :

Bon, ça fait pas mal de choses ! Essayons de les détailler un petit peu :

• Le fichier package.json contient la liste de toutes les dépendances du projet. Si tu veux ajouter une bibliothèque à ton projet, tu dois l'installer avec la commande suivante : npm install libraryName --save. Grâce au paramètre --save, la bibliothèque sera ajoutée au fichier package.json. Ensuite, lorsque tu clones ton projet, ou que tu récupères le travail d'un collègue, tu peux lancer npm install pour installer toutes les dépendances listées dans ce fichier. Tu remarqueras aussi que dans le fichier package.json se trouve un objet devDependencies. A l'intérieur sont listées toutes les dépendances de ton projet que tu ne souhaites utiliser qu'en contexte de développement et non de production.

• Le dossier src contiendra tout le code du projet Angular. C'est là où tu passeras le plus clair de ton temps 👀

• Le dossier app est ton dossier contenant les composants. Lorsque tu crées un projet Angular, un composant par défaut nommé app est créé.

• Le composant app.component.ts est au cœur de ton application. Il représente le composant racine, le point de départ d'où toute l'application se déploie. Il contient le code Typescript du composant app généré par défaut ainsi qu'une classe nommée AppComponent. Avec les versions récentes d'Angular, tes composants sont des composants autonomes par défaut, ce qui simplifie grandement la structure de ton application.

• Le fichier app.component.html contient le HTML du composant app de ton projet

• Le fichier app.component.css contient le code CSS qui sera appliqué uniquement à ce composant.

• Le dossier assets contiendra des fichiers comme des images, des polices, des fichiers pdf, etc...

• Le fichier app.routes.ts permet de charger et de configurer le router de ton module app.

• Le fichier index.html contiendra la structure HTML de base de ton site web. Si tu souhaites ajouter une "métadonnée" ou d'autres éléments dans la balise "head", tu dois le faire dans ce fichier. Mais nous ne coderons rien dans ce fichier, tout sera fait à l'intérieur des composants.

• Le fichier styles.css contiendra le code CSS qui affecte tout le site web. C'est le CSS global en d'autres termes.

🧠 Gérer le projet

Pour exécuter le projet, il te suffit d'ouvrir un terminal, de te rendre dans le dossier du projet et de lancer la commande suivante :

 ng serve -o

Cette commande va transpiler le code Typescript, construire l'application Angular et lancer le serveur en local sur le port 4200. Grâce au paramètre -o, il ouvrira automatiquement le navigateur à cette page : http://localhost:4200/

Après quelques ~micro~secondes d'attente, tu pourras voir un protoype de page web comme celle ci :

Et "Voilà" ! 🎉 🎉

Félicitations, tu as devant tes yeux ébahis la première page de ta toute première application Angular !

Tentons de comprendre comment Angular parvient à afficher ce résultat. Pour commencer, tu peux ouvrir les fichiers suivants :

• src/index.html
• src/app/app.component.html
• src/app/app.component.ts

Regarde dans le fichier index.html, il y a cette balise : <app-root></app-root>. Si tu vérifies le début du fichier app.component.ts, tu verras que le sélecteur de ce composant est app-root. Cela signifie que nous pouvons afficher un composant juste en faisant appel à sa balise correspondante.

Pour information, le serveur a une fonction de rechargement en direct, ce qui signifie que si tu fais une modification au code, Angular va reconstruire ton projet et rafraîchir automatiquement la page web dans ton navigateur.

Tu peux par exemple essayer de modifier la valeur de l'attribut title dans src/app/app.component.ts et sauvegarder le fichier. Tu peux voir que la modification apparait automatiquement dans ton navigateur.

Enfin, si tu ouvres src/app/app.component.html, et que tu cherches une occurence de {{ title }}, tu tomberas nez à nez avec le texte qui s'affiche sur la page de ton application. Modifie le fichier, sauvegarde et constates sur ton navigateur que l'affichage s'est mis à jour de lui même.

💪 Challenge

Application Angular sur Github 🛡

Crée un nouveau projet Angular, et change le titre avec ce format : Bienvenue sur le site de [ton nom] !. Tu dois le faire en gardant l'attribut "title". Tu dois ensuite pousser ton code sur un dépôt Github.

Critères de validation ✅

• Le code doit être sur Github
• Les fichiers doivent être à la racine du dépôt (et non dans un dossier)
• Le titre doit avoir été modifié