qu'est ce qu'angular? adil enaanailecurseur.e-monsite.com/medias/files/angular8.pdf ·...
TRANSCRIPT
Angular 8
Qu'est ce qu'Angular?
Angular est un Framework Javascript qui permet d'écrire des Applications
Web
• Angular est très jeune, il a été créé par Google le 14 Septembre 2016.
• Angular est open source, son utilisation est donc gratuite.
• Angular utilise Typescript.
• Angular est un framework Frontend.
• Angular vs React vs Vuejs : le combat des chefs.Adil ENAANAI
Angular 8
Que peut on faire avec angular ?
Angular va nous permettre d'implémenter facilement les fonctionnalités
majeures du développement Web moderne.
• Créer une Single Page Application (SPA)
• Implémenter Le Lazy Loading et le Server side Rendering (SSR)
• Gérer le Search Engine Optimization (SEO)
• Créer une Progressive Web App (PWA)
• Créer un Site Responsive
Adil ENAANAI
Angular 8
Ce que nous allons faire
Adil ENAANAI
Angular 8
Installation des outils nécessaires
Avant d'utiliser Angular il nous faut installer un certain nombre de logiciels
Node.js
Impossible de faire fonctionner Angular sans lui.
Visual Studio Code
Ce choix est arbitraire.
Git : Très utile mais pas essentiel
Angular CLI : C'est l'homme à tout faire d'Angular
Adil ENAANAI
Angular 8
Installation – Node JS
Si vous ne l'installez pas, Angular ne fonctionnera pas.
A ce propos Angular, React et Vue.js ont besoin tous trois de Node.js.
Le site officiel c'est ici https://nodejs.org/fr/
Node.js est ainsi le point central qui va permettre d'exécuter des programmes
écrits en javascript côté serveur.
Node.js utilise un outil npm (Node Pakage Manager)
• Npm simplifie la vie du développeur en permettant de publier et de partager des
librairies Node.js.
• Npm permet notamment de simplifier l'installation, la mise à jour ou la
désinstallation de ces librairies.
Adil ENAANAI
Angular 8
Installation – Node JS
Une fois l'installation effectuée on peut vérifier que Node.js est installé sur notre poste
de travail.
# Vérification de la version de Node.js et de npm (méthode 1)node --version npm --version # Vérification de la version de Node.js et de npm (méthode 2)node -v npm -v # Mise à jour de npmnpm install npm -g # Vérification de la mise à jour de npmnpm -v
Adil ENAANAI
Angular 8
Installation – Node JS
Comment savoir que Node.js fonctionne ?
On va vérifier que Node.js fonctionne et qu'il permet d'exécuter un programme
javascript.
Créez un fichier index.js avec un éditeur de code (bloc-notes fera l'affaire).
Copiez le code exemple suivant
var http=require("http");http.createServer(function (request, response) {
// Send the HTTP header// HTTP Status: 200 : OK// Content Type: text/plainresponse.writeHead(200, {'Content-Type': 'text/plain'});// Send the response body as "Hello World"response.end('Hello World\n');
}).listen(8081);// Console will print the messageconsole.log('Server running at http://127.0.0.1:8081/');
Adil ENAANAI
Angular 8
Installation – Node JS
Comment savoir que Node.js fonctionne ?
Tester le fonctionnement
# Exécution du programme javascript sur l’invite de commande node index.js
# Vérification dans le navigateur
http://localhost:8081
Adil ENAANAI
Angular 8
Installation – Visual studio code
VS code est un éditeur de code développé par Microsoft pour Windows, Linux et OS X.
Procédons à l'installation.
Le site officiel est là
https://code.visualstudio.com/
Adil ENAANAI
Angular 8
Installation – Angular CLI
Angular CLI veut dire Angular Command Line Interface.
- Si une version précédente était installée sur votre poste vous pouvez la désinstaller avec
la commande suivante # Désinstallation d'angular-clinpm uninstall -g @angular/cli
Angular CLI est une librairie (ou package).
Nous allons l'installer avec npm le gestionnaire de node.js
Vous pouvez installer une version spécifique d'angular ou installer par défaut la
dernière disponible.
# Installation d'angular-cli dernière version disponiblenpm install -g @angular/cli # Installation d'angular-cli version spécifiquenpm install -g @angular/[email protected] # Test de version installéeng --version
Adil ENAANAI
Angular 8
Mise à jour
Angular 8 est la version principale du framework de base Angular, Angular CLI, Angular
Materials sont mis à jour. Si nous utilisons Angular 5 ou 6 et souhaitons mettre à jour vers
Angular 8, voici la commande qui mettra à jour notre application vers la version récente
d'Angular.ng update @angular/cli @angular/core
Adil ENAANAI
Angular 8
Différence entre Angular Js et Angular
Angular JS Angular
Angular JS est basé sur JavaScript.Angular est un framework d'application web à pile
complète basé sur des typeScript.
Angular JS utilise le concept de portée ou de
contrôleur.
Angular utilise la hiérarchie des composants à la place de
la portée et des contrôleurs.
Angular JS ne prend pas en charge le
chargement dynamique de la page.
Angular prend en charge le chargement dynamique de la
page.
Angular JS a une syntaxe simple et utilisé sur
les pages HTML.
Angular utilise une syntaxe d'expression différente utilise
«[]» pour la liaison de propriété et la liaison d'événement
«()».
Angular JS est un simple fichier JavaScript,
utilisé avec les pages HTML, et ne prend pas
en charge les fonctionnalités des langages de
programmation de site de serveur.
Il utilise le langage Typescript qui fournit des langages
de programmation orientés objet basés sur les classes et
prend en charge les fonctionnalités du langage de
programmation de site de serveur.
Adil ENAANAI
Angular 8
Architecture
Angular 8 est une plateforme et un framework qui sont utilisés pour créer des applications
clientes en HTML et TypeScript. Angular 8 est écrit en Typescript . Typescript est un sur-
ensemble de JavaScript.
Angular 8 implémente les fonctionnalités de base et facultatives sous la forme d'un
ensemble de bibliothèques Typescript que nous pouvons importer dans notre application.
Les NgModules sont les éléments de base de l'application Angular 8 . Ils fournissent un
contexte de compilation pour les composants.
Adil ENAANAI
Angular 8
Architecture
Différentes unités sont combinées pour créer une application angulaire , qui est la
suivante.
Adil ENAANAI
Angular 8
Initialisation du projet avec Angular CLI
Angular CLI est un outil pour initialiser, développer et maintenir des applications Angular.
Le site officiel est ici https://cli.angular.io/
Et si vous voulez avoir la liste des commandes Angular CLI
https://github.com/angular/angular-cli/wiki
Angular CLI nous offre un certain nombre de commandes.
Ces commandes nous évitent d'effectuer des tâches répétitives.
La première commande que nous allons utiliser est ng new ou ng n
•Elle va créer notre application.
•Elle va générer tous les fichiers nécessaires à cette application.
•Elle va évidemment suivre les best practices préconisées par l'équipe de Google.
Adil ENAANAI
Angular 8
Initialisation du projet avec Angular CLI
# Générer un projet appelé angular-starter avec choix manuel des optionsng new angular-starter # Générer un projet appelé angular-starter avec options par défautng new angular-starter --defaults # Se positionner dans le projetcd angular-starter # Exécuterng serve # Exécuter et lancer automatiquement l'application dans le navigateurng serve -o
Angular CLI via la commande ng serve exécute le projet sur un port par défaut (4200).
Il ne reste qu'à tester le fonctionnement dans un navigateur en lançant l'url suivante.
# Testerhttp://localhost:4200
Set-ExecutionPolicy RemoteSigned
Remarque: Si vous voyez une erreur, ouvrez le terminal en tant qu’administrateur, puis
exécuter la commande:
Adil ENAANAI
Angular 8
Les fichiers du projet
Fichiers utilisés dans le dossier ANGULAR-STARTER
dossier src: C'est le dossier qui contient les principaux fichiers de
code liés à votre application Angular.
dossier app: le dossier app contient les fichiers que vous avez créés
pour les composants de l'application.
app.component.css: ce fichier contient le code des feuilles de style
en cascade pour votre composant d'application.
app.component.html: Ce fichier contient le code html associé au
composant d'application. C'est le fichier modèle utilisé par angular
pour effectuer la liaison de données.
Adil ENAANAI
Angular 8
Les fichiers du projet
Fichiers utilisés dans le dossier ANGULAR-STARTER
app.component.spec.ts: Ce fichier est un fichier de test unitaire
associé au composant Application.
app.component.ts: Il s'agit du fichier de script le plus important
qui inclut la logique de vue derrière le composant.
app.module.ts: C'est également un fichier qui inclut toutes les
dépendances du site Web. Ce fichier permet de définir les modules
à importer, les composants à déclarer et le composant principal à
initialiser. Adil ENAANAI
Angular 8
Angular 8 avec Bootstrap
Installer Bootstrap pour un projet Angular
Exécutez la commande suivante à l'invite de commande:
npm install --save bootstrap
Ajouter un fichier bootstrap.css au projet
Ouvrez le fichier angular.json et ajoutez le fichier bootstrap.min.css dans styles.
"styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"
], Adil ENAANAI
Angular 8
Premier composant
Ouvrer le fichier index.html<!doctype html><html lang="en"><head><meta charset="utf-8"><title>TP1</title><base href="/"><meta name="viewport" content="width=device-width, initial-
scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root>
</body></html>
Le page d’accueil ne contient que la directive
<app-root></app-root>
C’est l’emplacement du
composant principalAdil ENAANAI
Angular 8
Premier composant
Ouvrer le dossier app pour voir les composants de l’application
Cela veut dire que la page « templateUrl »
sera placée dans la directive « app-root »
Adil ENAANAI
Angular 8
Inclusion de composants
Aller vers le fichier app.component.html et modifier son contenu par:
{{title}} est déclarée dans
« app.component.ts » du
composant « app »
<app-child> est le sélecteur
du nouveau composant que
l’on va créer tout de suite par
la commande: ng g c child
Donc, dans « app-child »
on place la page:
« child.component.html »
Adil ENAANAI
Angular 8
Hiérarchie de composants
Soit l’exemple de la page suivante:
Content List
head
Adil ENAANAI
Angular 8
Hiérarchie de composantsSoit l’exemple de la page suivante:
<app-header></app-header><app-content></app-content>
<nav class="nav nav-pills nav-justified"><a class="nav-link active" href="#">Lister</a><a class="nav-link" href="#">Ajouter</a>
</nav>
<app-list></app-list>
Adil ENAANAI
Angular 8
Hiérarchie de composantsSoit l’exemple de la page suivante:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
private persons = [
{id : 1, nom : 'Najmi', age : 25 },
{id : 2, nom : 'Alami', age : 42 }
];
constructor() { }
ngOnInit() { }
}
Adil ENAANAI
Angular 8
Hiérarchie de composantsSoit l’exemple de la page suivante:
<div class="panel panel-primary">
<div class="panel-heading"><h2>Liste des personnes</h2>
</div>
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>Id</th><th>Nom</th><th>Age</th><th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let person of persons">
<td>{{person.id}}</td><td>{{person.nom}}</td><td>{{person.age}}</td>
<td>
<button class="btn btn-danger">Delete</button>
<button class="btn btn-info" style="padding-left:20px">Modifier</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Déclaré dans la classe listComponent
Récupérer les variables du composant courant
Adil ENAANAI
Angular 8
Le routageCréons maintenant les routes dans le fichier « app-routing.module.ts »
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {FormComponent} from './content/form/form.component';
import {ListComponent} from './content/list/list.component';
const routes: Routes = [
{path: '', redirectTo: 'list', pathMatch: 'full'},
{path: 'add', component: FormComponent},
{path: 'list', component: ListComponent}
{path: 'list/details/:id/:nom/:age', component: DetailsComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Passage de paramètres:
id, nom et age vers le
composant Details
Adil ENAANAI
Angular 8
Le routage
<tr *ngFor="let person of pers" ><td>{{person.id}}</td><td>{{person.nom}}</td><td>{{person.age}}</td><td><button class="btn btn-danger">Delete</button> <button class="btn btn-info">Modifier</button> <button class="btn btn-warning"
[routerLink]="['details',person.id,person.nom,person.age]">Détails</button></td>
</tr>
Dans la vue « list », ajouter le bouton « Détails » comme suit:
Les crochets pour le data binding, c.à.d: Il y’a une liaison avec des variables
Ici, on appelle la route ‘details’ aves les paramètres id, nom et age
Adil ENAANAI
Angular 8
Passage de paramètresCréer le composant « details »
<div align="center"><p><b>Détails personne</b></p><table><tr><th>Id</th><td>:{{id}}</td> </tr><tr><th>Nom</th><td>:{{nom}}</td> </tr><tr><th>Age</th><td>:{{age}}</td> </tr>
</table></div>
export class DetailsComponent implements OnInit {id: number;nom: string;age: number;constructor(private route: ActivatedRoute) { }ngOnInit() {// this.route.params.subscribe((params) => {this.id = params.id; })this.id = this.route.snapshot.params.id;this.nom = this.route.snapshot.params.nom;this.age = this.route.snapshot.params.age;console.log(this.route.snapshot.params.id);
}}
Avec snapshot, impossible de modifier la valeur des paramètres, contrairement à subscribe
Adil ENAANAI
Angular 8
Passage de données du parent vers l’enfant
Créez le composant parent suivant
<input type="text" #pcomponent (keyup)="0"/>
<app-child [PData]="pcomponent.value"></app-child>
Le composant enfant est prêt à recevoir la propriété via un décorateur @Input.
Le fichier child.component.ts ressemble à ceci.
import { Component, OnInit, Input } from '@angular/core'; @Component({
selector: 'app-child',templateUrl: './child.component.html',styleUrls: ['./child.component.css'] })
export class ChildComponent implements OnInit { @Input() PData: number;
constructor() { }ngOnInit() { }
}
<h3>Child Component</h3><label>Child Component</label><input type="text" /><p>Value of parent component is: {{ PData }}</p>
Adil ENAANAI
Angular 8
passez la valeur de l'enfant au composant parent.
Dans ce scénario, le composant enfant n'a aucune référence au composant parent. Donc,
dans ce cas, nous devons émettre un événement à partir du composant enfant, et le
composant parent l'écoutera et recevra les données via l'événement
<h3>Child Component</h3><label>Child Component</label><input type="text" #ccomponent (keyup)="onChange(ccomponent.value)"/><p>Value of parent component is: {{ PData }}</p>
Écrivez la fonction onChange dans le fichier child.component.ts
export class ChildComponent implements OnInit {@Input() PData: number;@Output() childEvent = new EventEmitter();constructor() { }onChange(value) { this.childEvent.emit(value); }ngOnInit() { }
}
Adil ENAANAI
Angular 8
passez la valeur de l'enfant au composant parent.
Utilisez une liaison d'événement dans le fichier parent.component.html et écoutez
l'émetteur d'événement.
<app-child [PData]="pcomponent.value" (childEvent)="CData=$event"></app-child>
Nous devons définir CData dans le fichier parent.component.ts .
<h3>Parent Component</h3><input type="text" #pcomponent (keyup)="0"/><p>Value of child component is: {{ CData }}</p><app-child [PData]="pcomponent.value" (childEvent)="CData=$event"></app-child>
export class ParentComponent implements OnInit {public CData: number;constructor() { }ngOnInit() {}
}
Adil ENAANAI
Angular 8
Les servicesDans notre application en cours, nous avons passé trois paramètres au
composant « détails » pour qu’il puisse les afficher. Certainement, cette
méthode n’est pas du tout utilisée par les développeurs.
La meilleure méthode est de passer seulement l’id et récupérer les autres
attributs.
Mais, comment récupérer les données d’un autre composant?
Adil ENAANAI
Angular 8
Les servicesLes services offrent une interface d’interaction entre les différents
composants. Dans notre application, il faut ajouter un service qui va
s’occuper de l’interface entre les composants et les données.export class PersonneService {
personnes = [ {id : 1, nom : 'Najmi', age : 25 },{id : 2, nom : 'Alami', age : 42 }];
constructor() { }getpersonne(id) { return this.personnes.find(e => e.id === +id); }
deletepersonne(id: number) {this.personnes.splice(this.personnes.findIndex(e => e.id === +id), 1);
}addpersonne(id: number, nom: string, age: number) {this.personnes.push({id, nom, age });
}getlistepersonnes() {return this.personnes; }
}
Tableau de données
Récupérer une personne
Supprimer une personne
Ajouter une personne
Récupérer toutes une personneRemarque: le + avant id permet de convertir en number
Adil ENAANAI
Angular 8
Consommation de services
Le composant Form (ajouter une personne)
export class FormComponent implements OnInit {constructor(private servicepersonne: PersonneService) { }
addpersonne(id: number, nom: string, age: number) {this.servicepersonne.addpersonne(id, nom, age);
}
ngOnInit() {}
}
La méthode « addpersonne » de composant « Form » appelle la méthode
« addpersonne » du service « servicepersonne » Injection du service
consommation du service
Adil ENAANAI
Angular 8
Consommation de services
Le composant Form (ajouter une personne)
<form class="text-center border border-light p-5" action="list"><p class="h4 mb-4">Nouveau personne</p><input type="text" #id class="form-control mb-4" placeholder="Id"><input type="text" #nom class="form-control mb-4" placeholder="Nom"><input type="text" #age class="form-control mb-4" placeholder="Age"><button class="btn btn-info btn-block" type="button"
(click)="addpersonne(+id.value, nom.value, +age.value)" routerLink="/list">Ajouter</button>
</form>
Appel de la méthode « addpersonne » du composant « Form »
Adil ENAANAI
Angular 8
Consommation de services
Le composant List (Supprimer une personne)
export class ListComponent implements OnInit {private personnes;constructor(private servicepersonne: PersonneService) {}ngOnInit() {this.personnes = this.servicepersonne.getlistepersonnes();
}supprimer(id) {if (confirm('Vous êtes sûr d\'avoir supprimer l\'élément')) {
this.servicepersonne.deletepersonne(id);}
}}
consommation du service: récupérer la liste des personnes
consommation du service: suppression d’une personnes
Adil ENAANAI
Angular 8
Consommation de services
Le composant List (Supprimer une personne)
<tr *ngFor="let person of personnes" ><td>{{person.id}}</td><td>{{person.nom}}</td><td>{{person.age}}</td><td><button class="btn btn-danger" (click)="supprimer(person.id)">Delete</button>
<button class="btn btn-info" (click)="modifier(person.id)">Modifier</button>
<button class="btn btn-warning" [routerLink]="['details',person.id]">Détails</button></td>
</tr>
Appel de la méthode « supprimer » du composant « List »
La route « details » avec le paramètre id
Adil ENAANAI
Angular 8
Consommation de services
Le composant Détail (afficher une personne)
export class DetailsComponent implements OnInit {id: number;nom: string;age: number;constructor(private servicepersonne: PersonneService, private route: ActivatedRoute) { }ngOnInit() {// this.route.params.subscribe((params) => {this.id = params.id; })this.id = this.route.snapshot.params.id;const pers = this.servicepersonne.getpersonne(this.id);this.nom = pers.nom;this.age = pers.age;
}}
Récupérer les données de la personne
Adil ENAANAI
Angular 8
Consommation de services
Le composant Détail (afficher une personne)
<div align="center"><p><b>Détails personne</b></p><table><tr><th>Id</th><td>:{{id}}</td> </tr><tr><th>Nom</th><td>:{{nom}}</td> </tr><tr><th>Age</th><td>:{{age}}</td> </tr>
</table></div>
Adil ENAANAI
Angular 8
Consommation de services
Modifier une personne
Pour modifier une personne, nous devons créer un nouveau composant qui montre
l’interface suivante:
Mais, pourquoi ne pas utiliser le composant « form » déjà utilisé pour ajouter une
personne?
Il suffit de cacher la zone de texte « id » et de modifier le texte du bouton et du titre.
Adil ENAANAI
Angular 8
Consommation de services
Modifier une personne - La vue HTML -
<form class="text-center border border-light p-5" action="list"><p [innerHTML]="titre" class="h4 mb-4"></p><input type="text" #id class="form-control mb-4" placeholder="Id" [hidden]="hidden"
[value]="bid"><input type="text" #nom class="form-control mb-4" placeholder="Nom" [value]="bnom"><input type="text" #age class="form-control mb-4" placeholder="Age" [value]="bage"><button [innerHTML]="action" class="btn btn-info btn-block" type="button"
(click)="actionperson(action,+id.value, nom.value, +age.value)" routerLink="/list"></button></form>
Property binding titre est un attribut du composant « form » Property binding
Property binding action est un attribut du composant « form »
Méthode à deux rôles « Ajouter et modifier »
Adil ENAANAI
Angular 8
export class FormComponent implements OnInit {action = 'Ajouter'; titre = 'Ajouter personne'; hidden = false;bid = ''; bnom = ''; bage = '';constructor(private servicepersonne: PersonneService, private route: ActivatedRoute) { }actionperson(action: string, id: number, nom: string, age: number) {if (action === 'Ajouter') {this.servicepersonne.addpersonne(id, nom, age); } else {this.servicepersonne.updatepersonne(id, nom, age); }
}ngOnInit() {
const id = this.route.snapshot.params.id;if (id !== undefined) {const pers = this.servicepersonne.getpersonne(id);this.bid = pers.id.toString();this.bnom = pers.nom;this.bage = pers.age.toString();this.hidden = true; this.action = 'Modifier'; this.titre = 'Modifier personne';}
}}
Consommation de services
Modifier une personne - La classe FormComponent-
Si l’Id est définit, on récupère
la personne et on affiche ses
donnéesAdil ENAANAI
Angular 8
Consommation de services
Modifier une personne - La classe ListComponent-
<tr *ngFor="let person of personnes" ><td>{{person.id}}</td><td>{{person.nom}}</td><td>{{person.age}}</td><td><button class="btn btn-danger" (click)="supprimer(person.id)">Delete</button> <button class="btn btn-info"
[routerLink]="['/update',person.id]">Modifier</button> <button class="btn btn-warning"
[routerLink]="['details',person.id]">Détails</button></td>
</tr>
On appelle la route « /update » avec le paramètre « id »
Adil ENAANAI
Angular 8
Consommation de services
Modifier une personne - Le fichier app-routing.module.ts -
const routes: Routes = [{path: '', redirectTo: 'list', pathMatch: 'full'},{path: 'add', component: FormComponent},{path: 'list', component: ListComponent},{path: 'list/details/:id', component: DetailsComponent},{path: 'update/:id', component: FormComponent}
];
N’oublier pas d’ajouter la route « update/:id »
updatepersonne(id: number, nom: string, age: number) {this.personnes[this.personnes.findIndex(e => e.id === +id)] = {id, nom, age};
}
Ajouter la méthode suivante au serviceAdil ENAANAI