• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/07/2024

Construisez une application Angular avec le CLI

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 !

Snapface - partager les snaps de votre face !
Logo Snapface

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.

L'application Angular par défaut affiche une page avec des liens vers des ressources pour en apprendre plus !
Application par défaut

À 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 dossier src contient des sous-dossiers app, assets, et environments, et quelques fichiers HTML, SCSS et TS.
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  :

Le sous-dossier app contient trois fichiers correspondant à AppComponent, et un fichier AppModule
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 new

  • ng serve  exé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.  

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite