Programme

Introduction
01
Démarrer avec Angular-Cli
02
Services/Components
03
04 Le routage avec Angular

Le Data Binding Angular

05
La pagination
06 Les pipes
07 Les directives

​
 Introduction

Angular est un framework Javascript côté client qui permet de réaliser des
applications de type "Single PageApplication".
Il est basé sur le concept de l'architecture MVC (Model View Controller)
qui permet de séparer les données, les vues et les différentes actions
que l'on peut effectuer . il utilise le TypeScript .
Angular a été crée par Misko Hevery et Adam Abronsw en 2009.
 Single Page Application (SPA)

Une Single Page Application (SPA), en français une "application monopage",

est un type d'application web ou mobile qui fonctionne principalement sur une
seule page web. Contrairement aux applications traditionnelles qui
rechargent souvent l'ensemble de la page lorsqu'un utilisateur effectue une
action ou navigue vers une autre section, une SPA charge la page initiale
une seule fois, puis met à jour son contenu dynamiquement à mesure que
l'utilisateur interagir avec l'application.
 Qu’est-ce que le TypeScript ?

Type Script est un langage de script structuré et orienté objet qui permet de
simplifier le développement d’applications JavaScript.

C’est un sur-ensemble de JavaScript qui est justement transcompilé en

JavaScript pour être compréhensible par les navigateurs.
 Lien entre Node et Angular

Angular est un framework utilisant le langage typeScript, et à besoin

node pour convertir le TypeScript en javaScript compréhensible par le
navigateur.
 Architecture orientée REST
(Représentationnel State Transfer)

REST (Representational State Transfer) est un style d'architecture logicielle

utilisé pour concevoir des systèmes distribués, notamment sur le web. Il se
base sur des principes simples et utilise le protocole HTTP pour accéder et
manipuler des ressources. Les ressources sont identifiées par des URI (Uniform
Resource Identifiers) et sont représentées dans différents états. REST favorise
une interaction légère, sans état, et encourage l'utilisation de requêtes standard
telles que GET, POST, PUT et DELETE pour accéder et modifier ces
ressources. Il est largement utilisé pour la création d'API web et de services
web.
2 Démarrer avec Angular-
Cli

9
 L'outil Angular CLI

ANGULAR/ CLI “Command Line Interface” d’Angular est l’outil qui vous permet
d’exécuter des scripts pour la création, la structuration et la production d’une
application Angular.

Avant de pouvoir installer Angular Cli, il faut installer Node js(plateforme de

développementjavascript.)
[Link]

Passons maintenant à l'installation proprement dite du package NPM Angular CLI

• NPM est un package manager qui permet l’installation d’énormément d’outils et de
libraries dont vous aurez besoin pour tout type de développement.
 Installation de l'outil Angular Cli

Nous allons installer la dernière version qui est à ce jour la « 14 » en lançant votre console préférée et en
tapant ceci : npm install -g @angular/cli
[Link]
 Créez votre premier projet

Pour générer la structure d’un projet Angular, on utilise Angular CLI via sa commande ng suivie
des options new et le nom du projet.
ng new mon-premier-projet.
L'Angular CLI comprend un serveur, pour que vous puissiez créer et servir votre
application localement.
Accédez au dossier de l'espace de travail, tel que mon-premier-projet.
Exécutez la commande suivante :
cd mon-premier-projet.
ng serve --open.
 Créez votre premier projet

La commande ng serve compile le code source du projet pour transpiler le code

TypeScript en Java Script et en même temps démarre un serveur Web local basé sur
Node JS pour déployer l’application localement.

L' option –open (ou simplement -o) ouvre automatiquement votre navigateur sur
[Link]

Si votre installation et configuration ont réussi, vous devriez voir une page semblable
à la suivante.
Créez votre premier projet

14
 Découvrez la structure du code

le dossier node_modules contient toutes les dépendances pour

votre application : les fichiers source Angular et TypeScript, par
exemple.

Le dossier src où vous trouverez tous les fichiers sources pour votre
application.

[Link] : fichier déclarant les dépendances NPM tirées lors de

l'installation du projet et nécessaire à la compilation et les tests.
[Link] : fichier de présentation du projet utilisé notamment
sur Github .
 Découvrez la structure du code

