SlideShare une entreprise Scribd logo
Développement Framework coté client
Enseignant : Nizar MAATOUG
Institut Supérieur des Études Technologiques de Sidi Bouzid
2019/2020
Nizar MAATOUG2
Résultats
À la fin de ce module, vous serez en mesure de :
 Maîtriser l’architecture et les concepts du Framework Angular
 Développer des applications Angular
Nizar MAATOUG3
Structure
Notion de Framework
Introduction au Framework Angular
les langages de programmation utilisés par Angular
Architecture du framework Angular
Démarrer avec Angular
Structure d’un projet Angular
Les composants
Liaison de données (Data Binding)
Les directives
Interaction entre composants
Routage et navigation
Les services
HTTP et les Observables
Formulaires Angular (Template Driven Forms & Formulaire Réactif)
Notion de Framework
Nizar MAATOUG5
Notion de Framework
Un Framework désigne un ensemble cohérent de composants logiciels
structurels
Un Framework sert à créer les fondations ainsi que les grandes lignes de
tout ou d’une partie d'un logiciel (architecture).
composant 1 composant 2 composant n
Framework
Introduction au Framework Angular
Nizar MAATOUG7
Introduction au framework Angular
 Angular Permet de créer la partie Front-End des applications web de
type SPA (Single Page Application)
 Une SPA est une application qui contient une seule page HTML
 La seule page contient différents composants web.
Nizar MAATOUG8
Langages
HTML pour les vues
CSS pour les styles
TypeScript pour les scripts à partir de la version 2
Nizar MAATOUG9
TypeScript
langage de programmation orienté objet
open source
influencé par C# et JavaScript
Développé et présenté par MicroSoft en 2012
il permet de :
typer les variables
définir des classes et des interfaces
utiliser les annotations (les décorateurs)
exporter et importer des modules
Nizar MAATOUG10
Evolution
Angular 1 (ou AngularJS) présenté en 2009 :
 Première version de Angular.
 Elle est basée sur une architecture MVC coté client.
 Les applications Angular 1 sont écrite en JavaScript.
Angular 2 présenté en octobre 2014 :
 Réécriture de Angular 1
 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
Componenet)
 remplacement du JavaScript par TypeScript
