Cours Angular [PDF]

Zitiervorschau

---

Plan 1. 2. 3. 4.

Introduction Routage et navigation Les Services Angular Forms

Introduction • Framework JavaScript (ou TypeScript) • Présenté par Google en 2009 • Permettant de créer des applications web et mobiles ▪ Front-End (l’ensemble des éléments visibles et accessibles directement sur une application web ou une application web mobile) ▪ Single page Application (Une SPA est une application qui contient une seule page HTML (index.html) récupérée du serveur).

• Respecte l’architecture MVVM (Model-View-ViewModel) ▪ Model : représenté généralement par une classe référencée par la couche d’accès aux données (classe ou interface TypeScript). ▪ View: contenant la disposition et l’apparence de ce qu’un utilisateur voit à l’ écran, recevant l’interaction avec l’utilisateur : clic, saisie, survol... ▪ ViewModel: remplaçant du contrôleur dans l’architecture MVC, connecté à la vue par le data binding, représenté dans Angular par un fichier *.component.ts.

• Angular utilise les langages suivants: • HTML pour les vues. HTML pour les vues. • CSS pour les styles. • TypeScript pour les scripts depuis la version 2. H

4

Introduction-Historique • Angular 1 (Agular JS) : H

▪ Première version de Angular qui est la plus populaire. ▪ Elle est basée sur une architecture MVC coté client. Les applications Angular 1 sont écrite en Java Script.

•

Angular 2 (Angular) : ▪ Est une réécriture de Angular 1 qui est plus performante, mieux structurée et représente le futur de Angular. ▪ Les applications de Angular2 sont écrites en Type Script qui est compilé et traduit en Java Script avant d’être exécuté par les Browsers Web. ▪ Angular 2 est basée sur une programmation basée sur les Composants Web (Web Component)

•

Angular 4, 5, 6,7,8,… : sont de simples mises à jour de Angular 2 avec des améliorations au niveau performances.

5

Architecture de base d’une application Angular

6

Installation • Pour installer Angular, il faut télécharger et installer NodeJS (Dernière version stable LTS) • Pour installer Angular, exécuter la commande npm install –g @angular/cli

• Pour installer une version bien précise (par exemple 8) npm install –g @angular/cli@8

• Pour vérifier la version d’Angular installée, exécuter la commande ng version

➢ npm (node package manager) : le gestionnaire de paquets par défaut pour une application JavaScript. ➢ angular-cli (command line interface) : outil proposé par Google pour faciliter la création et la 7 construction d’une application Angular en exécutant directement des commandes.

Commandes CLI à utiliser fréquemment Commandes

Besoins

ng version

afficher la version de angular Cli

ng new firstApp

Créer un projet angular

ng serve (ou npm start)

Exécuter un projet

ng serve -o

lancer le projet et ouvrir une nouvelle fenêtre dans le navigateur Créer un composant

ng g component componentName (ng g c componentName), (ng g c ComponentName - -skip-tests=true)

ng g service serviceName

Créer un service

ng g class className

Créer une classe

ng g i interfaceName

Créer une interface 8

Structure du Projet Angular Dossier des scripts des tests unitaires

9

Structure du Projet Angular

Declarations : C'est le tableau de composants. Si un nouveau composant est créé, il sera importé en premier et la référence sera incluse dans les déclarations Imports : C'est un tableau de modules requis pour être utilisé dans l’application Providers: Cela va contenir tous les services crées

Bootstrap : Cela inclut le composant principal de l’application pour démarrer l'exécution

10

Structure du Projet Angular Chaque composant se compose principalement des éléments suivants : •

HTML Template : représentant sa vue

•

Une classe représentant sa logique métier (.ts)

•

Une feuille de style CSS

•

Un fichier spec sont des tests

Un composant peut être inséré dans n’importe quelle partie HTML de l’application en utilisant son sélecteur associé.

Un composant est une classe qui possède le décorateur @Component. Ce décorateur possède les propriétés suivantes : •

selector : permet de spécifier le tag (nom de la balise) associé à ce composant.

•

templateUrl : permet d’associer un fichier externe HTML contenant la structure de la vue du composant

•

styleUrls : spécifier les feuilles de styles CSS associées à ce composant

11

DataBinding • Pour insérer dynamiquement des données de l’applications dans les vues des composants, Angular définit des techniques pour assurer la liaison des données. Property Binding : est une autre technique One Way Binding. Elle permet de • Data Binding = Communication

lier une propriété de la vue avec une propriété définie dans le composant. Exemple:

