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
