Manuel des TP : Atelier angular tp cours frontend bachend

Introduction Angular
11/08/2021 | ©2021 Inetum | Ahmed Ghrairi
PRESENTATION Angular

2
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.

3
1 Installation d’Angular
3 Les composants
5 Les directives
7 Les service
2 Arborescence d’un projet Angular
4 Routing
6 Les pipes
8 Injection de dépendances
9 Data binding 10 HTTP Client
Programme

4
1
Installation d’Angular

5
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

6
2
Arborescence d’un
projet Angular

7
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.

8
3
Les composants

9
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

10
4
Routing

11
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.

12
5
Les directives

13
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.

14
6
Les pipes

15
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 }}

16
7
Les services

17
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 …)

18
8
Injection de
dépendances

19
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.

20
9
Data binding

21
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.

22
10
HTTP Client

23
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

Manuel des TP : Atelier angular tp cours frontend bachend

Contenu connexe

Similaire à Manuel des TP : Atelier angular tp cours frontend bachend

Dernier

Manuel des TP : Atelier angular tp cours frontend bachend