ANGULAR

Initiation
Introduction
Sommaire

 Introduction
 Prérequis JavaScript ES6
 Pourquoi TypeScript?
 Les bases du framework
 Composants
 Directives
 Pipes
 Services
 Routeur
 Modules
 RxJS
 Formulaires
Introduction

Angular est un framework permettant d’implémenter des applications

Javascript front-end exécutées coté client sous forme de Single Page
Application (i.e. application web monopage). Le langage utilisé pour
implémenter des applications Angular est Typescript. Initialement, la
première version d’Angular était implémentée en Javascript

 Angular vs. AngularJS

• AngularJs ou encore Angular v1 est la toute première version d’Angular
écrite en JavaScript
• Angular ou encore Angular 2… 13 est la réecriture complete par
l’équipe de google en TypeScript.
Un Framework est un ensemble d’outils devant nous
permettre de réaliser une application.
Introduction (suite)
• Angular ne reprend pas le code source de base d’AngularJS, mais reprend quelques concepts.
• Google cherche à faire table rase du passé, en remettant à plat de nombreux concepts présents dans AngularJS.
• Cette stratégie a été motivée par 4 principes fondateurs :
• Augmenter les performances
• Angular se repose davantage sur les briques natives du navigateur (ex: WebComponents)
• Améliorer la productivité
• en se basant sur le langage Typescript (Plus strict et sécurisé que Javascript): Nous verrons quelques
particularités de ce langage par la suite.
• S’adapter au mobile
• La conception modulaire du framework permet de réduire l’empreinte mémoire sur les terminaux mobiles
• Embrasser les nouveaux standards du Web…
• en se basant sur des technologies et nouveautés apportées par ECMAScript 6.
Introduction(suite)

 Single Page Application (SPA)

• Les applications SPA permettent d’améliorer l’expérience utilisateur lorsqu’elles sont exécutées sur un browser
puisqu’elles évitent de devoir recharger toute la page entre différentes actions.

La valeur 'app-exemple' du paramètre selector indique que le

composant Exemple sera affiché si le template d’un autre
composant contient:
<app-exemple></app-exemple>
Introduction(suite)

 Typescript vs. JavaScript

• Le code JavaScript est du code typescript valide,
• Le code typescript ne dure que le temps de la programmation,
• Le code typescript est ensuite transpilé en Javascript,
• Le code typescript apporte un typage fort au code JavaScript.
Introduction (fin)

Angular est un framework utilisant de nombreux projets comme par

exemple: Typescript, Node.js, RxJS, jQuery, Karma, Jasmine, Protractor,
Babel etc…
Parmi ces projets, on peut trouver Webpack qui est une des
dépendances les plus importantes
 Webpack
• Permet de générer un bundle à partir du code source.
• Permet le chargement de module en mode lazy-loading.
ES6
Prérequis JavaScript ES6

 Découvrir ES6

• Le langage JavaScript a été créé par Brendan Eich en 1985.

• L’ES6 a apporté plusieurs nouveautés au langage JavaScript a l’instar mais nous ne les verrons pas tous. Les nouveautés que
nous aborderons ici sont :
• Classes
• Fonctions fléchées

 Comprendre les classes

• La notion de classe fait référence a la notion de POO permettant de modéliser un sujet (personne, véhicule …) sous forme d’objet.
• Objet : entité contenant les informations d’un sujet.
Prérequis JavaScript ES6(suite)

• Syntaxe de création d’une classe en ES6

• Instanciation d’une classe (Création d’un objet)

Prérequis JavaScript ES6(fin)

• Utilisation des fonctions fléchées (Arrow function)

TypeScript
Pourquoi TypeScript ?
 Qu’est-ce que TypeScript

 C’est un langage développé par Microsoft en 2012, il a été intégré dans la version 2 de Angular et a pour but de typer
le JavaScript.

 code JavaScript valide = code TypeScript valide

 Principe d’utilisation :

• Ecrire du code en TypeScript ( mon_code.ts)