editorconfig : ce fichier est issu du projet EditorConfig. Il a pour but de

maintenir une cohérence dans le code entre l'ensemble des éditeurs et
IDE du marché. Le fichier fonctionne nativement sur certains éditeurs
alors qu'un plugin sera nécessaire pour d'autres.

gitignore : fichier permettant de déclarer les fichiers qui ne doivent pas

être commités sur le repository Git.

[Link] : fichier de paramétrage du Test runner Karma.

Karma est un outil permettant de lancer des tests sur une série de
browser/device automatiquement. Il est déjà configuré pour être lancé sur
le navigateur Chrome avec le framework de test Jasmine.
 Découvrez la structure du code

src : à la racine du répertoire src, on retrouve les fichiers

classiques [Link],[Link], [Link], le fichier de configuration de
la compilation TypeScript [Link]…

src/app : on retrouve les sources de notre premier projet, dont notre

nouveau component :AppComponent.

src/assets : cet espace permet d'y placer tous les assets tels que les
images
 Découvrez la structure du code

src/environments : on retrouve les différents fichiers de configuration

spécifiques aux environnements d’exécution.
les fichiers contenus dans ce dossier permettent de définir les variables
spécifiques à chaque environnement d'exécution (prod, dev).

Par défaut, l'environnement de dev sera utilisé (fichier [Link]). Si

l'on souhaite utiliser le fichier de production, il est nécessaire d'ajouter le
paramètre -env=prod lors de l'appel de la commande ng build.
Exemple d’application Hello World

19
 Les propriétés templateUrl et styleUrls
templateURL
permet de définir dans à l’intérieur du décorateur le code HTML
représentant la vue du composant
permet d’associer un fichier externe HTML contenant la structure de la vue
du composant
Exemple:
pour modifier notre component en supprimant le
fichier [Link] et en modifiant le code comme ceci : template:
'<h1> Mon premier Component </h1> <p> en action </p>',
 Les propriétés templateUrl et styleUrls

Cela nous donne le résultat suivant :

21
 Les propriétés templateUrl et styleUrls

styleUrls
spécifier les feuilles de styles CSS associées à ce composant
Exemple:
nous pouvons supprimer le fichier [Link] et remplacer
stylesUrl par la propriété styles. Le fichier [Link] ne contenait
pas de styles, mais nous allons en profiter pour corriger cela avec un peu de
rouge :
styles: [
`
h1{
color:red
}`
]
 Les propriétés templateUrl et styleUrls

Cela va nous donner :

 Le Component Angular, c’est quoi en pratique ?

Un composant est une directive avec un modèle qui permet de construire des blocs
d’une interface utilisateur dans une application angular

Le component est issu de la mouvance « Web components » comme vous pouvez vous en
douter. Les Components reposent sur un certain nombre de règles :

Un component ne gère que sa vue et ses données. Il n’a pas à modifier les données ou le
DOM qui est en dehors de son scope.

Chaque component a son propre cycle de vie.

Les components communiquent entre eux via les évènements, il n'y a pas d'interactions
directes.
24
 Créez votre premier component

En pratique, un component va associer un fichier HTML, un fichier CSS et un fichier

TypeScript : c'est le cas de l'AppComponent généré par le CLI, par exemple. Vous
allez maintenant voir comment créer et utiliser votre premier component !
ng generate component mon-premier (ou bien ng g c mon-premier).

25
 Créez votre premier component

il a mis à jour le fichier [Link]

 Créez votre premier component

Dans notre exemple, nous allons créer deux composants : about et contacts
 Créez votre premier component
[Link]
Structure du composant import { Component, OnInit } from '@angular/core';
@Component({
about: selector: 'app-about',
templateUrl: './[Link]', styleUrls:
['./[Link]']
})

export class AboutComponent implements OnInit {

constructor() { } ngOnInit() {
}
}
[Link]
<p>
Welcome to app!!
</p>

[Link]
 Créez votre premier component

@Component

Un composant est une classe qui possède le décorateur @Component

Ce décorateur possède les propriétés suivantes :
selector : 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
selector : app-about
Dans ce cas le composant sera inséré par : <app-about></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>
 Imbrication de Components
