|
Publié le par Chloé MAHALIN

Angular 4

Structure d'un composant Angular

Prérequis, set-up d'un projet Angular.

Vous avez initialisé votre projet Angular ? Nous allons voir ensemble à quoi ressemble un composant Angular simple.

Lorsque vous avez validé la création de votre projet Angular avec la commande 'ng new MyProjetName', un composant Root a été créé par défaut dans votre projet dans le dossier src/app/

src/app/
    |
    |____app.component.css
    |____app.component.html
    |____app.component.ts
    |____app.module.ts

C'est le composant de base de l'application. C'est dans ce composant que nous inclurons d'autres composants, qui communiqueront à travers un modèle et des services.

Le composant de base est à l'image de tout composant Angular. Il contient une vue html, un style css et une classe typescript pour le model. Pour rappel, les projets Angular reposent sur le pattern MVVM (Model - Vue - Vue - Model), mais Angular est codé en MVC (Modèle - Vue - Controller).

Créons un nouveau composant Login à notre application :

src/app/components/login
    |
    |____login.component.css
    |____login.component.html
    |____login.component.ts

Son objectif sera d'afficher deux champs texte pour rentrer un login et un mot de passe. Nous afficherons ce login et ce mot de passe dans une pop-up au moment de la validation.

Tout d'abord, dans la vue HTML, déclarons les champs textes :

login.composant.html

<div>
    Login : <input [ngModel]="login" type="text"/>
    Password : <input [ngModel]="password" type="text"/>
    <button (click)='onClick()' >Validate</button>
</div>

Dans le fichier de style CSS, on peut renseigner des styles qui ne seront appliqués qu'au composant Login.

login.composant.css

button {
    background-color: green;
}

Et terminons par la classe typescript qui permet de donner un peu d'intelligence à la vue :

login.composant.ts

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

@Component({
  selector: 'login-selector',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {

    login: string = '';
    password: string = '';

    onClick() {
        alert('Login is : ' + this.login + ' and password is : ' +this.password);
    }
}

La classe typescript déclare dans son annotation @Component qu'elle est un Composant Angular ainsi que les chemins vers les fichiers HTML et CSS qui lui sont propres (attribut templateUrl pour le HTML et styleUrls pour le css). On peut donc envisager de mutualiser des vues HTML ou des CSS entre plusieurs composants (ce que je ne recommande toutefois pas dans l'idéal).

Le selector, c'est la nouvelle balise que vous créez avec votre composant. Ici, j'ai déclaré une nouvelle balise </login-selector>. Angular va la référencer dans sa liste de composants et lorsqu'il la rencontrera lors de la phase de bubbling, concatènera le contenu de mon composant au sein de cette balise.

Ici, je rajoute mon composant login au composant racine de l'application :

app.component.html

<div>
    <login-selector></login-selector>
</div>

Attention, si vous souhaitez terminer ce tuto, il faut ajouter le nouveau composant au catalogue Composant d'Angular.

C'est le minimum à savoir sur l'architecture d'un composant !

NB : Parfois, certaines personnes aiment remplir le HTML directement dans le composant :

@Component({
    selector: "my-selector",
    template: `
    <div>
        <login-selector></login-selector>
    </div>
    `
})

Je ne saurai que trop vous le déconseiller. La séparation de la vue et du modèle permet d'une part, d'alléger la lisibilité d'une classe ts, et ensuite de bien séparer les préocuppations.