Event Binding : dans Angular , event binding est utilisé pour gérer les événements déclenchés comme le clic de bouton, le déplacement de la souris, etc. Lorsque l'événement se produit, il appelle la méthode spécifiée dans le composant. String interpolation:est une technique de One Way Binding, elle utilise l'expression {{ }} pour afficher les données du composant dans la vue. Exemple:

app.component.html

Exemple:

Two-way binding : nous avons vu que dans la le One Way Binding, tout changement dans la vue n'était pas reflété dans le composant. Pour résoudre ce problème, Angular Two Way Binding.

app.component.ts

Remarque : il faut ajouter « FormsModule» dans le tableau imports du fichier app.module.ts 12

Les directives • Les directives sont des instructions intégrées dans le DOM.

Le DOM (Document Object Model) est une interface de programmation qui est une représentation du HTML d'une page web et qui permet d'accéder aux éléments de cette page web et de les modifier avec le langage JavaScript. Il faut voir le DOM comme un arbre où chaque élément peut avoir zéro ou plusieurs enfants, qui peuvent avoir eux-mêmes zéro ou plusieurs enfants, etc…

• Quand Angular lit le template et rencontre une directive qu'il reconnait, il suit les instructions correspondantes. • La directive *ngFor : elle est très utile dans le cas d’un tableau et qu’on a besoin de répéter un traitement donné.

Exemple :

• {{ p.nom }}

• La directive *ngIf : est utilisée lorsque vous souhaitez afficher ou supprimer un élément en fonction d'une condition. Prend un booléen en paramètre. Tout comme nous sommes habitués à d’autres langages de programmation, la directive angular ngIf nous

permet également de déclarer un bloc else. Ce bloc est affiché si l’instruction définie dans le bloc principal put être fausse. Exemple : impair … … pair

13

Les directives • La directive [ngStyle] : Cette directive permet de modifier le style d’un élément HTML. Elle s’utilise conjointement avec le property binding pour récupérer des valeurs définies dans la classe.

Exemple: {{produits[0].nom}} La fonction getColor() retourne la couleur du titre h4. Cette méthode est développée dans le fichier .ts. • La directive [ngClass]:permet d’attribuer de nouvelles classes d’un élément HTML. S’utilise conjointement

avec le property binding pour récupérer des valeurs définies dans la classe ou dans la feuille de style. Exemple: On définit deux classes rouge et bleu dans app.component.css .rouge { color: red; } .bleu { color: blue; } Pour associer la classe rouge à la balise

{{ nom }}

On peut aussi appeler une méthode dans la directive ngClass

14

Les pipes • Les Pipes sont des filtres utilisables directement depuis la vue afin de transformer les valeurs lors du "binding".

• Il existe plusieurs pipes natives dans Angular comme par exemple DecimalPipe, UpperCasePipe, CurrencyPipe, etc. • Exemple: {{nom|uppercase}},{{prix|currency:'TND':'symbol':'2.2-2'}}

• Vous trouverez dans ce lien les pipes natives d’Angular : https://angular.io/api?type=pipe

15

Introduction au Routage • En général, on ne cherche pas à afficher tous les composants au même temps dans le bloc

principal. • On définit plutôt un chemin pour chaque composant. • Un système de routing permet d’associer une route (url - path) à un traitement particulier. • Il s'agit des instructions d'affichage à suivre pour chaque URL, c'est-à-dire quel(s) component(s) il faut afficher à quel(s) endroit(s) pour un URL donné.

• Le routeur angular permet la navigation d'une vue à l'autre lorsque les utilisateurs exécutent des tâches d'application. 17

AppRouting module • Angular-CLI nous propose le module applicatif AppRoutingModule permettant d'ajouter la fonctionnalité de routage à une application :

✓Routes : est un Array contenant la déclaration des Routes ✓RouterModule : est un module regroupant les directives et les services paramétrables permettant de remplir la fonctionnalité de routage. 18

Création d’un système de Routing • La constante routes représente les chemins à déclarer dans un projet Angular: ➢Chaque objet {path: « url du composant », component: « la class du composant concerné »}

• Intégrer les routes à notre application dans le App-routingModule à travers le RouterModule et sa méthode forRoot

19

Application de routage • Pour appliquer un routage dans une vue ( HTML Template), on a besoin des directives suivantes: ▪ routerLink: c’est une directive prenant en valeur le chemin (path) indiqué dans la table routes

▪ Router-outlet est une directive qui permet de spécifier l’endroit ou la vue va être chargée. Sa syntaxe est

• Exemple: Quand l’utilisateur tape http://localhost:4200/accueil , le routeur cherche et charge le composant AccueilComponent et l’affiche dans un élément . Cet élément est sensé se

trouver dans la vue du composant racine.

20

Redirection • redirectTo: est une propriété ajouté dans l’objet du route pour rediriger une route

• Cette propriété permet d’indiquer vers quelle route le path doit être redirigé.

• Sans la partie pathMatch: ’full’ (pour les chemins vides), toutes les routes déclarées après cette dernière ne seront pas accessibles. • pathMatch: ’full’ ne laisse donc passer que les requêtes dont le chemin correspond exactement au chemin vide • La deuxième valeur possible pour pathMatch est ’prefix’

21

Route parametres

ou

22

Récupération des paramètres 1. Importer ActivatedRoute qui nous permettra de récupérer les paramètres de la route.

2. Injecter ActivatedRoute au niveau du composant. 3. Affecter le paramètre à une variable du composant • L’affectation peut être faite de plusieurs façons: • Méthode 1: un snapshot de l’URL via le ActivatedRoute

Injection de dépendances: consiste à créer dynamiquement (injecter) les dépendances entre les différents objets en s'appuyant sur une description (fichier de configuration ou métadonnées) ou de manière programmatique. Ainsi les dépendances entre composants logiciels ne sont plus exprimées dans le code de manière statique mais déterminées dynamiquement à l'exécution.

ou • Méthode 2: Via Observable : la fonction subscribe

23

Récupération des paramètres • Une autre méthode pour récupérer des données : queryParams • Les queryParameters sont les paramètres envoyé à travers une requête GET. • Identifié avec le ?.

24

Application du route via composant • Afin de déclencher une route à travers le composant on utilise l’objet Router et sa méthode navigate. • Cette méthode prend le même paramètre que le routerLink, à savoir un tableau contenant la description de la route. • Afin d’utiliser le Route, il faut l’importer de l’@angular/router et l’injecter dans votre composant.

25

Wildcard route • Le wildcard route permet de rediriger vers un composant si le chemin indiqué

n’existe pas ( The not found page):

• NB: Il faut faire attention à l’emplacement du Wildcard route 26

Qu'est-ce un service? • un service est une classe Type script décorée par @Injectable, qui peut contenir du code réutilisable, ou des données qu’on veut partager entre plusieurs composants. (Eviter la redondance ) • Un service peut donc : • Interagir avec les données (fournit, supprime et modifie) • Faire tout traitement métier (calcul, tri, extraction …)

→Un service est singleton/ global • Un service est associé à un composant (.ts) en utilisant l’injection de dépendance • Exemple de quelques services Angular utilisés dans les chapitres précédents :ActivatedRoute, Router

• Exemple d’autre service angular: HttpClient • Généralement, c’est les service qui interagissent avec la partie back end de l’application en envoyant des requêtes

HTTP. 28

Création d’un service • Pour créer un service : ng generate service service-name

//

ng g s service_name

import { Injectable } from '@angular/core'; @Injectable({

providedIn: 'root' }) export class TestService { constructor() { } }

• Depuis la version 6 d’Angular, on n’a plus besoin de déclarer les services dans la section providers dans app.module.ts • L’expression providedIn: ’root’ vaut déclaration

29

Injection des dépendances

• Lorsque Angular crée un composant, il demande d'abord à un injecteur les services requis. • Un injecteur maintient un conteneur d'instances de service qu'il a créé précédemment. • Si une instance de service demandée n'est pas dans le conteneur, l'injecteur en fait une et

l'ajoute au conteneur avant de renvoyer le service à Angular. • Lorsque tous les services demandés ont été résolus et retournés, Angular peut appeler le constructeur du composant avec ces services comme arguments. 30

Exemple d’interaction composant-service import { Injectable } from '@angular/core'; import { Produit } from '../model/produit'; @Injectable({ providedIn: 'root' }) export class TestService { private products:Array=new Array();

constructor() { this.products.push({id :1,nom :"pc",prix :1200,quantite :20, urlImg :"./assets/images/pc portable.jfif"}); this.products.push({id :2,nom :"clavier",prix :10,quantite :10, urlImg :"./assets/images/clavier.jfif"}); this.products.push({id :3,nom :"souris",prix :5,quantite :0, urlImg :"./assets/images/souris.jfif"});

} public getProducts(){ return this.products; } public getProductById(id) { return this.products.find(x=>x.id==id); } }