Un composant peut être inséré dans n’importe que partie HTML de l’application en
utilisant son selecteur associé.
Dans cet exemple les deux composants générés sont insérés à l’intérieur du composant
racine AppComponent:

<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<app-about></app-about>
<div app-contacts></div>
</div>
 Le service
Les services sont des objets qui ne sont instanciés qu'une seule fois pendant la durée de vie
d'une application. L'objectif principal d'un service est de partager des données, des fonctions
avec différents composants d'une application Angular.

Pour créer un service taper la commande suivante :

ng g s nomService

31
 Imbrication de Components

AppModule
AppModule

AppComponent
AppComponent
AboutComponent ContactsComponent

About Contacts
Component Component
 Le Routage avec Angular
Angular a donc besoin d'un système de routage pour permettre la navigation à
travers
différentes pages de votre application.
Pour réaliser ce routage, Angular propose le module RouterModule
disponible dans la librairie @angular/router.

Dans le fichier [Link]:

Importer les modules Routes et RouterModule.

Configurer les Routes.
Appeler la méthode forRoot de RouterModule.
Le Routage avec Angular
 Le Routage avec Angular
Naviguez avec les routerLink:
L'élément routerLink permettra de créer le lien vers les pages souhaitées.

Naviguez avec le Router:

3 Le Data Binding
Angular

36
 Le Data Binding

Le Data Binding est un élément essentiel dans les frameworks de Single Page
Application. Il permet de synchroniser la vue au modèle JavaScript sous-jacent. Voici un
schéma général du fonctionnement du Data Binding :

37
 Le Data Binding

Angular a défini quatre sortes de Data Binding pour synchroniser le template et le

Component. Il est ainsi possible de propager une donnée du Component vers le DOM, du
DOM vers le Component et dans les deux sens. Ces formes de Data Binding sont
communément nommées:

38
 Le Data Binding

Interpolation : Ce mécanisme permet de modifier le DOM à partir du modèle, si un

changement est intervenu sur une valeur de ce dernier.
Property Binding : Ce mécanisme permet de valoriser une propriété d'un composant ou
d'une directive à partir du modèle, si un changement est intervenu sur une valeur de ce
dernier.
Event Binding : Ce mécanisme permet d'exécuter une fonction portée par un Component
suite à un évènement émis par un élément du DOM.

39
 Le Data Binding

Le "two-way" Data Binding : C'est une combinaison du Property Binding et du Event

Binding sous une unique annotation. Dans ce cas là, le component se charge d'impacter
le DOM en cas de changement du modèle ET le DOM avertit le Component d'un
changement via l'émission d'un évènement. Le mécanisme se rapproche du fameux
ngModel Angular 1, mais avec des algorithmes de Data Binding différents.

40
 L'interpolation

Nous allons enfin commencer à dynamiser nos applications grâce au Data Binding !
Commençons par créer un nouveau projet prj-data-binding à l'aide d'Angular-Cli :

41
 L'interpolation

et je vous propose de modifier notre AppComponent comme ceci :

42
 L'interpolation

Dans cet exemple, nous avons un template basique pour décrire l'identité d'une personne.
J'ai utilisé les {{ }} pour binder les propriétés du Component avec leur pendant dans le
template. Avec ce mécanisme, il est donc possible d'afficher une propriété de votre modèle
dans votre template en la nommant de la même façon. Comme nous avons le plaisir
d'utiliser TypeScript, j'en ai profité pour typer les propriétés du Component. Ainsi, person est
une string ; age est un number ; et address est un any. J'ai fait de l'interpolation !

43
 L'interpolation

Il est maintenant le temps de voir le résultat en lançant le serveur web (à l'aide de

ng serve ) si cela n'est pas encore fait, pour constater le résultat suivant :

Personne : John Doe | Age : 30 | Adresse : [object Object]

44
 L'interpolation

Les interpolations {{person}} et {{age}} ont bien fonctionné. person étant une string, aucune
transformation n'est à opérer pour remplacer {{person}} par "John Doe". age était un number
et a été transformé en string à l'aide du mécanisme de cast, et il s'affiche donc plutôt bien.
Par contre, notre adresse, étant un objet, a été castée en [object Object]. Pour afficher un
object, notre template doit explicitement inscrire {{[Link]}}, par exemple, pour afficher
la rue.
L'interpolation est donc une fonctionnalité bien utile pour afficher une donnée et la
synchroniser en permanence avec le modèle.

