Informatique
Publié le 05/25/2017, rédigé par Chloé MAHALIN

Angular 4

Structure d'un composant Angular

Prérequis
- [set-up d'un projet Angular](/university/devops/nodejs_npm/initiate_a_project_with_angular_cli).

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'

C'est le composant de base de l'application. C'est dans ce composant que nous inclurons d'autres composants

Le composant de base est à l'image de tout composant Angular. Il contient une vue html

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

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

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

Ici

app.component.html

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

Attention

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

NB : Parfois

@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

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité