Introduction au component Angular
Introduction au component Angular
-
Objectifs
- Connaitre le component Angular
-
Présentation
- Angular est une plate-forme et un framework pour la construction d’applications clientes d’une seule page en HTML et TypeScript. Angular est écrit en TypeScript. Il implémente les fonctionnalités de base et facultatives sous la forme d’un ensemble de bibliothèques TypeScript que vous importez dans vos applications.
-
Définition
- Un composant est la brique principale dans la construction d’une application. Toutes les zones d’une application sont produites par des composants
- Un
composant(component) Angular représente un bout d’interface de l’application. C’est à vous de décider ce que vous mettez dans un composant ; ça peut aller d’un simple bouton à un écran entier. - Pour créer l’interface de votre application, l’utilisation des composants est indispensable, c’est-à-dire pour tout ce qui est affiché aux utilisateurs. Chaque écran spécifique de votre application se compose de plusieurs composants imbriqués les uns dans les autres
- On part toujours d’un composant racine, qui représente l’ensemble de l’application. Il contient des sous-composants, qui représentent par exemple des zones de l’écran comme l’en-tête, le contenu et le pied de page. À leur tour, ces sous-composants peuvent contenir des sous-sous-composants, et ainsi de suite. Cette imbrication de composants s’appelle l’arbre des composants.
- Le composant racine s’appelle
Root Component -
Composition
- Un "component" Angular contient:
- Un template contenant l’interface utilisateur en HTML. Nous utiliserons le databinding afin de rendre la vue dynamique ;
- Une Classe (class) contenant le code associé à la vue, des propriétés et méthodes logiques qui seront utilisées dans la vue ;
- Des metadata nous permettant de définir la classe comme étant un composant Angular (component).
- Voici à quoi ressemble un composant Angular :
- Le décorateur
@Componenta un paramètre JSON qui doit contenir au moins les 3 premiers tags : selector, styleUrls et templateUrl. -
Le sélecteur
- Le sélecteur (qui peut être n’importe quel sélecteur comme les sélecteurs CSS) défini le tag HTML qui agit sur la page web qui le référence.
- Il indique la déclaration qui permet d’insérer le composant dans le document HTML. Cette déclaration peut être :
- Le nom de la balise associé à ce composant (pour plus d’information lire l’exemple ici) l’exemple sera le composant crée "about"
- selector : app-about
- Dans ce cas le composant sera inséré par :
<app-about> - Le nom de l’attribut associé à ce composant :
- selector : [app-about]
- Dans ce cas le composant sera inséré par :
<div app-about></div> - Le nom de la classe associé à ce composant :
- selector : .app-about
- Dans ce cas le composant sera inséré par :
<div class="app-about"></div> -
template ou templateUrl
- template : permet de définir dans à l’intérieur du décorateur le code HTML représentant la vue du composant
- templateUrl : permet d’associer un fichier externe HTML contenant la structure de la vue du composant
-
styleUrls
- styleUrls : spécifier les feuilles de styles CSS associées à ce composant
Un composant est une directive avec un modèle qui permet de construire des blocs d’une interface utilisateur dans une application angulaire. Les composants auront toujours un modèle, un sélecteur et peuvent ou non avoir un style distinct. Les composants sont déclarés à l’aide de
@Component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'exemple';
}