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

          Dans ce cours, vous allez travailler sur une application de partage de photos. J'ai choisi le nom Snapface            pour mon application ; vous pouvez garder ce nom-là, ou laisser libre cours à votre créativité et trouver un nom encore meilleur !

   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 !

Un flag dans ce contexte est une option de configuration passée à une commande en ligne de commande. Ces flags sont souvent précédés de  -  ou de  --  .

Si le CLI vous demande si vous voulez ajouter du SSR/SSG, répondez Non : ce sera le sujet d'un autre cours !

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 !

N'hésitez pas à utiliser le terminal intégré de votre IDE s'il en a un !

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 !

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 ne savez pas encore ce qu'est un  component, mais c'est le sujet du prochain chapitre, donc patience ! 

Dans le sous-dossier  app  :

Les fichiers avec comme extension  .ts  sont des fichiers TypeScript.

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  :

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 !

Petit teaser du prochain chapitre : changez le contenu de  title  , enregistrez le fichier, et regardez ce qui change dans votre navigateur…

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.