Angular 4, 5, 6, 7, 8 sont de simples mises à jour de Angular 2
Architecture du Framework Angular
Nizar MAATOUG12
Architecture du framework Angular
Root component
Component 1
Component 2
Component21
Component 22
Architecture du framework Angular
Nizar MAATOUG13
Root Component
Component 1 Component 2
Component 22Component 21
Architecture du framework Angular
Nizar MAATOUG14
Nizar MAATOUG15
Architecture du framework Angular
Une application Angular se compose de :
Un à plusieurs modules dont un est principal.
Chaque module peut inclure :
Des composant web : La partie visible de l‘application Web (IHM)
Des services pour la logique applicative.
Nizar MAATOUG16
Architecture du framework Angular
Démarrer avec Angular
Nizar MAATOUG17
Nizar MAATOUG18
Démarrer avec Angular
https://angular.io/guide/setup-local
Nizar MAATOUG19
Installation des outils
1. NodeJS : https://nodejs.org/en/download/
NodeJS installe l’outil npm (Node Package Manager) qui permet de télécharger
et installer des bibliothèques JavaScript.
2. Installer ensuite Angular CLI (Command Line Interface) qui vous
permet de générer, compiler, tester et déployer des projets angular
(https://cli.angular.io/ ) :
npm install -g @angular/cli
Nizar MAATOUG20
Nouveau projet Angular
Pour générer la structure d’un projet Angular, on utilise Angular CLI via sa
commande ng suivie des options new et le nom du projet.
ng new FirstApp
Cette commande génère les différents fichiers requis par une application
basique Angular et installe aussi toutes les dépendances requise par ce
projet.
Nizar MAATOUG21
Exécuter un projet Angular
Pour excuter un projet Angular, on exécute la
commande suivante à partir de la racine du
projet
ng serve
Cette commande compile le code source du
projet pour transpiler le code TypeScript en
JavaScript et en même temps démarre un
serveur Web local basé sur NodeJS pour
déployer l’application localement.
Pour tester le projet généré, il suffit de lancer
le Browser et taper l’url :
http:// localhost:4200
Nizar MAATOUG22
Edition du projet
Plusieurs IDE professionnels peuvent être utilisés pour éditer le code:
Web Storm
Visual Studio Code
Eclipse avec plugin Angular
D’autres éditeurs classiques peuvent être aussi utilisé :
Atom
Sublime Text
…
Structure d’un projet Angular
Nizar MAATOUG23
Structure d’un projet Angular
Nizar MAATOUG24
Fichiers de test end to end de l’application
Dépendances externes du projet (Librairies javaScripts et css)
Logique applicative du projet (Modules, composants,
services,…)
Code source du projet
Fichiers de configuration du projet
Structure d’un projet Angular
Nizar MAATOUG25
Sélecteur du root component
Structure d’un projet Angular
Nizar MAATOUG26
Les composants @Component
Nizar MAATOUG27
Les composants
Chaque composant se compose de:
Un classe représentant sa logique métier
Une template HTML: représentant sa vue
Une feuille de style css
Un fichier de test unitaire
Nizar MAATOUG28
Création de nouveaux composants
• Pour créer facilement des composants Angular, on peut utiliser la
commande ng comme suit :
ng generate component NomComposant
• Dans notre exemple, nous allons créer deux composants : about et
contacts
29 Nizar MAATOUG
Les composants: Détails
Nizar MAATOUG30
Décorateur: indique à Angular
que cette classe joue le rôle
d’un composant avec:
•Un sélecteur ‘app-about’
•Un template HTML
‘./about.component.html’
•Un seul fichier de style css
‘./about.component.css’
Déclaration d’un composant
Un composant doit être déclaré dans un module
Nizar MAATOUG31
Utilisation d’un composant
 Un composant peut être inséré dans n’importe quel partie HTML de
l’application en utilisant son sélecteur
 Dans cet exemple, les deux composants about et contacts sont
insérés à l’intérieur du composant racine AppComponent
Nizar MAATOUG32
AppComponent
about contacts
Liaison de données (Data Binding)
Nizar MAATOUG33
Data Binding
• Permet de faire un lien entre les données de la classe du composant
et son Template associé
Nizar MAATOUG34
Classe du composant Template du composant
data string interpolation {{data}}
property Binding <…[property]="data" …
doSome(){
…..
}
<… (click)="doSome()"Event Binding
<input [(ngModel)]="data"Two Ways Data Binding
Data Binding: Exemple
Nizar MAATOUG35
Data Binding: Exemple
Nizar MAATOUG36
importer FormsModule pour ngModel
Nizar MAATOUG37
Les Directives
Les directives
Il existe deux types de directives:
 Les directives structurelles: Elles ont pour but de modifier le DOM en
ajoutant, enlevant ou replaçant un élément du DOM.
 Les attribute directives: Elles ont pour but de modifier l'apparence ou le
comportement d'un élément.
Nizar MAATOUG39
Les directives strucurelles
 ngIf
 ngSwitch
 ngFor
Nizar MAATOUG40
Directive ngIf
 Permet de supprimer ou de recréer l'élément courant suivant
l'expression passée en paramètre
 Exemple:
<div *ngIf="1 > 0"> Afficher la div</div>
<div *ngIf="1 < 0"> N’affiche pas la div</div>
Nizar MAATOUG41
Directive ngIf (if else)
<div *ngIf="afficherNom; else elseBlock">
Nizar MAATOUG
</div>
<ng-template #elseBlock>
******
</ng-template>
Nizar MAATOUG42
Directive ngIf (if else)
<div *ngIf="afficherNom;then thenBlock; else elseBlock"></div>
<ng-template #thenBlock>
Nizar MAATOUG
</ng-template>
<ng-template #elseBlock>
******
</ng-template>
Nizar MAATOUG43
Directive ngSwitch
<div [ngSwitch]="couleur">
<div *ngSwitchCase="'rouge'">couleur rouge</div>
<div *ngSwitchCase="'bleu'">couleur bleu</div>
<div *ngSwitchCase="'vert'">couleur vert</div>
<div *ngSwitchDefault>choisir une couleur</div>
</div>
Nizar MAATOUG44
Directive ngFor
Nizar MAATOUG45
export class TestComponent implements OnInit {
public couleurs = ['rouge', 'vert', 'bleu'];
constructor() { }
ngOnInit() {
}
}
Liste des couleurs:
<div *ngFor="let c of couleurs">
{{c}}
</div>
Les attribute directives
ngStyle
 permet de modifier le style d’un élément HTML
 s’utilise conjointement avec le property binding pour récupérer des
valeurs définies dans la classe
Nizar MAATOUG47
public styleCorrect={'background-color':'green'};
<div [ngStyle]="styleCorrect">Réponse<div>
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
Nizar MAATOUG48
<div [ngClass]="{'text-success':question.isCorrect}">Réponse</div>
Questions
1) Quelle est la commande CLI qui permet de créer un nouveau
component ?
 ng new nom-composant
 ng generate nom-composant
 Ng build nom-composant
