• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 15/02/2019

Structurez avec les components

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Préparez le projet

Tout d'abord, créez un nouveau projet sur lequel vous travaillerez tout au long des chapitres suivants.  Depuis une ligne de commandes, naviguez vers votre dossier cible et tapez la commande suivante :

ng new mon-projet-angular --style=scss --skip-tests=true.

Le premier flag (élément de la commande suivant un double tiret --) crée des fichiers  .scss  pour les styles plutôt que des fichiers  .css .  Le second flag annule la création des fichiers test.

Maintenant vous pouvez ouvrir le dossier  mon-projet-angular  depuis votre éditeur.

Avant de plonger dans les différents dossiers, vous allez exécuter une commande pour installer Bootstrap dans votre projet.  Depuis le dossier  mon-projet-angular , avec une ligne de commande, tapez :

npm install bootstrap@3.3.7 --save.

Cette commande téléchargera Bootstrap et l'intégrera dans le  package.json  du projet.  Il vous reste une dernière étape pour l'intégrer à votre projet.  Ouvrez le fichier  angular.json  du dossier source de votre projet.  Dans "architect/build/options", modifiez l'array  styles  comme suit :

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "styles.scss"
]

Maintenant vous pouvez lancer le serveur de développement local (il faudra le couper avec Ctrl-C et le relancer s'il tournait déjà pour que les changements prennent effet) :

ng serve

Une fois le projet compilé, ouvrez votre navigateur à  localhost:4200  et vous y verrez l'application telle qu'elle a été créée par le CLI, avec les styles Bootstrap appliqués.  Vous pouvez laisser tourner le serveur de développement en fond. À chaque fois que vous enregistrez des modifications au projet, le CLI met à jour le serveur : nul besoin de le redémarrer vous-même à chaque changement.

La structure des components d'une application Angular

Les components sont les composantes de base d'une application Angular : une application est une arborescence de plusieurs components.

Imaginez la page web suivante :

Exemple de page web

Tout d'abord, notre  AppComponent  est notre component principal : tous les autres components de notre application seront emboîtés ou "nested" dans celui-ci.

Pour cette structure, on peut imaginer un component pour la barre de menu, un autre pour la partie contenu et un dernier pour le menu à droite.  Il n'y a pas de règle d'or : je vous montrerai au cours des chapitres suivants comment réfléchir à votre structure afin de trouver la séparation des components la plus pertinente.

Découvrez la structure du code

Le CLI crée énormément de fichiers au moment de la création d'une nouvelle application.  Le dossier  e2e  est généré pour les tests end-to-end, un sujet que je n'aborderai pas dans ce cours mais pour lequel vous trouverez facilement des ressources en ligne.  Ensuite, le dossier  node_modules  contient toutes les dépendances pour votre application : les fichiers source Angular et TypeScript, par exemple.

Le dossier qui vous intéressera principalement est le dossier  src , où vous trouverez tous les fichiers sources pour votre application.

Pour commencer à comprendre la structure d'une application Angular, ouvrez  index.html  dans votre éditeur :

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MonProjetAngular</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>

 Comme vous pouvez le constater, au lieu d'y voir tout le contenu que nous voyons dans le navigateur, il n'y a que cette balise vide  <app-root>  : il s'agit d'une balise Angular. Pour en savoir plus, ouvrez le dossier  app  : 

Ce dossier contient le module principal de l'application et les trois fichiers du component principal  AppComponent  : son template en HTML, sa feuille de styles en SCSS, et son fichier TypeScript, qui contiendra sa logique.  

Ouvrez d'abord le fichier  app.component.html  :

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Ici, vous voyez le code HTML correspondant à ce que vous voyez dans votre navigateur.

Donc comment fait Angular pour injecter ce code dans la balise <app-root> ?

Regardez maintenant dans le fichier  app.component.ts  :

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
}

Ici, à l'intérieur du décorateur  @Component()  , vous trouvez un objet qui contient les éléments suivants :

  • selector  : il s'agit du nom qu'on utilisera comme balise HTML pour afficher ce component, comme vous l'avez vu avec  <app-root>  . Ce nom doit être unique et ne doit pas être un nom réservé HTML de type  <div>  ,  <body>  etc. On utilisera donc très souvent un préfixe comme  app  , par exemple ;

  • templateUrl  : le chemin vers le code HTML à injecter ;

  • styleUrls  : un array contenant un ou plusieurs chemins vers les feuilles de styles qui concernent ce component ;

Quand Angular rencontre la balise  <app-root>  dans le document HTML, il sait qu'il doit en remplacer le contenu par celui du template  app.component.html , en appliquant les styles  app.component.scss , le tout géré par la logique du fichier  app.component.ts . Nous verrons ces interactions plus en détail dans les chapitres suivants. Pour faire un premier test, je vous propose de modifier la variable  title  dans  app.component.ts , d'enregistrer le fichier, et de regarder le résultat dans votre navigateur.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my awesome app';
}

Créez un component

Vous allez maintenant créer un nouveau component à l'aide du CLI d'Angular.  Depuis le dossier principal de votre projet, tapez la commande suivante :

ng generate component mon-premier 

Comme vous le constaterez, le CLI a créé un nouveau sous-dossier  mon-premier  et y a créé un fichier template, une feuille de styles, un fichier component et un fichier spec : il s'agit d'un fichier de test que vous pouvez supprimer, car vous ne vous en servirez pas dans le cadre de ce cours.

Le CLI nous prévient également qu'il a mis à jour le fichier  app.module.ts  : ouvrez-le maintenant pour voir de quoi il s'agit :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MonPremierComponent } from './mon-premier/mon-premier.component';


@NgModule({
  declarations: [
    AppComponent,
    MonPremierComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Le CLI a ajouté  MonPremierComponent  à l'array  declarations  de votre module.  Il a également ajouté le statement import en haut du fichier.  Ce sont des étapes nécessaires pour que vous puissiez utiliser votre component au sein de votre application Angular.

Regardez maintenant le fichier  mon-premier.component.ts  :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-mon-premier',
  templateUrl: './mon-premier.component.html',
  styleUrls: ['./mon-premier.component.scss']
})
export class MonPremierComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Vous constaterez que le CLI a créé un sélecteur :  app-mon-premier . Nous pouvons donc utiliser ce sélecteur dans notre code pour y insérer ce component.

Revenez dans  app.component.html  et modifiez-le comme suit :

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<app-mon-premier></app-mon-premier>

Dans votre navigateur, vous verrez le même titre qu'avant et, sur une deuxième ligne, le texte "mon-premier works". Il s'agit du texte par défaut créé par le CLI que vous trouverez dans  mon-premier.component.html  : 

<p>
  mon-premier works!
</p>

Félicitations, vous avez créé votre premier component Angular !

Exemple de certificat de réussite
Exemple de certificat de réussite