export class ProduitDetailComponent implements OnInit {

produit:Produit constructor(private ar:ActivatedRoute, private router:Router, private service:TestService) { } ngOnInit() { let id:number this.ar.paramMap.subscribe((params)=>{ id=+params.get('id') console.log(" "+id+" "); this.produit=this.service.getProductById(id) }); }

31

Simulation de la partie backend (json-server) • L’outil logiciel json-server est une solution simple pour simuler un API REST lors du développement de votre application. • Pour installer json-server :npm install -save json-server

• Création d’un fichier json (db.json) {

"produits":[

{"id":1, "nom":"pc portable", "prix":1500, "quantite":20, "nomImg":"pc portable"

},…]

• Json-server va utiliser cette "base de données" pour stocker les données de l’application

• Pour démarrer le serveur : json-server --watch src/db.json

32

Postman

• Postman est un logiciel qui va vous permettre d’appeler / tester une API. • Postman sert à exécuter des appels HTTP directement depuis une interface graphique.

• Vous pourrez simplement choisir l'URL, la méthode HTTP (le plus souvent GET, POST, PUT, PATCH et DELETE), les headers, les query params et dans certains cas le body de la requête.

• Méthodes http: ▪

GET: les requêtes GET sont celles effectuées par un navigateur lorsque vous entrez une URL dans la barre de

navigation. Elles ont pour but d’aller chercher une page ou de la donnée. ▪

POST: les requêtes POST ont pour but d’envoyer de l’information, contenue dans le body de la requête, vers le serveur.

▪

PUT: les requêtes PUT vont écraser une ressource avec de la nouvelle donnée, là aussi présente dans le body de la requête. Elle est utilisée pour mettre à jour de la donnée à condition qu’on soit capable de fournir la ressource mise à

jour dans son intégralité. ▪

PATCH: les requêtes PATCH servent également à mettre à jour une ressource mais en ne modifiant que l’élément

envoyé en body de la requête. ▪

DELETE: comme son nom l’indique, la requête DELETE sert à effacer une ressource

33

Exemple

34

Module HTTP • Le module permettant la consommation d’API externe s’appelle le module HTTP. • Un Http Service nous aidera à aller chercher des données externes, poster, etc. • Nous devons ajouter le module HttpClientModule dans le tableau « imports » du fichier

« app.modules.ts » pour utiliser le service http. ( import { HttpClientModule} from'@angular/common/http‘;) • Afin d’utiliser le module HTTP, il faut l’injecter dans le composant ou le service dans

lequel vous voulez l’utiliser: constructor(private http:HttpClient)

35

Exemple d’un service import import import import

{ Injectable } from '@angular/core'; {HttpClient} from '@angular/common/http' { Observable } from 'rxjs'; { Produit } from '../model/produit';

@Injectable({ providedIn: 'root' }) export class ProduitService { host="http://localhost:3000/produits/" constructor(private client:HttpClient) { }

Afin d’exécuter une requête get le module httpClient nous offre une méthode get(). Cette méthode retourne un Observale.

public getProducts():Observable{ return this.client.get(this.host); } public getProductById(id):Observable { return this.client.get(this.host+id); } public addProduct(produit:Produit):Observable { return this.client.post(this.host,produit); } }

endPoint url (backend)

36

Utilisation d’un service ListeProduitsComponent.ts

products:Produit[]; constructor(private service:ProduitService) { } ngOnInit() { this.service.getProducts().subscribe(data=>{ this.products=data; ……}); } DetailsComponent.ts product:Produit constructor(private service:ProduitService, private ar: ActivatedRoute) { } ngOnInit() { let id:number this.ar.paramMap.subscribe((params)=>{ id=+params.get('id') this.service.getProductById(id).subscribe(data=>{ this.product=data; }) }); 37

Introduction Angular propose deux types de forms : Template driven forms (piloté par le template) :

-

Utilisant FormsModule

-

Basé sur les directives (ngmodel)

-

Facile

Reactive forms : -

Basé sur ReactiveFormsModule

-

robuste,

-

Évolutif,

-

Conçu pour les applications nécessitant des contrôles particuliers.

-

Conseillé pour les formulaires simples

• Form Group •

Form Builder

Template Driven Forms - ngModel • Importer le module FormsModule dans module.ts • Angular détecte automatiquement un objet form à l’aide de la balise FORM. Cependant, il ne détecte aucun des éléments(inputs). • Spécifier à Angular quel sont les éléments à gérer:

• Pour chaque élément, ajouter la directive angular ngModel. Ceci permet de lier la valeur des contrôles HTML (entrée, selection, zone de texte) aux données de l’application. • Attention, Si vous n’ajouter pas ngModel à votre champ ou input , ce champs ne sera

plus pris en compte. • Identifier l’élément avec un nom (name) permettant de le détecter et de l’identifier dans le

composant.