45
 [Le Property Binding]

Le property Binding est également un mécanisme de Data Binding "one way". Tout
comme l'interpolation, il permet de répercuter dans le DOM les valeurs des propriétés du
Component. L'annotation associée est […] mais pour les réfractaires, il est possible de
préfixer par bind- les propriétés.
Le Property Binding est utilisable :
Sur un élément du DOM. Par exemple <img [src] ="…" /> ou <img bind-src ="…" /> .
Sur un attribute directive. Par exemple <div [ngClass] ="…"> ou <div bind-
ngClass ="…"> .
Sur la propriété d'un component. Par exemple <page [color] ="…"> ou <page bind-
color ="…">

46
 [Le Property Binding]

Le Property Binding sur un élément du DOM

Si vous désirez valoriser de manière dynamique une propriété d'un élément HTML du DOM,
le Property Binding est l'homme de la situation. Imaginons que nous voulions aligner notre
fiche identité à droite de l'écran : il suffit, dans notre cas, d'ajouter l'attribut align à l'élément de
notre template <div> et le valoriser à right. Maintenant, pour une raison X, nous préférons
variabiliser l'alignement avec une propriété alignement de notre Component.

47
 [Le Property Binding]
Utiliser l'interpolation, à savoir, modifier notre div comme ceci :

48
 [Le Property Binding]
Utiliser le Property Binding, à savoir, modifier notre div comme cela :

49
 [Le Property Binding]

Alors pourquoi préférer le Property Binding à l'interpolation ? Il n'y a pas, techniquement,

de raison de choisir une manière plutôt qu'une autre. Dans le cas du Property Binding
sur un élément du DOM, la propriété alignement sera toujours une string, il ne peut pas y
avoir de problème de cast dû à l'interpolation. C'est donc plus une histoire de visibilité du
code. Je vous conseille toutefois d'établir des règles de codage afin d'harmoniser vos
templates.

50
 [Le Property Binding]

Le Property Binding sur un attribute directive fonctionne de la même manière. Pour rappel,
un attribute directive est une directive modifiant le comportement ou l'apparence d'un
élément.
Angular propose déjà une série d'attribute directives tels que ngClass ou ngStyle.
Imaginons que l'on veuille changer la couleur du texte de notre div à l'aide des styles CSS.
Angular propose d'utiliser la directive ngStyle afin d'appliquer dynamiquement un attribut de
style CSS sur l'élément courant. Pour réaliser cette prouesse, la directive ngStyle utilise le
Property Binding.

51
 [Le Property Binding]

Nous pouvons donc nous créer une propriété couleur dans notre component et appliquer
cette couleur en tant que style CSS :
Le Data Binding va remplacer la variable couleur dans le template par sa valeur 'red' définie
dans le Component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `

52
 [Le Property Binding]
<div [align]="alignement" [ngStyle]="{color:couleur}">Personne : {{person}} |
Age : {{age}} | Adresse : {{[Link]}}</div>

`
})
export class AppComponent {

person:string= 'John Doe';

53
 [Le Property Binding]
age:number= 30;

address:any= {street:'rue du Paradis', city:'75010 Paris'};

alignement:string = 'right';

couleur:string = 'red';

}
 [Le Property Binding]

Le Property Binding sur une propriété d'un component

Comme je n'ai pas de Component tout fait pour illustrer ce cas, nous allons nous faire
plaisir et créer quelques Components pour comprendre le Data Binding sur une
propriété d'un Component :

55
 [Le Property Binding]

Vous allez maintenant comprendre comment fonctionne le property binding Angular

grâce au décorateur @Input. Commençons par modifier le template de notre
Component AppComponent pour y placer notre component Comp1Component. Pour
illustrer notre property binding, je vous propose de passer la propriété address de notre
AppComponent à notre nouveau Component Comp1Component. Il s'agit d'un property
binding classique.

56
 [Le Property Binding]
