Welcome

Angular-Tuto.com

Angular-Tuto.com

Comment Fonctionne Angular 7

Components dans Angular 7

Introduction

Angular se base essentiellement sur les composants ou bien en anglais “Components”.
Le but de ce tutorial est de savoir comment créer un component. Quels sont les propriétés utilisées pour définir un component ? Aussi on va détailler tout ça dans un exemple concret.

Comparaison Angular:Component Vs AngularJS:Directive

Angular component

Lorsque AngularJS apparu dans l’année 2009, il a apporté avec lui une notion très importante dans le monde de la programmation. C’est la notion des web components. L'intérêt des web components est l’encapsulation du métier et du html dans une seule entité.

  • Après avoir remarqué la puissance de cette encapsulation, Google a décidé de baser le nouveau framework (Angular2,4,7...) sur les components.
  • Finalement les components dans Angular sont des directives qui sont toujours associé à une template HTML spécifiée.
  • La connection entre le code et la template HTML dans les components du Angular permet de résoudre des problèmes et des notions très nécessaires dans AngularJS comme la notion du “$scope”
  • Les components dans Angular2 ont un cycle de vie qui peut être personnaliser. En fait les méthodes ngOnInit() et ngOnDestroy() peuvent être surchargées et ça permet de personnaliser très simplement le comportement des composants. Tout ça vous donne un contrôle total sur votre component. (J’adore ça) .

Une application Angular est basée sur les components. c’est une approche pas très récente mais efficace. On peut créer toute une application on se basant sur les components. Exemple le header et footer d’une page web peuvent êtres des components. Même le contenu peut être un ensemble des components.

Un point très important: les components peuvent êtres réutilisables. Ainsi on peut créer un component qui s’appelle adresse et à chaque fois on a besoin d’afficher l’adresse d’une personne dans notre application on peut invoquer le component adresse.

Créer son premier component

précédemment on a travaillé sur le component principal qui s’appelle Appcomponent. Généralement, on n’ajoute pas des components dans la page index.html mais on les attaches au composant principal “AppComponent”.

Parmi les règles à respecter (non obligatoire) c’est de créer un dossier pour chaque nouveau component.

  1. Dans le dossier app créer un dossier pour votre nouveau composant. Dans mon cas c’est le dossier “FirstComponent”. Parmi les bonnes pratiques, aussi, donner le nom du component au nouveau dossier créé.
  2. Ajouter deux fichiers (la définition et la template du component)
    - firstcomponent.component.ts: la définition du component
    - firstcomponent.component.html la template du component
    Angular component
  3. Le fichier firstcomponent.component.ts va contenir le code suivant: Angular component
    - Ligne 1: pour chaque component on a besoin d’importer la bibliothèque component qui permet au compilateur de comprendre l’annotation @component à la ligne 3.
    - @component({...}) est une annotation ou décoration de notre component qui permet d’apporter des informations sur le component exemple selector, templateUrl …
    - selector (ligne 4): permet de définir le nom de la balise ou élément html utilisé pour invoquer le component. c.a.d à partir d’un autre component, précisément, à partir de sa template html, on peut appeler notre module en utilisant la balise <app-first> </app-first> qui est le selector de notre component.
    - templateUrl: permet de définir le path du fichier html qui contient le html de notre component
    - Finalement, à la ligne 7 on créé la classe du component décorée par le mot clé “export” qui permet de rendre visible notre component au autres components et modules.
  4. Le fichier firstcomponent.component.html va contenir le html de notre composant. Angular component
  5. Enregistrer votre new component: Vous avez créé la définition et la template du component mais ça est insuffisant. il fallait informer Angular explicitement du nouveau .
    - Dans le module associé (dans notre cas c’est appModule.ts): il faut importer et préciser le path du component (ligne 5).
    - Ajouter le nom du component aux déclarations (ligne 11)
    Maintenant Angular connaît le component FirstComponent et connaît son path.
    Angular component
  6. Appeler le component: c'est la dernière étape. Elle consiste simplement à appeler la balise html <app-first> </app-first> dans l’emplacement qu’on souhaite. Dans mon cas, je vais l’ajouter dans la template du composant existant app.component.html
    Angular component
  7. Résultat
    Angular component

Appliquer des styles sur Angular component

Pour appliquer un style à un component il suffit de créer un fichier .css séparé qui contient les spécifications css nécessaires et attachez ce fichier au style du component.

  1. Créer le fichier style: Dans le répertoire du component, créer le fichier firstcomponent.component.css et ajoutez les styles souhaités.
    Angular component
  2. Maintenant, il faut informer le component qu’il doit pointer sur le nouveau fichier de style. Simple, dans la définition du component (le fichier firstcomponent.component.ts) ajoutez styleURLs
    Angular component
  3. Résultat
    Angular component
  4. vous pouvez le faire autrement sans créer des fichiers de style séparés. vous pouvez injecter tout le style directement dans la définition du component. Pour cela, au lieu d’utiliser “styleUrls” on utilise “styles” et ça donne le même résultat. Attention pour écrire sur plusieurs lignes il faut utiliser un back tick “`” au lieu d’une simple apostrophe “'”.
    Angular component

Différence entre ngOnInit() et Constructor

Cette question se pose toujours, Meme dans les entretiens techniques. En fait, il y a une grande resssemblance entre les deux mais aussi des différences.

- Le constructeur fait partie de ECMAScript. Par contre ngOnInit est une notion d'angular

- On peut appeler le constructeurs dans toutes les classes meme si on n'utilise pas Angular

- LifeCycle: On appelle le constructeur avant ngOnInt()

- Dans le constructeur on ne peut pas appeler des éléments HTML. Par contre dans ngOnInit() we can.

- Généralement, si on a besoin, on fait les appels des services dans la ngOnInit() etnon pas dans le constructeur

Les sources

Vous pouvez télécharger le contenu du code source à partir du lien suivant
Télécharger le dossier SRC

Le fichier telechargé est le dossier SRC (compressé) de notreapplication. Il suffit de remplacer le dossier "src" de votre projet par celui téléchargé.

Personnellement je vous conseille de suivre le tutoriel de l'article et d'ecrire le code mot à mot pour plus d'apprentissage.

Conclusion

Créer son premier component est très simple. En fait il est composé de deux parties: Template et définition. Le component doit etre déclaré et invoqué dansle module principal

Dans le prochain article on va apprendre comment créer des propriétés dans la définition et on les visualises dan la template. On appelle ça le DataBinding .

Le DataBinding est la caractéristique la plus importante de la technologie Angular qui permet d'assurer une fluidité et souplesse d'affichage ainsi qu'une experience utilisateur Á dévéloppeur magnéfique.

Finalement, n'hesiter pas à laisser vos questions et commentaires.


Commentaires (1)

Majda | 8/3/2019

MErci pour cet article. Depuis longtemps la programmation vise l'encapsulation: Classes, Objets, Components ....

Votre commentaire

  • Le Nom est obligatoire (entre 3 et 25 Lettres)
  • L'Email est obligatoire (Format valide)
  • Le Commentaire est obligatoire (entre 3 et 1000 Lettres)