La commande ng generate permet de créer de nouveaux éléments
(components, services etc.) dans un projet existant. ng new crée un
nouveau projet ; ng build crée le package global d'un projet terminé.
Nizar MAATOUG49
Questions
2) Si vous avez une variable name = ‘Nizar' dans votre code
TypeScript, quelle syntaxe utilisez-vous pour
afficher Nizar dans le template ?
 les doubles accolades {{ }}
 les crochets [ ]
 les parenthèses ( )
Les doubles accolades {{}} correspondent au string interpolation,
permettant d'afficher le résultat d'une expression TypeScript dans le
template — ici, une variable.
Nizar MAATOUG50
Questions
3) Vous souhaitez qu'un bouton de votre template déclenche une
fonction dans votre TypeScript : quelle syntaxe utilisez-vous
pour l'y lier ?
 (onClick)
 (click)
 [click]
En effet, pour lier à l'événement click d'un élément, on utilise la
syntaxe (click) .
Nizar MAATOUG51
Questions
4) Pour qu'un bouton soit désactivé quand la
valeur authenticated est false , quelle syntaxe devez-vous
utiliser ?
 <button disabled="!authenticated">
 <button (disabled)="!authenticated">
 <button [disabled]="!authenticated">
Il faut utiliser les crochets [ ] pour lier l'expression
conditionnelle à la propriété disabled du bouton.
Nizar MAATOUG52
Questions
5) Dans quels cas ce paragraphe apparaîtra dans le DOM ?

<p *ngIf="myCondition">Bonjour !</p>
(Plusieurs réponses sont possibles)
 myCondition = false;
 myCondition = true;
 myCondition: string;
 myCondition: boolean;
 myCondition = "aucune condition";
Un élément qui comporte la directive *ngIf s'affiche si la condition
donnée est une expression conditionnelle qui retourne true .
Nizar MAATOUG53
Questions
6) Quelle directive vous permet d'afficher autant de
components <app-draw> qu'il y a de membres dans
l'array drawings ?
 <app-draw *ngIf="drawings">
 <app-draw *ngFor="let drawing of drawings">
 <app-draw *ngFor="for drawing in drawings">
 <app-draw *ngFor="drawings">