import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<div [align]="alignement" [ngStyle]="{color:couleur}">Personne : {{person}} | Age : {{age}} | Adresse :
{{[Link]}}</div>
<app-comp1 [monAdresse]="address"></app-comp1>
`
})
export class AppComponent {

person: string= 'John Doe';

age: number= 30;

address: any= {street: 'rue du Paradis', city: '75010 Paris'};

alignement: string = 'right';

couleur: string = 'red';

}
 [Le Property Binding]

Dans ce Property Binding, nous retrouvons bien la propriété address à droite de l'égalité et
entre [ ] (à gauche donc) un nom de propriété ( comme finalement ngStyle, ngClass, …) qui
sera valorisé par le mécanisme de Property Binding. Notre Component Comp1Component
récupérera donc address au niveau de sa portée. C'est ici que le decorator @Input entre en
jeu. En le positionnant devant une variable, le mécanisme de Data Binding dans le sens
"extérieur vers intérieur" se met en place.
[Le Property Binding]
 [Le Property Binding]

Grâce au décorateur @Input, le template de Comp1Component affiche la propriété

[Link] sans problème.
 [Le Property Binding]

Avec le Property Binding, vous avez pu, à partir d'un component, binder une propriété
pour interagir avec un élément du DOM. Maintenant, vous allez voir comment, à partir
d'un évènement du DOM, interagir avec un Component.
Pour réaliser ce Data Binding, Angular utilise les évènements ; D'où le nom de Event
Binding. Avec ce mécanisme, vous pouvez être averti des évènements utilisateurs tels
que le click, la frappe sur le clavier, le touch, ….

61
 [Le Property Binding]

La syntaxe est proche du property binding : à gauche de l'égalité on retrouve

l'évènement que l'on veut émettre entre parenthèses ou précédé de on- et à droite, on
trouve la fonction que l'on appellera lorsque le Component interceptera l'évènement.
Par exemple, si vous désirez réagir à un click sur un bouton de notre
template AppComponent pour modifier le nom de la personne, il suffit de rajouter une
méthode modifierPersonne() qui modifiera la propriété person lorsque l'on clique sur le
bouton ( on aura donc une interaction dans le DOM qui modifiera le modèle) :

62
[Le Property Binding]

63
[Le Property Binding]
 (L’event Binding)

Si vous cliquez sur le bouton, l'adresse sera automatiquement modifiée dans notre
template en haut à droite de l'écran.
Vous pouvez aussi créer vos propres Event Binding très simplement afin d'envoyer un
évènement d'un Component vers un Component parent.
Pour illustrer cela, nous allons utiliser notre Component Comp2Component créé
précédemment. Ce Component sera chargé d'incrémenter ou de décrémenter une variable
à l'aide de deux boutons et envoyer le résultat via un évènement.
Le Component parent AppComponent s'occupera, lui, de récupérer cet évènement afin
d'afficher la valeur.
 (L’event Binding)

Voici pour commencer le source de Comp2Component :

(L’event Binding)
 (L’event Binding)

Si vous avez l'oeil, vous avez sans doute observé un nouveau decorator : @Output.
Ce décorateur se veut être le pendant du decorator @Input. Quand @Input se charge
de recevoir une valeur,@Output se charge, lui, d'envoyer une donnée. Ainsi,
counterChange est une instance de classe EventEmitter en charge d'envoyer un
évènement lors une pression sur un des boutons.

*EventEmitter est une classe utilisée dans une directive ou un component pour émettre
un évènement. Sa méthode principale est emit(value? : T) qui permet d'envoyer un
évènement contenant potentiellement un objet ou une valeur.
 (L’event Binding)

Il ne reste plus qu'à utiliser Comp2Component dans notre Component principal

AppComponent en déclarant notre Event Binding afin de récupérer la valeur émise par le
Component :
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div [align]="alignement" [ngStyle]="{color:couleur}">Personne : {{person}} | Age : {{age}} | Adresse : {{[Link]}}</div>
<app-comp1 [monAdresse]="address"></app-comp1>
<button (click)="modifierPersonne()">Modifier adresse</button>

<h1>Event binding - Compteur</h1>

<div><app-comp2 (counterChange)="myValueChange($event);"> </app-comp2></div><br/>
<div>Valeur récupérée : {{compteur}}</div>

`
})
 (L’event Binding)

