Nous allons créer un vrai projet, le lancer, puis visiter les fichiers qui le
composent. Comprendre cette arborescence évite bien des tâtonnements par la suite.
1. Créer le projet
ng new mon-premier-projet
La CLI pose deux ou trois questions :
Ajouter le routage Angular ? Répondez oui : nous
l'utiliserons au chapitre 11.
Quel format de feuille de style ? Choisissez CSS pour
commencer ; SCSS viendra plus tard.
L'opération prend plusieurs minutes : la CLI télécharge toutes les dépendances.
2. Lancer l'application
cd mon-premier-projet
ng serve
Ouvrez ensuite http://localhost:4200. La page d'accueil Angular s'affiche.
Laissez le terminal ouvert : tant que ng serve tourne, chaque enregistrement d'un
fichier recharge la page automatiquement. C'est le live reload, et c'est très
agréable. Pour arrêter : Ctrl + C.
3. L'arborescence
mon-premier-projet/
├── src/ <-- tout votre travail est ici
│ ├── app/
│ │ ├── app.component.ts la logique
│ │ ├── app.component.html l'affichage
│ │ ├── app.component.css le style
│ │ └── app.module.ts la declaration du module
│ ├── assets/ images, polices, fichiers statiques
│ ├── index.html la seule vraie page HTML
│ ├── main.ts le point de depart
│ └── styles.css les styles globaux
├── angular.json configuration du projet
├── package.json liste des dependances
└── node_modules/ les bibliotheques (ne pas y toucher)
4. Les fichiers à connaître
Fichier
Rôle
index.html
La page unique. Elle contient <app-root></app-root>, où Angular injecte toute l'application.
main.ts
Démarre l'application en chargeant le module principal.
app.module.ts
Déclare les composants disponibles.
app.component.ts
Le premier composant, celui que vous allez modifier.
styles.css
Les styles qui s'appliquent à toute l'application.
node_modules/
Les bibliothèques téléchargées. Jamais modifié, jamais versionné.
5. Votre première modification
Ouvrez src/app/app.component.ts et changez le titre :
export class AppComponent {
title = 'Mon premier projet Angular';
}
Puis remplacez tout le contenu de src/app/app.component.html par :
<h1>{{ title }}</h1>
<p>Ma premiere application Angular fonctionne.</p>
Enregistrez. La page se met à jour toute seule. Les doubles accolades
{{ }} sont l'interpolation : nous l'étudierons au chapitre 7.
À retenir
ng new crée le projet, ng serve le lance sur le port 4200
Tout votre travail se passe dans src/app/
Un composant = un fichier .ts, un .html, un .css
node_modules/ ne se modifie pas et ne se versionne pas
Exercices d'application
Exercice 1. Créer et lancerCréez un projet nommé gestion-etudiants, lancez-le, et vérifiez qu'il s'affiche sur le port 4200.
Exercice 2. ExplorerOuvrez index.html et trouvez la balise <app-root>. Expliquez en une phrase à quoi elle sert.
Exercice 3. Modifier et observerChangez le titre, ajoutez un paragraphe et une image depuis assets/. Vérifiez que la page se recharge sans action de votre part.
Faites-les dans un vrai projet : c'est en pratiquant que l'on retient.