La directive *ngFor s'emploie comme un for loop classique :
on utilisera donc let … of … .
Nizar MAATOUG54
Interaction entre composants
Nizar MAATOUG55
Interaction entre composants
Nizar MAATOUG56
Composant parent
Composant fils
Data
@Input()
Data
@Output()
Exemple
Nizar MAATOUG57
Composant parent
Bonjour Monsieur
Composant fils
Bonjour Mohamed
Nom (Mohamed)
Bonjour Monsieur
Exemple (parent ->fils)
Nizar MAATOUG58
Exemple (parent ->fils)
Nizar MAATOUG59
Exemple (parent ->fils)
Nizar MAATOUG60
Exemple (fils -> parent)
Nizar MAATOUG61
Exemple (fils -> parent)
Nizar MAATOUG62
Résultat
Nizar MAATOUG63
Navigation Angular: Routage et Navigation
Routage et Navigation
 Une application Angular contient plusieurs composants,
 Chaque composant possède une vue (template)
 Il faut pouvoir naviguer entre les vues quand l’utilisateur réalise une
action.
Nizar MAATOUG65
Cas d’utilisation: Routage et Navigation
Nizar MAATOUG66
Localhost:4200
Routing navigation
Départements Employés
localhost:4200/departements
localhost:4200/employes
Démarche
1) Générer un projet Angular avec l’option routing
2) Générer les composants departementList et emplyesList
3) Configurer les routes
4) Ajouter les boutons et utiliser les directives pour naviguer.
Nizar MAATOUG67
Création du projet avec l’option routing
Nizar MAATOUG68
Ajout du routing à un projet existant
Nizar MAATOUG69
Importer le module Routing
Nizar MAATOUG70
Ajouter la balise <base href="/"> dans index.html
Nizar MAATOUG71
Ajouter la directive <router-outlet>
Nizar MAATOUG72
Générer les composants
ng generate component departementList
ng generate component emplyestList
Nizar MAATOUG73
Ajouter les routes
Nizar MAATOUG74
Bonne pratique
Nizar MAATOUG75
Bonne pratique
Nizar MAATOUG76
Bonne pratique
Nizar MAATOUG77
Navigation
Nizar MAATOUG78
Route de Redirection
 Très souvent, un utilisateur essaye de naviguer vers une route qui
n’est pas configurée.
 Cela génère une exception.
Nizar MAATOUG79
Solution: rediriger les routes inexistantes
vers un composants « not found »
Composant PageNotFoundComponent
Nizar MAATOUG80
Composant PageNotFoundComponent
Nizar MAATOUG81
Route par défaut
Nizar MAATOUG82
Routes avec paramètres
Nizar MAATOUG83
1) Technologies de L’informatique
2) Électrique
3) Mécanique
4) Gestion
DepartementList
Vous avez sélectionné le
département avec l’id= 1
DepartementDetails
id
Démarche
Générer un composant DepartementDetails
Configurer le routage avec paramètres vers DepartementDetails
Dans le composant DepartementList, programmer la navigation vers DepartementDetails
Dans le composant DepartementDetails, extraire l’id de la route active.
Nizar MAATOUG84
Générer DepartementDetails
ng generate component departementDetails
Nizar MAATOUG85
Configurer la route avec paramètre id
Nizar MAATOUG86
Programmer la navigation: Service Router
Nizar MAATOUG87
Injecter le service de
routage Router
Programmer la navigation: Service Router
Nizar MAATOUG88
Programmer la navigation: Service Router
Nizar MAATOUG89
DepartementDetails: Extraire le param id
Nizar MAATOUG90
Les Services
Problématique
Nizar MAATOUG92
Inconvénients
Les données sont codés en dur.
Les données sont dupliquées dans les deux composants
Forte possibilité d’incohérence de données
Ajout de responsabilité aux composants (gestion des données)
Nizar MAATOUG93
Solution
 Déporter les données dans un service.