export class AppComponent {

person: string= 'John Doe';
age: number= 30;
address: any= {street: 'rue du Paradis', city: '75010 Paris'};

alignement: string = 'right';

couleur: string = 'red';

compteur: any = 'N/A';

myValueChange (event) {
[Link] = [Link];
}
modifierPersonne () {

[Link] = 'Another man';

}

}
 (L’event Binding)

Comme par magie, la méthode myValueChange est appelée à chaque fois qu'un
évènementcounterChange est reçu. A noter la possibilité de passer $event en
paramètre pour récupérer le contenu de l'évènement.
 [(Le two-way Data Binding)]

Pour terminer cet article, je vais vous parler du two-way Data Binding. Ce mécanisme
permet, à partir d'une même notation, de modifier le modèle à partir du DOM et de
modifier le DOM à partir du modèle. Voici la syntaxe utilisée dans Angular pour déclarer
un tel Data Binding :
<ma-taille [(taille)] ></ma-taille>

72
 [(Le two-way Data Binding)]

Il faut se souvenir que les parenthèses sont entre les crochets. Pour se souvenir de
cela, cette notation se nomme "banana in a box"… Cette banane dans une boite
rappelle ce que nous avons pu voir avec le Property Binding et l'event binding.
Effectivement, ce que nous venons de voir aurait pu également s'écrire :

73
 [(Le two-way Data Binding)]

Nous pouvons dès lors en déduire que le code de notre component aura en @Input
nommé taille et un @output nommé tailleChange. Cela constitue donc la règle du Data
Binding 2-way : Si l'on considère la notation [(x)], x est la propriété à setter et xChange
est l'évènement lancé lors d'une modification de sa valeur. Cet évènement sera donc
intercepté par son component parent afin de récupérer cette valeur.

74
[(Le two-way Data Binding)]
 [(Le two-way Data Binding)]

Pour l'utiliser, il est nécessaire de déclarer, dans le component parent, une

propriété maTaille qui sera bindée, puis de l'utiliser comme ceci :
 [(Le two-way Data Binding)]

[(Le two-way Data Binding avec NgModel)]

NgModel est une directive qui permet de réaliser du data-binding sur les éléments de
formulaire de type Input et textarea. Cette directive fonctionne, dans la pratique, de la
même manière que la directive ngModel d'AngularJS. Voici la syntaxe de cette directive
:

<input [(ngModel)]="prenom">
 [(Le two-way Data Binding)]

Important : Pour utiliser cette directive, il est nécessaire de rajouter le module

FormModule à votre projet, mais rassurez-vous, Angular-Cli l'a déjà fait pour vous.
Comme vu précédemment, cela aurait pu également s'écrire :
 [(Le two-way Data Binding)]

Nous pouvons l'utiliser dans le templparente de AppComponent. Il va permettre de

modifier la propriété person et vous pourrez ainsi constater que l'affichage de la
personne (en haut à droite) sera également modifié.
 [(Le two-way Data Binding)]
import {Component} from '@angular/core';

@Component({
selector: 'app-root',
template: `
<div [align]="alignement" [ngStyle]="{color:couleur}">Personne : {{person}} | Age : {{age}} | Adresse : {{[Link]}}</div>
<app-comp1 [monAdresse]="address"></app-comp1>
<button (click)="modifierPersonne()">Modifier adresse</button>

<h1>Event binding - Compteur</h1>

<div><app-comp2 (counterChange)="myValueChange($event);"> </app-comp2></div><br/>
<div>Valeur récupérée : {{compteur}}</div>

<h1>Data binding 2-way</h1>

<div><input [(ngModel)]="person"/></div>

`
})
4 La Pagination

81
 La pagination

pagination : permet la d écoupage d’une liste en sous page pour devenir plus lisible

ngx pagination offre la solution la plus simple mais la plus puissante pour créer une
pagination dans Angular.
La pagination, également connue sous le nom de pagination, est le processus de division
d'un document en pages discrètes, soit des pages électroniques, soit des pages imprimées.

82
 La pagination

Install ngx pagination :

[Link]
npm i ngx-pagination
Configuration du fichier [Link]:
 La pagination

Initialisation de page :

Configuration du fichier .html :

5 Les pipes

85
 Les pipes

