Créez une nouvelle application
Ça y est, c'est maintenant !
Depuis une ligne de commande, naviguez dans le dossier où vous souhaitez créer votre projet Angular, et exécutez la commande suivante :
ng new snapface --style=scss --skip-tests=true
La commande ng new génère une nouvelle application Angular, installe les dépendances du projet, et initialise un dépôt Git. Le flag --style=scss dit au CLI que vous souhaitez utiliser le SCSS pour les styles (plutôt que le CSS ou le LESS, par exemple), et le flag --skip-tests=true dit que vous ne voulez pas générer de fichiers de tests unitaires pour ce projet. Oui, c'est mal de ne pas écrire de tests, mais chaque chose en son temps !
Une fois la commande exécutée, votre projet est prêt, et vous pouvez l'ouvrir d'ores et déjà dans votre IDE !
Lancez le serveur de développement
Ouvrez une ligne de commande dans le dossier du projet (dans mon cas, le dossier Snapface), et exécutez :
ng serve
Cette commande du CLI va compiler l'application et lancer un serveur de développement sur http://localhost:4200 : vous pouvez ouvrir votre navigateur à cette adresse pour voir tourner l'application.
À chaque fois que vous enregistrerez des modifications dans un fichier de l'application, le serveur de développement les prendra en compte !
Explorez le dossier du projet
Une application Angular contient plusieurs fichiers (notamment de configuration) qui ne nous intéresseront pas dans le cadre de ce cours. Vous allez majoritairement travailler dans le dossier src :
Le premier fichier qui nous saute aux yeux est index.html . Ici, comme sur un site classique, index.html est le fichier principal de votre projet. Mais si vous regardez dedans …
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snapface</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>… le <body> ne contient qu'une balise <app-root> vide. D'où vient tout ce que l'on voit dans le navigateur, dans ce cas ??
Eh bien comme son nom l'indique, la balise <app-root> correspond à la racine de votre application, ou plus précisément à l'AppComponent, le component racine de votre application. Angular sait qu'il doit remplacer cette balise par le fameux AppComponent, donc allons voir où il se trouve !
Dans le sous-dossier app :
Si vous regardez dans le fichier app.component.html , vous y trouverez le contenu que vous voyez dans votre navigateur ! Mais comment Angular sait-il qu'il faut remplacer <app-root> par ce contenu ? Le secret se trouve dans app.component.ts :
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet]
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'snapface';
}Vous verrez dans la prochaine partie du cours comment fonctionne ce fichier plus précisément, mais vous devriez déjà voir quelques éléments intéressants !
En résumé
Une nouvelle application Angular se crée avec
ng newng serveexécute le serveur de développement.La balise
<app-root>correspond à AppComponent.
Qu'avez-vous appris dans cette partie du cours ?
Vous avez vu comment tirer le meilleur de ce cours.
Vous avez découvert Angular.
Vous avez installé les outils et dépendances nécessaires.
Vous avez créé une nouvelle application et fait tourner le serveur de développement.
Il vous reste un quiz pour valider les acquis de cette première partie ! Après, nous nous retrouverons dans la partie 2 pour parler components.