Les services sont conçus pour offrir des données et/ou des fonctionnalités
partagées entre plusieurs composants ou modules:
Partage de données
Partage de fonctions (exemple calcul d’age)
Connexion réseau et mise à jour des données persistantes avec un
service.
Nizar MAATOUG94
Nouveau Service
ng generate service employs
Nizar MAATOUG95
Service employs
Nizar MAATOUG96
Mise à jour du composant Employs-list
Nizar MAATOUG97
Mise à jour du composant Employs-list-details
Nizar MAATOUG98
Nouvelle architecture
Nizar MAATOUG99
Employs-list-componentEmploys-list-Details-component
Employs-Service
Nouvelle architecture
Nizar MAATOUG100
Employs-list-component
Injector
: ES constructor(private employsService: EmployesService) {
}
: ES
Employs-list-details-component
constructor(private employsService: EmployesService) {
}
: ES
HTTP et les Observables
HTTP
Une application Angular est SPA (Single Page Application)
Une application Angular s’exécute coté client
Elle doit pouvoir se connecter à un serveur pour synchroniser les
données métier (demander liste de voitures, ajouter nouveau client,
modification, suppression d’une entité métier,….).
Nizar MAATOUG102
HTTP: Mécanisme
Nizar MAATOUG103
Navigateur web
EmloyeList
EmloyeDetails
EmloyeService Http
Get
Observable
Serveur
requête
réponse
DB
Les Observables: programmation Réactive
La programmation réactive se base sur le concept d'observateur.
Nizar MAATOUG104
Observable
Source de données,
flux de données
EmployeList EmployeDetails Composant…
notification
notification
Programmation réactive
Avantages:
• Asynchrone
• non bloquante
• Interface graphique plus fluide
Application:
• Data binding
• Gestion des événements
RxJS (Reactive Extentions for JavaScript) est la bibliothèque JavaScript
pour la programmation réactive
Nizar MAATOUG105
HTTP, Observables et RxJS: Démarche
1. Définir une requête HTTP GET de EmployeService
2. Recevoir un observable, convertir le flux de données en un tableau
d’employés (casting)
3. Abonner les deux composants EmployeList et EmployeDetails à cet
observable
Nizar MAATOUG106
Importer HttpClientModule
Nizar MAATOUG107
Déporter les données dans un fichier JSON
Nizar MAATOUG108
Définir le type IEmploye
Nizar MAATOUG109
Mettre à jour EmployeService
Nizar MAATOUG110
Mettre à jour EmployeService
Nizar MAATOUG111
Type de retour:
Observable d’Employé
Appel GET au service web en spécifiant
l’url. le type de retour est spécialisé à
Employee
Abonner les composants EmployeList et EmloyeDetails à l’observable
Nizar MAATOUG112
Abonner les composants EmployeList et EmloyeDetails à l’observable
Nizar MAATOUG113
Retourne un
observable d’employés
Abonnement au flux de
l’observable
Traitement du flux par
une fonction lambda
Formulaires Angular
Angular Forms
Angular Forms
Nizar MAATOUG115
Template Class Service Server
Collecter
les données
Bind Data Envoyer les
données
Traiter/sauvegarder
les données
Angular Forms
Un moyen d’interaction avec l’utilisateur
Manipuler les données de l’application:
Ajout, modification de données métiers
En Angular, il y a deux grandes méthodes pour créer des formulaires :
• la méthode template : vous créez votre formulaire dans le template, et
Angular l'analyse pour comprendre les différents inputs et pour en
mettre à disposition le contenu
• la méthode réactive : vous créez votre formulaire en TypeScript et
dans le template, puis vous en faites la liaison manuellement — cette
approche est plus complexe, mais elle permet beaucoup plus de
contrôle et une approche dynamique.
Nizar MAATOUG116
Template Driven Forms
Nouveau projet
ng new TDForms
Nizar MAATOUG118
Ajouter Bootstrap
Nizar MAATOUG119
Copier le lien du CDN
Bootstrap
Ajouter Bootstrap
Nizar MAATOUG120
Coller le lien dans index.html
Formulaire inscription
Nizar MAATOUG121
Formulaire inscription
Nizar MAATOUG122
AppModule: importer FormsModule
Nizar MAATOUG123
Directive ngForm
Angular associe à chaque formulaire une directive ngForm pour suivre
son état:
• Valeurs des contrôles du formulaire
• Les valeurs sont valides ou non.
Nizar MAATOUG124
Directive ngForm
Nizar MAATOUG125
Directive ngModel: identifier les contrôles à suivre
Nizar MAATOUG126
Attribut "name" pour chaque contrôle du formulaire
Nizar MAATOUG127
Résultat
Nizar MAATOUG128
Directive ngModelGroup
Permet de regrouper un ensemble de contrôle dans un seul objet
Exemple: une adresse est composée d’une ville, rue et numéro maison
Nizar MAATOUG129
Directive ngModelGroup
Nizar MAATOUG130
Data Binding: générer la classe du modèle
Générer la classe de modèle: Etudiant
Nizar MAATOUG131
Data Binding: instancier le modèle
Nizar MAATOUG132
Data Binding: ngModel
Nizar MAATOUG133
Résultat
Nizar MAATOUG134
Suivi de l’état et de la validité du formulaire
L'utilisation ngModel dans un formulaire offre plus qu'une simple liaison de
données bidirectionnelle
elle indique également si l'utilisateur a touché le contrôle, si la valeur a changé ou
si la valeur est devenue invalide
elle met à jour aussi le contrôle avec des classes CSS Angular spéciales qui
reflètent son état.
Nizar MAATOUG135
Suivi de l’état et de la validité du formulaire
Nizar MAATOUG136
Suivi de l’état et de la validité du formulaire
Nizar MAATOUG137
Appliquer les classes CSS
Deux solutions sont possibles:
1- Définir les classes .ng-valid,…:
2- Utiliser vos propres classes:
Nizar MAATOUG138
Appliquer les classes CSS
Nizar MAATOUG139
Obtenir la référence de ngModel
Appliquer la classe is-invalid de
Bootstrap si le contrôle est invalide
et il est déjà touché
Afficher un message d’erreur
Nizar MAATOUG140
Le message sera affiché si le
contrôle est invalide et il est déjà
touché
Validation du formulaire
Nizar MAATOUG141
Soumettre le formulaire: ngSubmit
Nizar MAATOUG142
Event-binding de l’attribut ngSubmit
de la directive ngForm
Soumettre le formulaire: ngSubmit
Nizar MAATOUG143
Formulaire réactif: Reactive Forms
Reactive Forms
• La grande partie du code réside dans la classe du composant
• Adapté aux scénarios complexes
• Des contrôles de formulaires dynamique
• Validation dynamique
• Test unitaire
Nizar MAATOUG145
Résultat
Nizar MAATOUG146
Définition de la classe modèle: User
Nizar MAATOUG147
Attribut optionnel de type Array
Importer ReactiveFormsModule
Nizar MAATOUG148
FormGroup et FormControl
Nizar MAATOUG149
Nom
Email
FormControl
FormControl
FormGroup
Un formulaire réactif est de type FormGroup et il regroupe plusieurs FormControl
FormBuilder
Nizar MAATOUG150
FormBuilder est une classe qui vous met à disposition des méthodes facilitant
la création d'objet FormGroup
Nizar MAATOUG151
Nizar MAATOUG152
Formulaire d’inscription
Nizar MAATOUG153
Formulaire d’inscription
Nizar MAATOUG154
La validation: Validators
Nizar MAATOUG155
La classe Validators permet de valider un formulaire réactif
La validation: Validators
Nizar MAATOUG156
FormControl dynamique
Objectif: ajouter dynamiquement des contrôles hobby
FormArray: permet de définir un tableau de FormControl
Nizar MAATOUG157
Définir un tableau de
hobbies, initialement vide
FormControl dynamique
Nizar MAATOUG158
Définir une fonction qui
rajoute dynamiquement
un hobby au formulaire
FormControl dynamique
Nizar MAATOUG159
FormControl dynamique
Nizar MAATOUG160
FormControl dynamique
Nizar MAATOUG161
Résultat
Nizar MAATOUG162