Les pipes sont des filtres utilisable directement depuis la vue afin de transformer les valeurs
lors du Binding.
Angular Pipes permet à ses utilisateurs de modifier le format dans lequel les données sont
affichées à l'écran.

86
 Les pipes

Création de pipe ??
Exemple:
ng g p pipes/recherche
Une fois la commande est exécuté, deux fichiers sont créés:

87
 Les pipes
Exemple:
Le fichier [Link] contient le code suivant.

88
 Les pipes

Exemple:
Comme vous pouvez le voir, l'interface PipeTransform et la méthode de transformation ont
été créées. Nous l'avons mis en évidence pour une meilleure compréhension.
À des fins de démonstration, nous avons créé un pipe de filtrage par référence:

89
 Les pipes
Exemple:
1. Modifier le fichier [Link]:

90
 Les pipes
Exemple:
2. Modifier le fichier [Link] (on déclarant un variable search_name:any)

3. Modifier le fichier [Link] (on ajoutant une zone de recherche)

91
 Les pipes
Exemple:
1. Modifier le fichier [Link]:
Faire l’appel à notre pipe :

92
6 Les directives

93
Les directives sont des classes qui ajoutent un nouveau
comportement ou modifient le comportement existant des
éléments du modèle.

Fondamentalement, les directives sont utilisées pour manipuler le

DOM, par exemple ajouter/supprimer l'élément du DOM ou
modifier l'apparence des éléments du DOM.

94
Il existe deux sortes de directives :
Les directives structurelles : Elles ont pour but de modifier le
DOM en ajoutant, enlevant ou replaçant un élément du DOM.
Les attribute directives : Elles ont pour but de modifier
l'apparence ou le comportement d'un élément.

95
 Les directives structurelles

Je ne vais pas lister toutes les directives structurelles proposées par Angular mais nous
allons quand même en étudier une pour l'exemple : ngIf ,ngFor.
ngIf permet de supprimer ou de recréer l'élément courant suivant l'expression passée en
paramètre.
Syntaxe:*ngIf="condition"
 Les directives structurelles

Exemple:
Si l'expression assignée au ngIf est évaluée à false alors l'élément sera supprimé du
DOM, puis l'élément sera recréé si l'expression est évaluée à true. Voici un exemple
de template utilisant cette directive :
<div *ngIf="1 > 0"> Afficher la div</div>
Afficher la div sera bien affiché puisque l'expression 1 > 0 vaut bien true. Je
vous propose maintenant d'inverser le sens de l'expresssion de sorte que 1
< 0. Dans ce cas, notre div disparait totalement du DOM.

97
 Les directives structurelles

Vous vous posez sans doute la question du symbole astérisque (*) devant notre
directive.
Les directives structurelles telles que *ngIf, *ngFor et *ngSwitchCase sont toutes
encadrées par un component <ng-template> qui se veut très proche de la balise HTML
5 <template> Dans la version 2 d'Angular, <ng-template> se nommait <template>, ce
qui pouvait être ambiguë. L'astérisque (*) permet de lire et d'écrire plus facilement des
directives qui ont vocation à changer la mise en page HTML.
 Les directives structurelles

Prenons l'exemple de notre directive ngIf : lorsque Angular va détecter (*) devant *ngIf,
il va opérer différentes transformations pour arriver au résultat suivant :
<template [ngIf]="1 > 0">
<div> Afficher la div</div>
</template>
Notre directive ngIf sera donc maintenant un template HTML 5 et pourra interpréter
l'expression passée en paramètre grâce au Property Binding (usage des [ ]).
 Les attributes directives

Une bonne candidate pour comprendre les attribute directives est la directive ngStyle. Cet
attribute directive se charge de modifier l'apparence de l'élément porteur. Lorsque l'on utilise
cette directive, il est nécessaire de la placer entre crochets comme ceci : [ngStyle] . Ce n'est
pas forcément le cas de toutes les d'attribute directives. ngStyle attend une valeur en
paramètre, elle utilise ce que l'on appelle le Property Binding que nous reverrons plus tard.
Voici un exemple de template utilisant cette directive :
<div [ngStyle]="{color:'red'}">Learn Angular</div>
Dans ce cas, il n'y a pas de modification de structure. La directive transforme juste notre
[ngStyle]="{color:'red'}" en style="color: red;".
Les attributes directives

