Fondamentaux d'Angular

Les composants

Un composant correspond à une classe exposant une vue et définissant la manière dont l’utilisateur interagit avec cette vue. Il s’agit de l’élément de base d’une application Angular, une application étant elle-même un composant.

Un composant peut être lui-même composé d’un ou de plusieurs composants, une application correspondant donc à un assemblage de ces éléments. L’idée est qu’un composant doit être indépendant pour être réutilisable, peu importe les composants le référençant.

Le schéma précédent illustre le principe de composabilité apporté par les composants d’Angular. Un composant racine, appelé ComposantRacine, définit la base de l’application. Ce composant s’appuie sur les composants nommés ComposantEnfant1 et ComposantEnfant2. Ce dernier composant est lui-même composé de plusieurs autres composants.

Comme dit précédemment, un composant Angular correspond à une classe TypeScript. Cette classe peut déclarer des propriétés et des méthodes qui seront exposées en tant que modèle du composant et donc accessibles depuis la vue.

export class TodolistComponent { 
} 

La classe TypeScript précédente représente un composant.

Pour indiquer à Angular que cette classe doit être considérée comme un composant, il faut lui ajouter un décorateur.

Le décorateur @Component permet...

Les templates

Un template est du HTML représentant une vue. Cette vue décrit à Angular comment doit être rendu le composant auquel il est associé.

L’association entre un composant et un template se fait via les propriétés template ou templateUrl du décorateur @Component. Ils permettent respectivement de déclarer un template directement dans l’attribut ou de définir une URL vers un fichier correspondant au template.

import { Component } from '@angular/core'; 
 
@Component({ 
 selector: ‘app-todolist', 
template: ‘<h1>Ma Todo List</h1>' 
}); 
export class TodolistComponent { 
   [...] 
} 

Le template est ici défini directement dans le décorateur @Component.

Si le template est trop grand, il est préférable de l’externaliser dans un fichier séparé et de le référencer via la propriété templateUrl.

import { Component } from '@angular/core'; 
 
@Component({ 
 selector: ‘app-todolist', 
 templateUrl: './todo-list.component.html', 
}); 
export class TodoListComponent { 
   [...] 
} 

Le template est ici défini via la propriété templateUrl.

<h1>Ma Todo List</h1> 

Le code précédent correspond au fichier todo-list.component.html.

Les pipes

Dans une application Angular, il n’est pas rare d’effectuer une transformation sur un élément avant de l’afficher. L’exemple le plus simple est celui d’une date. Lorsqu’une date est affichée, c’est rarement sous le format traditionnel JavaScript. En effet, une date JavaScript s’affiche au format suivant : Sun Jul 10 2016 17:03:07 GMT+0200 (Paris, Madrid (heure d’été)) alors qu’un utilisateur a plutôt l’habitude de la lire sous un format plus accessible, comme 10/06/2017. Le pipe est l’élément qui va permettre de gérer ces transformations.

import { Component } from '@angular/core'; 
 
@Component({ 
  selector: 'today', 
  template: `<p>Nous sommes le {{today | date}}</p>` 
}) 
export class TodayComponent { 
  today = new Date(); 
} 

Les modules

Un module permet d’organiser une application en blocs fonctionnels ou techniques. Il est également le point d’entrée d’une application Angular.

De la même manière qu’un composant, un module se déclare via une classe TypeScript et doit être décoré par l’attribut @NgModule :

@NgModule({ 
  imports: [BrowserModule], 
  declarations: [AppComponent], 
  bootstrap: [AppComponent], 
}) 
export class AppModule { } 

Cet attribut possède notamment les propriétés suivantes :

Un exemple de module que l’on rencontre couramment correspond au module de routing. Il permet d’isoler le module applicatif, contenant tout le fonctionnement métier, de la déclaration des routes qui risquerait de polluer le code.

const routes: Routes = [ 
{ path: '', redirectTo: '/list', pathMatch: 'full' }, 
{ path: 'list', component: ListComponent }, 
{ path: 'detail/:id', component: DetailComponent } 
]; 
 
@NgModule({ 
imports: [ RouterModule.forRoot(routes) ], 
exports: [ RouterModule ] 
}) 
export class AppRoutingModule {}...

Observable et promise

JavaScript est un langage par nature fortement asynchrone. L’aspect asynchrone est géré historiquement via le mécanisme de callback.

myAsynchronousMethod(function(data) { 
    console.log(data) 
}); 

Les callbacks, bien que fonctionnels, présentent beaucoup de limitations : gestion des erreurs, chaînage d’appels asynchrones, etc.

Pour cela, ES6 (EcmaScript 6) propose une spécification : les Promises. Une promise est une "promesse" permettant d’exécuter du code seulement lorsque l’action asynchrone est terminée.

Les promises possèdent trois états : pending lorsque l’action asynchrone est en cours, fulfilled lorsque l’action a été réalisée avec succès et rejected lorsque l’action a généré une erreur.

myAsynchronousMethod.then(function(data) { 
    console.log(data); 
}, function(error) { 
    console.error(error); 
}); 

La méthode précédente est asynchrone et expose une promise. Les paramètres passés en argument correspondant au callback de succès et d’erreur. 

Angular utilise également la notion d’observable, introduite par la librairie RxJS. À la différence d’une promise, un observable peut être résolu plusieurs fois afin de renvoyer plusieurs valeurs. Les observables possèdent également un ensemble de méthodes permettant d’y effectuer des opérations.

myAsynchronousMethod.subscribe(function(data) { 
    console.log(data); 
}...