Contenu connexe

Tendances

Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
Jaouad Assabbour
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
Aymen Sellaouti
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
Cynapsys It Hotspot
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
Antoine Rey
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
Lilia Sfaxi
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
ENSET, Université Hassan II Casablanca
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
ENSET, Université Hassan II Casablanca
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
Jaouad Assabbour
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
Youness Boukouchi
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
ENSET, Université Hassan II Casablanca
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
ENSET, Université Hassan II Casablanca
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
aliagadir
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 

Tendances (20)

Angular.pdf
Angular.pdfAngular.pdf
Angular.pdf
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Présentation Angular 2
Présentation Angular 2 Présentation Angular 2
Présentation Angular 2
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Android-Tp5 : web services
Android-Tp5 : web servicesAndroid-Tp5 : web services
Android-Tp5 : web services
 
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...Mohamed youssfi support architectures logicielles distribuées basées sue les ...
Mohamed youssfi support architectures logicielles distribuées basées sue les ...
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
React-cours.pdf
React-cours.pdfReact-cours.pdf
React-cours.pdf
 
Appalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSPAppalications JEE avec Servlet/JSP
Appalications JEE avec Servlet/JSP
 
Spring security
Spring securitySpring security
Spring security
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfiJava entreprise edition et industrialisation du génie logiciel par m.youssfi
Java entreprise edition et industrialisation du génie logiciel par m.youssfi
 