101
 Construire ses directives

Je vous propose maintenant de créer notre propre directive pour bien en comprendre
le fonctionnement. Voici notre cahier des charges :
Réaliser une directive qui permet de modifier la couleur lorsque le pointeur de la souris
passe dessus.
Commençons par créer notre directive à l'aide d'Angular-CLI à l'aide de la commande :
ng generate directive nomdirective

102
 Création de notre Directive
Cela nous donne le code suivant pour notre directive:
 Création de notre Directive

Pourquoi Angular-CLI ajoute des [ … ] à notre sélecteur ? Angular utilise les sélecteurs
CSS pour identifier l'élément HTML dans un template. Grâce à cette annotaion,
Angular sera capable de localiser tous les éléments qui possèdent l'attribut nommé
appHighLight.

La première étape consite à appliquer la couleur par défaut lorsque l'on applique cette
directive. Comme nous sommes dans une classe, nous pouvons utiliser le constructeur
comme ceci :
Création de notre Directive

105
 Création de notre Directive

ElementRef est injecté dans le constructeur par Angular afin de récupérer l'élement du
DOM dans notre classe. Grace à cette injection, il est possible de modifier le style de
l'élement grace àRenderer2. Vous pouvez tester votre directive dans le template d'un de
vos Components comme ceci :
<div appHighlight>Texte en hightlight</div>
 Ajouter du component grâce aux
events JavaScript

Notre directive doit réagir à deux évènements :

Lorsque le pointeur de la souris est sur l'élément : la couleur du texte doit passer à une
couleur paramétrable.

Lorsque le pointeur de la souris quitte l'élément : la couleur du texte doit redevenir rouge.
Angular propose le décorateur @HostListener pour positionner des Listners sur l'élément. Il
prend en paramètre l'évènement que l'on veut écouter.
 Ajouter du component grâce aux
events JavaScript

Notre classe devient alors :

 Ajouter du component grâce aux
events JavaScript
A l'exécution, si l'on ouvre la fenêtre de debug JavaScript, on remarque que notre div
réagit bien aux évènements mouse enter et mouse leave.
 Ajouter du component grâce aux
events JavaScript
Il ne nous reste plus qu'à définir la couleur paramétrable grâce à un autre décorateur
Angular : le décorateur @Input . Ce décorateur permet de lier le paramètre passé à une
propriété de la classe de la Directive. Il est possible de passer en paramètre un alias
dans le cas où la propriété de la classe n'a pas le même que l'attribut de la Directive.
 Ajouter du component grâce aux
events JavaScript

Voici notre Directive finale :

 Ajouter du component grâce aux
events JavaScript

Grâce à ce code, il est possible d'utiliser notre Directive comme ceci :

<div [appHighlight]="'yellow'">Texte en highlight</div>
 Ajouter du component grâce aux
events JavaScript

La classe a été un peu remaniée pour coller au besoin :

Le constructeur a été modifié pour permettre d'utiliser ses paramètres dans toute la
classe. Le fait de mettre la portée devant les paramètres et un accélérateur de
développement qui permet de faire l'équivalent d'un this._el = _el . C'est une spécificité
TypeScript, et c'est bien pratique quand même.
Le @Input a été ajouté. Il permet de récupérer notre couleur passée en paramètre de
notre directive.
Nos @HostListener ont été modifiés pour permettre le changement de couleur comme
c'était le cas avec notre constructeur.
 Lazy-loading

Le "chargement paresseux" est une technique courante

utilisée dans les applications Angular pour améliorer les

performances en ne chargeant que les modules et les

composants nécessaires à un moment donné, au lieu de tout

charger au démarrage de l'application. Cela permet

d'accélérer le chargement initial de l'application et de réduire

la quantité de code transférée au client.

 Lazy-loading

Créer un module de fonctionnalités avec routage :

ng generate module home --route home

--module [Link]
 La bibliothèque RxJS

Le "chargement paresseux" est une technique

courante utilisée dans les applications Angular

pour améliorer les performances en ne chargeant

que les modules et les composants nécessaires

à un moment donné, au lieu de tout charger au

démarrage de l'application. Cela permet

d'accélérer le chargement initial de l'application et

de réduire la quantité de code transférée au

client.