• Le compiler (transpiler) en JavaScript tsc mon_code.ts produit mon code.js

 Comprendre son utilité:

 Typage fort ⇒ facilite le débogage

 Notions d’orientés objet : interfaces, etc.

 Erreurs a la compilation
Pourquoi TypeScript ? (suite)

 Utilisation

 Les variables
Pourquoi TypeScript ? (suite)

 Les tableaux
Pourquoi TypeScript ? (suite)

 Les énumérations
Pourquoi TypeScript ? (suite)

 Les fonctions
Pourquoi TypeScript ? (fin)

 Les interfaces et les classes

Les bases du Frameworks
Démarrer avec Angular
 Installation des outils nécessaires

• Node.js sera notre plateforme de développement javascript. Pas le choix, sans Node.js ça ne marchera
pas. (https://nodejs.org/fr/ )

• Visual studio Code sera notre éditeur de code. (https://code.visualstudio.com/)

• Angular CLI sera notre homme à tout faire. (npm install -g @angular/cli) source : https://angular.io/cli

 Création d’un nouveau projet

• ng new <nom application> --style scss --routing

 Exécuter un projet Angular

• npm start
Architecture Angular

Module App

Pipes

Composants Services Directives

C1
S1
C2 C3 C4
S2
C5 C6
S3
Vue d’ensemble de l’architecture
Structure d’un projet
Dépendances externes du projets (Bootstrap …)

Logique applicative du projet: Composant, services et autres,

Code source du projet

Fichiers de configuration du projet

Composants
C’est quoi un composant ?
Le composant c’est l ’élément de base d’une application Angular, en d’autres termes c’est la brique
de la construction d’une application Angular.

Il se compose généralement comme suit :

 La vue appelée template : c’est la partie HTML du composant,

 La classe : c’est la classe Typescript comportant la logique de notre a composant,

 Le CSS ou La feuille de style : Elle permet de styliser notre composant,

 Le fichier spec.ts : Pour les tests unitaires,

 Des métadonnées : ce sont des informations supplémentaires qui permettront à Angular de faire la
liaison entre le template et la classe.
Fonctionnement d’un composant
Une vue Angular est composée d’éléments HTML avec une hiérarchie comme une page HTML classique.
Angular s’interface avec le DOM correspondant à ces éléments de façon à en modifier les caractéristiques
de façon dynamique.

Création d’un composant : Dans un second temps, le composant sera rajouté dans le root
Module de l’application dans app.module.ts
 ng g component exemple ou ng g c exemple

Dans un premier temps, 4 fichiers sont créés,

Affichage d’un composant avec le selector
L’ajout du composant au module de l’application permet à Angular de configurer la factory de composants
de façon à instancier le composant dans le cas où il faudrait l’afficher.

○ Toutefois à ce stade, il manque un élément important: il n’y a pas d’éléments dans le code permettant d’indiquer où
la vue du composant sera affichée.

○ On peut le faire en utilisant le paramètre selector contenu dans les métadonnées du composant.

La valeur 'app-exemple' du paramètre selector indique que le composant Exemple sera

affiché si le template d’un autre composant contient:
<app-exemple></app-exemple>
Lien entre le template et la classe du composant
Pour rendre dynamique l’affichage de la vue d’un composant, Angular permet d’implémenter des interactions entre un
template et la classe d’un composant. Ces interactions se font par l’intermédiaire de bindings.

Pour les plus utilisés voir le schéma suivant:

• Property binding permettant d’échanger des données de la classe du composant vers le template. Ce
type de binding permet de modifier une propriété d’un objet dans le DOM à partir d’un membre de la
classe du composant.

• Event binding pour exécuter du code dans la classe du composant à partir d’évènements déclenchés
dans le template.

Mais il existe aussi d’autres types de bindings qui sont :

Lien entre le template et la classe du composant
(Interpolation)
Le binding le plus simple est l’interpolation. Il permet d’exécuter directement une expression Typescript contenant des
membres ou des fonctions publiques dans la classe du composant, par exemple:

 Template

 Class du composant
Lien entre le template et la classe du composant
(Property binding)
Ce type de binding permet de mettre à jour le contenu d’une propriété DOM d’un élément affiché avec la valeur d’un membre
dans la classe du composant, par exemple:

 Template

 Class du composant
Lien entre le template et la classe du composant
(Event binding)
Ce binding déclenche l’exécution d’une fonction dans le classe du composant à partir du déclenchement d’un évènement dans
un objet du DOM, par exemple:

 Template

 Class du composant
Composants enfants

Une fonctionnalité importante des composants est qu’ils peuvent contenir d’autres composants. Ainsi, pour imbriquer un
composant dans un autre:

 D’abord il faut que le composant enfant soit déclaré dans le module du composant parent pour que la résolution réussisse.

 Ensuite le template du composant parent doit contenirle contenu du paramètre selector du composant enfant:

Composant enfant
Composants enfants (Content projection)
La fonctionnalité content projection permet de projeter un contenu à partir du composant parent dans un composant enfant.

 Si 'app-fils' est le selector du composant enfant, pour qu’un contenu soit projeté à partir du composant parent, la syntaxe dans
le template doit être:

 L’emplacement du contenu à projeter doit être indiqué dans le composant enfant avec <ng-content></ng-content> voir l’exemple
ci-dessous :
Composant enfant<ng-content select="p"></ng-content>
 Composant enfant
<ng-content></ng-content>

<app-fils>
<p>Mon titre avec ng-content <strong>contenant select</strong></p>
 Composant parent <p>Mon titre avec ng-content <strong>sans select</strong></p>
</app-fils>
Composants enfants (Paramètre d’entrée)
Le composant parent peut injecter un paramètre dans le composant enfant en utilisant un property binding. Ainsi le
composant enfant doit déclarer les propriétés exposées en tant que paramètre d’entrée avec le décorateur @Input(),
par exemple:
export class FilsComponent implements OnInit { Dans cet exemple, le paramètre d’entrée est identifiant. Le
@Input() identifiant!: number; composant parent peut effectuer un property binding
constructor() { }
ngOnInit(): void {
}
}

 Template
Composant enfant
<h1>Composant parent</h1>
<app-fils [identifiant]=‘filsIdentifiant'></app-fils>

export class ParentComponent implements OnInit {

 Classe du composant filsIdentifiant = 1;
constructor() { }
ngOnInit(): void { }
}
Composants enfants (Evènement de sortie)
Le composant enfant peut déclencher un évènement qui exécutera une fonction dans le composant parent par event binding.
La déclaration de l’évènement dans le composant enfant se fait en utilisant @Output() et l’objet EventEmitter.
EventEmitter permettra d’émettre l’évènement, par exemple:

 Template

 Classe du composant

Composant enfant
Directives
C’est quoi une directive ?
Les directives sont des objets Angular permettant de modifier ou d’enrichir un élément du DOM en
rajoutant ou en modifiant une propriété par programmation.

Dans la documentation Angular, les directives sont découpées en 3 catégories:

 Les composants: ce sont des directives avec une vue implémentée dans un fichier template.

 Les autres types de directives ne disposent pas de vue mais elles permettent de modifier le DOM en
ajoutant ou en supprimant ses éléments:

 Les directives attribut (i.e. attribute directives): ces directives peuvent modifier l’apparence et le
comportement des éléments, composants et d’autres directives.

 Les directives structurelles (i.e. structural directives): elles se distinguent des directives attribut car elles
utilisent un modèle (i.e. template) pour modifier le DOM. Il ne faut pas confondre ce modèle avec le
template d’un composant.
Directives structurelles usuelles (ngIf)
ngIf permet d’afficher des éléments après avoir évalué si une condition est vraie. Cette directive
transpose l’instruction conditionnelle if...then...else pour qu’elle soit utilisable dans le template d’un
composant.

 La syntaxe sous sa forme la plus simple si on l’utilise dans un élément HTML div, est:

<div *ngIf="condition"></div>

 Syntaxe avec else

<div *ngIf="condition else whenFalse">
condition=true
</div>
<ng-template #whenFalse><div>condition=false</div></ng-template>

 Syntaxe avec then et else

<div *ngIf="condition then whenTrue else whenFalse"></div>

<ng-template #whenTrue><div>condition=true</div></ng-template>
<ng-template #whenFalse><div>condition=false</div></ng-template>
Directives structurelles usuelles (ngFor)
ngFor permet de parcourir une liste d’objets. Cette directive transpose la boucle for pour qu’elle soit
utilisable dans le template d’un composant.

 La syntaxe sous sa forme la plus simple si on l’utilise dans un élément HTML div, est:

<div *ngFor="let item of items"> {{item}} </div>

L’intérêt est de pouvoir répéter l’affichage d’un élément HTML. Par exemple si on considère l’exemple suivant:

 D’autres propriétés dans ngFor peuvent être utilisées pour indiquer des informations supplémentaires:

 index indique l’index de l’élément courant dans la liste.

 count contient le nombre d’éléments de la liste.
 first est un booléen contenant true si l’élément courant est le premier élément de la liste.
 last est un booléen contenant true si l’élément courant est le dernier élément de la liste.
 odd contient true si l’index de l’élément courant est impair.
 even contient true si l’index de l’élément courant est pair.
Directives structurelles usuelles (ngSwitch)

ngSwitch est une directive permettant d’afficher un élément HTML si une expression est vraie.
Cette directive transpose switch...case pour qu’il soit utilisable dans le template d’un composant.

 La syntaxe sous sa forme la plus simple si on l’utilise dans un élément HTML div, est:
<p>Vehicle size is:</p>
<div [ngSwitch]="items[1]">
<div *ngSwitchCase="1"><b>Big</b></div>
<div *ngSwitchCase="2">Medium</div>
<div *ngSwitchCase="3"><i>Little</i></div>
<div *ngSwitchDefault>(unknown)</div>
</div>
Pipes
C’est quoi un pipe ?
Le pipe est un moyen d’appliquer des transformations sur nos données, directement depuis le
template HTML.

 Un pipe est défini par :

 Une donné en entrée : Paramètre

 Une donnée en sortie : Valeur de retour
 Une fonction de transformation : Mapping

 Il existe 2 types de pipe

 Pipes natifs Angular
 DatePipe qui sert à formater une date
 UpperCasePipe qui sert à passer un texte en majuscule
 LowerCasePipe qui sert à passer un texte en minuscule
 CurrencyPipe qui sert à formater un nombre en écriture monétaire
 DecimalPipe qui sert à formater en écriture décimal
 PercentPipe qui sert à formater en pourcentage

 Custorm pipes
 Angular nous donne aussi la possibilité de créer nos propres pipes.
Utilisation d’un pipe
Ci-dessous un exemple d’utilisation du pipe de date

 Template

 Classe du composant
Services
C’est quoi un service ?
Un service est un objet dont l'instanciation est gérée par Angular. Cet objet est unique dans toute
l'application et il peut être injecté dans n'importe lequel de vos components ou bien encore dans un
autre service.

 Un service permet donc de :

 Partager des fonctionnalités entre plusieurs components

 Partager des propriétés entre plusieurs components
 Communiquer entres les components
 Développer les fonctionnalités techniques de l'application

 Angular propose plusieurs services que vous pouvez utiliser dans votre application comme :

 HttpClient : Qui permet de lancer des réquêtes HTTP vers un serveur avec les méthodes (GET, POST, PUT, DELETE)
 FormBuilder : Qui permet de faciliter la création d’un objet formulaire
 Router : Qui permet de gérer la navigation dans votre application.
Fonctionnement d’un service
Tout d’abord avant d’utiliser un service il faut le créer (Hormis les services mis a disposition par angular) et
l’injecter.

 Pour créer un service il suffit de créer une classe précédée de l'annotation @Injectable.
 Pour l’utiliser il faut l’injecter dans le composant qui requiert ce service, l’injection de dépendance ce fait dans le constructeur
 Exemple :

 Son processus ressemble a ceci .

Routeur
C’est quoi un router ?
 Le routeur

Une application Angular est une Single Page Application et cela signifie que l'application est chargée entièrement au démarrage.
Cependant cela n’empêche pas le développeur de vouloir découper son application en plusieurs pages et pour cela il faut utiliser le
routeur

 Les routes

 Pour utiliser le routeur il faut d'abord créer un fichier de routing dans votre module puis déterminer des routes.
 La route où le visiteur sera dirigé est spécifiée dans l'URL. Par exemple si l'URL est http://localhost:4200/accueil l'utilisateur sera
dirigé sur la route accueil
 Exemple de routes que vous pouvez spécifier dans un fichier de routing :

La première ligne sert à indiquer quel route prendre si aucune n'est précisée dans
l'URL. Ici le visiteur sera redirigé sur la route accueil - La route accueil va afficher ce qui est
prévu par le component AccueilComponent - La route reservations va afficher ce qui est prévu
par le component ReservationsComponent - La dernière ligne précise que si la route
demandée par l'utilisateur ne match avec aucune des précédentes, c'est alors le
component NotFoundPageComponent qui va s'afficher.
Fonctionnement
 Le router outlet

Le component spécifié par la route sera chargé à la place du component <router-outlet></router-outlet>. Pour cela il doit être déclaré
dans le module.

Exemple :

 Changer de page
 Vous pouvez créer des liens sur votre application pour permettre au visiteur de changer de page grâce à la directive RouterLink. Pour
l'utiliser vous devez créer un ligne sur votre page en appelant la directive avec comme paramètre l'URL à appeler.

Exemple:

 Vous pouvez également demander le changement de page depuis le code TypeScript d’un component. Il faut pour cela importer le
service Router dans le constructeur de la classe puis appeler la méthode navigate.

Exemple:
Modules
C’est quoi un module ?
Les modules permettent de regrouper un ensemble de components, de services, de directives, etc...
Le développeur choisira de créer des modules pour découper son application par fonctionnalités.

 Pour ajouter un nouveau module, vous devez créer une classe TypeScript sur laquelle on ajoute des métadonnées via l’annotation
@NgModule,
 Pour un nouveau module, les métadonnées que vous devez spécifier sont :

 declarations : Un tableau qui contient les components du module

 imports : Un tableau qui contient les modules ou components externes à importer dans le nouveau module
 exports : Un tableau qui contient les components ou module qui peuvent être utilisé ailleurs dans l'application
 providers : Les services définis dans ce nouveau module.

 Exemple
Attention : Tout nouveau module doit importer le CommonModule pour pourvoir utiliser les
fonctionnalités de base telles que *ngIf ou *ngFor.
Observables
C’est quoi RxJS ?
RxJS est une bibliothèque de programmation réactive utilisant des Observables pour faciliter la
composition de code asynchrone.

 Utilité:
 ReactiveX combine l’Observer pattern avec l’Iterator pattern et la programmation fonctionnelle avec des collections pour répondre
au besoin de gérer les séquences d'événements.

 Un événement se produit par exemple lorsque l'utilisateur ou le navigateur modifie d’une quelconque façon une page. Lorsque la page
se charge, cela s'appelle un événement. Lorsque l'utilisateur clique sur un bouton, ce clic est également un événement.

 Les concepts essentiels de RxJS qui résolvent la gestion des événements asynchrones sont :

 Observable : représente l’idée d’une collection invocable de valeurs ou d’événements futurs. (Équivalent aux streams)
 Observer : est une collection de callbacks qui sait écouter les valeurs délivrées par l’Observable.
 Subscription : représente l’exécution d’un Observable, est principalement utile pour annuler l’exécution.
 Operators : sont des fonctions pures qui permettent un style de programmation fonctionnelle pour traiter les collections
avec des opérations telles que map, filter, concat, reduce, etc.
 Subject : équivaut à un EventEmitter et est le seul moyen de multicaster une valeur ou un événement à plusieurs
observateurs.

 Les streams

 Pour comprendre les observables il faut d’abord comprendre la notion de stream, var comme vous le savez la notion d’asynchrone est
est fondamentale en JavaScript
C’est quoi RxJS ? (suite)
 Quelques exemple de cas asynchrones:
 Nous pouvons avoir des requêtes API à effectuer pour récupérer de la donnée d’un back-end.
 Nous pouvons avoir des délais d’attente qui se produisent dans le front-end.
 Nous avons des interactions d’utilisateurs via des événements clavier et souris.

 Les observables
Utilisation de la méthode interval (observable de nombre) pour illustrer un cas concret d’observable.

Une bonne pratique est de nommer un observable de la sorte : maVariable$ avec un

signe dollar à la fin du nom de variable pour indiquer qu’il s’agit d’un observable.

Pour que l’obsevable devienne un flux de valeurs, nous devons y souscrire avec la méthode subscribe qui va nous permettre d’activer le
stream, cette méthode dispose de quelques arguments que nous pouvons lui fournir :

 Le 1er argument (obligatoire) est une fonction callback via laquelle transitent toutes les valeurs de l’observable.
 Le 2ème argument (optionnel) est une fonction callback de gestion d’erreur.
 Le 3ème argument (optionnel) est une fonction callback appelée lorsque l’observable s’arrête.

Exemple :
Formulaires
Manipulation des formulaires
Dans Angular les développeurs vont être amenés à manipuler un ou plusieurs formulaires. Angular propose
deux méthodes pour manipuler les formulaires :

 Les formulaires dirigés par le template : template driven forms

 Les formulaires réactifs: reactive forms

Nous allons détailler ici les deux méthodes. Une des choses à savoir est que ces deux approches sont
incompatibles entre elles. En effet, on ne peut pas utiliser à la fois un template driven form et un reactive
form.
Template driven forms
Les template driven permettent d’utiliser la directive ngModel directement dans la vue HTML. Elle permet
de faire le lien entre le champ d'un formulaire et une propriété d'un component.

 Tout d'abord pour utiliser les template driven forms il faut importer dans un module le FormsModule depuis @angular/forms.

 Exemple :

 Template

 Class du composant
Reactive forms
Pour utiliser les reactive forms il faut importer dans un module le ReactiveFormsModule depuis
@angular/forms.

 Exemple :

 Template

 Class du composant
Principales différences
Le tableau ci-dessous récapitule les principales différences entre les formulaires réactifs et basés sur des
modèles.

Formulaires réactifs Formulaires basés sur des modèles

Configuration (modèle de formulaire) Plus explicite, créé dans la classe de Moins explicite, créé par des directives
composant

Modèle de données Structuré Non structuré

Prévisibilité Synchrone Asynchrone

Form validation Les fonctions Directives

Mutabilité Immuable Mutable

L'évolutivité Accès à l'API de bas niveau Abstraction au-dessus des API

Fondation commune
Les formulaires réactifs et les formulaires basés sur des modèles partagent les blocs de construction
sous-jacents.

FormControl suit la valeur et l'état de validation d'un contrôle de formulaire individuel.

FormGroup suit les mêmes valeurs et statut pour une collection de contrôles de formulaire.

FormArray suit les mêmes valeurs et le même statut pour un tableau de contrôles de formulaire.

ControlValueAccessor crée un pont entre les instances FormControl Angular et les éléments natifs du DOM.
Quelsques Comandes utiles

 ng g m module-name Pour générer un module m ou module

 ng g c component-name Pour générer un composant c ou component
 ng g s service-name Pour générer un service s ou service
 ng g cl class-name Pour générer une classe cl ou class
 ng g i interface-name Pour générer une interface i ou interface
 ng g d directive-name Pour générer une directive d ou directive
 …