Architecture java j2 ee a partager
Architecture java j2 ee a partagerArchitecture java j2 ee a partager
Architecture java j2 ee a partager
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 

Similaire à Support cours angular

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
imenhamada17
 
Angular 11
Angular 11Angular 11
Angular 11
PapaDjadjigueye
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
BoubakerMedanas
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
Alphorm
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
Renaud Dumont
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
Laurent Duveau
 
Prezentare ASP.Net.pptx
Prezentare ASP.Net.pptxPrezentare ASP.Net.pptx
Prezentare ASP.Net.pptx
Anastasia801190
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
Habib Ayad
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
RadhoueneRouached
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
Publicis Sapient Engineering
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
Aymen Sellaouti
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Tarik Zakaria Benmerar
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
Dekeltv1
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
Safwen Chibeni
 
Angluars js
Angluars jsAngluars js
Angluars js
RYMAA
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
ssuser65180a
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
MOHAMMED MOURADI
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
Atsé François-Xavier KOBON
 

Similaire à Support cours angular (20)

Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Angular 11
Angular 11Angular 11
Angular 11
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Chapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdfChapitre 1-Composants et Modules.pdf
Chapitre 1-Composants et Modules.pdf
 
Alphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentauxAlphorm.com Formation Angular - Les fondamentaux
Alphorm.com Formation Angular - Les fondamentaux
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Prezentare ASP.Net.pptx
Prezentare ASP.Net.pptxPrezentare ASP.Net.pptx
Prezentare ASP.Net.pptx
 
Partie 2: Angular
Partie 2: AngularPartie 2: Angular
Partie 2: Angular
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic LadeuXebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
XebiCon'17 : Entrevue avec Vue.js - Thomas Champion et Ludovic Ladeu
 
Cours 2 les composants
Cours 2 les composantsCours 2 les composants
Cours 2 les composants
 
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
Web Components et Polymer 2 - GDG Algiers DevFest 2016 - 3 Décembre 2016
 
Angular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications WebAngular : Un aperçu du framework de développement d’applications Web
Angular : Un aperçu du framework de développement d’applications Web
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Angluars js
Angluars jsAngluars js
Angluars js
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
#J2Code2018 - Mettez du feu à vos applications avec CodeIgniter
 

Dernier

SYLLABUS DU COURS MARKETING DTS 1-2.pdf
SYLLABUS DU COURS  MARKETING DTS 1-2.pdfSYLLABUS DU COURS  MARKETING DTS 1-2.pdf
SYLLABUS DU COURS MARKETING DTS 1-2.pdf
Moukagni Evrard
 
M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...
M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...
M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...
M2i Formation
 
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
mrelmejri
 
Système de gestion des fichiers de amine
Système de gestion des fichiers de amineSystème de gestion des fichiers de amine
Système de gestion des fichiers de amine
sewawillis
 
