Aller au contenu principal

5-6 Fichier d'entrée index.html

Le fichier src/index.html est la page d'entrée de l'application. Lorsqu'on regarde son code, il est très minimaliste:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Houdini</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Rien ne correspond à la page qui est affichée dans le navigateur:

http://localhost:4200

Welcome to houdini!

C'est que Angular génère des applications de type SPA (Single Page Application). Ainsi, index.html est le fichier HTML d'entrée. L'application générée prendra la place de la balise <app-root> au moment de l'exécution.

info

<app-root> est le composant racine de l'application. C'est-à-dire le conteneur de toute l'application!

Bâtir l'application (ng build)​

Lorsque vous démarrez le serveur de développement, une étape de compilation est réalisée.

Pour voir le résultat de cette étape de compilation, on peut bâtir l'application pour distribution via la ligne de commande suivante:

ng build

L'étape de compilation compilera le projet dans le dossier /dist à la racine de l'espace de travail. Dans ce même dossier, vous trouverez un fichier /dist/houdini/browser/index.html.

Ce dernier est presque identique à celui dans src, mais avec quelques différences importantes:

Imgur

Remarquez qu'un fichier JavaScript et un fichier CSS ont été ajoutés. Ce fichier JavaScript contient le code et la logique de votre application.

C'est ce JavaScript qui contient le code de l'application et qui sera responsable de remplacer la balise app-root par votre application.

L'étape de compilation est donc nécessaire pour rendre disponible une application Angular. Cette étape compile votre code JavaScript contenu dans le dossier src et l'ajoute au fichier index.html afin d'en faire une application!

Lorsque vous lancez l'application via WebStorm, en mode développement, cette étape de compilation est effectuée automatiquement pour vous. Angular s'occupera aussi de re-compiler au besoin lorsqu'il y a des changements.