Angular/Tutorials/OpenClassRooms C Structurez avec les components : Différence entre versions

De WikiSys
Aller à : navigation, rechercher
(Créez un component)
(Découvrez la structure du code)
 
Ligne 128 : Ligne 128 :
 
Ici, à l'intérieur du décorateur  '''@Component()'''  , vous trouvez un objet qui contient les éléments suivants :
 
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>'''.  
+
*    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  '''<nowiki><div></nowiki>''',  '''<nowiki><body></nowiki>'''  etc.  
 
** Ce nom doit être unique et ne doit pas être un nom réservé HTML de type  '''<nowiki><div></nowiki>''',  '''<nowiki><body></nowiki>'''  etc.  
 
** On utilisera donc très souvent un préfixe comme  '''app''', par exemple ;
 
** On utilisera donc très souvent un préfixe comme  '''app''', par exemple ;

Version actuelle en date du 20 juillet 2019 à 17:53

Structurez avec les components

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.

Les unit tests sortent du périmètre de ce cours (on pourrait en faire un cours entier !), mais il y a énormément de ressources en ligne vous permettant de comprendre le concept du unit testing si vous souhaitez en apprendre plus.

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 :

angular.json
"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 :

src/index.html
<!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  :

structure des directories

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  :

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  :

app.component.ts
import { Component } from '@angular/core';

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

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.

app.component.ts
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 
CREATE src/app/mon-premier/mon-premier.component.scss (0 bytes)
CREATE src/app/mon-premier/mon-premier.component.html (30 bytes)
CREATE src/app/mon-premier/mon-premier.component.ts (289 bytes)
UPDATE src/app/app.module.ts (414 bytes)

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 :

app.module.ts
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  :

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  :

mon-premier.component.html :
 <p>
  mon-premier works!
</p>

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

 git commit -m "app.component.html vidé et modifié : mon-premier works! II"