Calendrier du 3 juin 2024 et compte rendu.pdf
Calendrier du 3 juin 2024 et compte rendu.pdfCalendrier du 3 juin 2024 et compte rendu.pdf
Calendrier du 3 juin 2024 et compte rendu.pdf
frizzole
 
Edito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdfEdito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdf
WarlockeTamagafk
 
Mémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et auditMémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et audit
MelDjobo
 
Contrôle fiscale en république de guinée
Contrôle fiscale en république de guinéeContrôle fiscale en république de guinée
Contrôle fiscale en république de guinée
bangalykaba146
 
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La JeunesseConseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Oscar Smith
 
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
cristionobedi
 
Iris et les hommes.pptx
Iris      et         les      hommes.pptxIris      et         les      hommes.pptx
Iris et les hommes.pptx
Txaruka
 
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupeCours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
Yuma91
 
Newsletter SPW Agriculture en province du Luxembourg du 03-06-24
Newsletter SPW Agriculture en province du Luxembourg du 03-06-24Newsletter SPW Agriculture en province du Luxembourg du 03-06-24
Newsletter SPW Agriculture en province du Luxembourg du 03-06-24
BenotGeorges3
 
Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"
Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"
Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"
IES Turina/Rodrigo/Itaca/Palomeras
 
Exame DELF - A2 Francês pout tout public
Exame DELF - A2  Francês pout tout publicExame DELF - A2  Francês pout tout public
Exame DELF - A2 Francês pout tout public
GiselaAlves15
 

Dernier (15)

SYLLABUS DU COURS MARKETING DTS 1-2.pdf
SYLLABUS DU COURS  MARKETING DTS 1-2.pdfSYLLABUS DU COURS  MARKETING DTS 1-2.pdf
SYLLABUS DU COURS MARKETING DTS 1-2.pdf
 
M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...
M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...
M2i Webinar - « Participation Financière Obligatoire » et CPF : une opportuni...
 
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
Impact des Critères Environnementaux, Sociaux et de Gouvernance (ESG) sur les...
 
Système de gestion des fichiers de amine
Système de gestion des fichiers de amineSystème de gestion des fichiers de amine
Système de gestion des fichiers de amine
 
Calendrier du 3 juin 2024 et compte rendu.pdf
Calendrier du 3 juin 2024 et compte rendu.pdfCalendrier du 3 juin 2024 et compte rendu.pdf
Calendrier du 3 juin 2024 et compte rendu.pdf
 
Edito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdfEdito-B1-francais Manuel to learning.pdf
Edito-B1-francais Manuel to learning.pdf
 
Mémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et auditMémoire de licence en finance comptabilité et audit
Mémoire de licence en finance comptabilité et audit
 
Contrôle fiscale en république de guinée
Contrôle fiscale en république de guinéeContrôle fiscale en république de guinée
Contrôle fiscale en république de guinée
 
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La JeunesseConseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
Conseils pour Les Jeunes | Conseils de La Vie| Conseil de La Jeunesse
 
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
Formation Intelligence Artificielle pour dirigeants- IT6-DIGITALIX 24_opt OK_...
 
Iris et les hommes.pptx
Iris      et         les      hommes.pptxIris      et         les      hommes.pptx
Iris et les hommes.pptx
 
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupeCours de conjugaison des verbes du premier, deuxième et troisième groupe
Cours de conjugaison des verbes du premier, deuxième et troisième groupe
 
Newsletter SPW Agriculture en province du Luxembourg du 03-06-24
Newsletter SPW Agriculture en province du Luxembourg du 03-06-24Newsletter SPW Agriculture en province du Luxembourg du 03-06-24
Newsletter SPW Agriculture en province du Luxembourg du 03-06-24
 
Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"
Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"
Evaluación docentes "Un cielo, dos países: El camino de los descubrimientos"
 
Exame DELF - A2 Francês pout tout public
Exame DELF - A2  Francês pout tout publicExame DELF - A2  Francês pout tout public
Exame DELF - A2 Francês pout tout public
 

Support cours angular