Vous êtes sur la page 1sur 24

Introduction Angular

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular
Angular est un framework d’application Web open source(SPG) basé sur
TypeScript , développé et maintenu par Google. Il offre un moyen simple et
puissant de créer des applications Web frontales basé sur des composants.

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 2
Programme
1 Installation d’Angular 2 Arborescence d’un projet Angular

3 Les composants 4 Routing

5 Les directives 6 Les pipes

7 Les service 8 Injection de dépendances

9 Data binding 10 HTTP Client

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 3
1

Installation d’Angular

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 4
Installation Angular

1. L’installation de NodeJs est obligatoire afin de pouvoir utiliser son npm (Node Package Manager).

2. Installer ensuite Angular Cli : npm install @angular/cli

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 5
2

Arborescence d’un
projet Angular

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 6
Arborescence d’un projet Angular

 Node_modules : les dépendences.


• Src : dossier contenant l’index le code source les styles, main.ts qui est
le bootstrap d’angular ainsi que d’autres fichiers.
 App : Les sources du projet par défaut ainsi que le module appModule,
le fichier app.component.ts ainsi que son template (app.component.html), son style
(app.component.css) et app.component.spec.ts pour les tests unitaires.

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 7
3

Les composants

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 8
Les composants

 Un composant est une classe qui permet de gérer une vue. Il se


charge uniquement de cette vue la.
 Une application Angular est un arbre de composants.
 Un composant est :
- Composable
- Réutilisable
- Hiérarchique

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 9
4

Routing

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 10
Routing

 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.
 Une route est un objet.
 Les deux propriétés essentielles sont path et component.
 path permet de spécifier l’URI. Cette url ne doit pas commencer par un /
 component permet de spécifier le composant à exécuter.

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 11
5

Les directives

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 12
Les directives

 Les directives Angular sont des classes avec la métadata @Directive.


 Elle permettent de modifier le DOM et de rendre les Template
dynamiques.
 Apparaissent dans des éléments HTML comme les attributs.
 Un composant est une directive à laquelle Angular a associé un Template.
 Ils existe deux autres types de directives :
- Les directives structurelles qui changent l’apparence du DOM en
ajoutant et supprimant des éléments.
- Les directives d’attributs (attribute directives) qui permettent de changer
l’apparence ou le comportement d’un élément.

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 13
6

Les pipes

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 14
Les pipes

 Un pipe est une fonctionnalité qui permet de formater et de


transformer vos données avant de les afficher dans vos Templates.
 Exemple l’affichage d’une date selon un certain format.
 Il existe des pipes offerts par Angular et prêt à l’emploi.
 Vous pouvez créer vos propres pipes.
 Afin d’utiliser un pipe vous utilisez la syntaxe suivante :
{{ variable | nomDuPipe }}
Exemple : {{ maDate | date }}

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 15
7

Les services

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 16
Les services

 Un service est une classe qui permet d’exécuter un traitement.


 Permet d’encapsuler des fonctionnalités redondantes permettant ainsi d’éviter la
redondance de code.
 Un service est associé à un composant en utilisant l’injection de dépendance
 Un service peut donc :
- Interagir avec les données (fournit, supprime et modifie)
- Interaction entre classes et composants
- Tout traitement métier (calcul, tri, extraction …)

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 17
8

Injection de
dépendances

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 18
Injection de dépendances

L’injection de dépendance utilise les étapes suivantes :


 Déclarer le service dans le provider du module ou du composant
 Passer le service comme paramètre du constructeur de l’entité qui en a besoin.

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 19
9

Data binding

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 20
Data binding

 Le data binding est le mécanisme qui permet de mapper des éléments du DOM avec des propriétés et des méthodes du
composant.
 Le Data Binding permettra aussi de faire communiquer les composants.

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 21
10

HTTP Client

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 22
HTTP Client

 Le module permettant la consommation d’API externe


 Afin d’utiliser le module, il faudra aussi l’ajouter dans le fichier module.ts dans le
tableau d’imports.
 il faut l’injecter dans le service dans lequel vous voulez l’utiliser.
 Afin d’exécuter une requête get le module http nous offre une méthode get. Cette
méthode retourne un Observale
 Cet observable a 3 callback function comme paramètres.
- Une en cas de réponse
- Une en cas d’erreur
- La troisième en cas de fin du flux de réponse

11/08/2021 | ©2021 Inetum | Ahmed Ghrairi


PRESENTATION Angular 23
inetum.world

FRANCE | SPAIN | PORTUGAL | BELGIUM | SWITZERLAND | LUXEMBOURG | ENGLAND |


POLAND | ROMANIA | MOROCCO | TUNISIA | SENEGAL | CÔTE D’IVOIRE | ANGOLA |
CAMEROON | USA | BRAZIL | COLOMBIA | MEXICO | RP OF PANAMA | PERU | CHILI |
COSTA RICA | DOMINICAN REPUBLIC | ARGENTINA | SINGAPORE | UAE

Vous aimerez peut-être aussi