qu'est ce qu'angular? adil enaanailecurseur.e-monsite.com/medias/files/angular8.pdf ·...

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

https://nodejs.org/fr/

Angular 8


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


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


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

https://code.visualstudio.com/

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

https://cli.angular.io/

https://github.com/angular/angular-cli/wiki

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


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


<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


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


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


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


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


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


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


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';}

}}


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


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


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

qu'est ce qu'angular? adil enaanailecurseur.e-monsite.com/medias/files/angular8.pdf ·...

Documents