SlideShare une entreprise Scribd logo
1  sur  51
Télécharger pour lire hors ligne
Pr. Habib Ayad
Enseignant chercheur à l’université Hassan II de Casablanca
Laboratoire d’informatique de Mohammedia
Faculté des Sciences et Techniques Mohammedia
Développement des applications
web-mobile
Pr. Habib Ayad 1
ttps://angular.io/
Pr. Habib Ayad 2
Front-end Back-end
SGBD
http
Pr. Habib Ayad 3
 Angular est une plate-forme et Framework pour créer des
applications coté client (Front-end) de type SPA (single-page
applications ou application monopage html) en utilisant HTML et
TypeScript.
Pr. Habib Ayad 4
Site SPA Site sans Framework SPA
ServeurClient
Requête initiale
HTML
POST
HTML
Serveur
Rechargement
de toute
la page
Client
Rechargement
d’une seule
partie
la page
Requête initiale
HTML & JavaScript
AJAX
JSON
• Composé de plusieurs pages
• Le navigateur recharge et affiche chaque
page demandée par le client
• Composé d’une seule page html
(index.html)
• Le navigateur recharge une partie de la page
en exécutant un script.
• Le contenu dynamique est envoyé par le
serveur sous format JSON suite à une
requête AJAX.
Pr. Habib Ayad 5
 En 2010, la première version d’AngularJS est lancée, et il permet de
créer plus facilement des SPA, mais souffre d'une syntaxe plutôt
complexe ainsi que des limitations du JavaScript.
 À partir de la version 2 Google choisit de complètement réécrire le
Framework et depuis porte le nom Angular et non AngularJS
 Versions: 2,4,5,…et actuellement on est à la version 10.x (2020)
Pr. Habib Ayad 6
AngularJS Angular
 Assez proche au design
pattern MVC coté javascript
 Utilise javascript
 Basé sur les composants
(web component)
 Utilise TypeScript:langage
transmpilé (traduit en
javascript)
En resumé Angularjs & Angular sont deux framework tout à
fait différents
Pr. Habib Ayad 7
 Angular est créé avec le langage TypeScript
 TypeScript est un langage de programmation orienté objet coté client,
très récent, créé par Microsoft en 2012 afin de faire extension à
JavaScript.
 TypeScript est un langage transmpilé en JavaScript. C.à.d. après écrire un
code en TypeScript un compilateur va convertir le code en JavaScript ainsi
tous les navigateurs peuvent comprendre et interpréter ce code.
 https://www.typescriptlang.org/
Pr. Habib Ayad 8
 Pour pouvoir développer des applications Angular, installer les outils
suivants:
 NODE.JS
 NPM
 ANGULAR/CLI
Pr. Habib Ayad 9
Installation:
npm install -g @angular/cli
Créer un nouveau projet:
ng new my-app --routing
Lancer l’app sur le serveur:
ng serve --open
Pr. Habib Ayad 10
• Dossier e2e : Fichiers de configuration du projet
• Dossier node_module :Dépendances externes du projet
(Bootstrap css js, JQuery, Chartjs….)
• Dossier app: c’est le dossier de toute la logique applicative de
votre projet (composants, services,…)
• Dossier assets: Dossier pour les images et autres fichiers pour
votre application
• Dossier environments: Fichiers de configuration comme la
configuration de la production
• Index.html: page html SPA
Pr. Habib Ayad 11
Index.html (SPA)
Pr. Habib Ayad 12
component
Template
html(xxx.component.html)
Logique
(xxx.component.ts)
Css
(xxx.component.css)
Pr. Habib Ayad 13
 AppComponent est le composant racine d’un projet Angular.
Toutes les autres composants du projet sont accessible via
AppComponent
Pr. Habib Ayad 14
 Pour créer un composant executer la commande suivante:
ng generate component <nom_component>
Ou
ng g c <nom_component>
Exemple:
ng g c menu
Pr. Habib Ayad 15
 selector: permet d’indiquer la façon d’insertion du
composant dans le document html
 Exemple:

 comme classe
 comme attribut

Pr. Habib Ayad 16
 Bootstrap
Bootstrap est un Framework CSS et l’un des Framework les plus
utilisés par les développeurs pour styliser les applications web.
 Installation via CLI
npm install --save bootstrap
1. Ouvrez le fichier angular.json et ajouter le chemin de css
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
Pr. Habib Ayad 17
 Jquery & pooper.js
npm install jquery --save
npm install popper.js --save
Ouvrez le fichier angular.json et ajouter le chemin de css
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
Pr. Habib Ayad 18
 Dans index.html avec CDN
https://getbootstrap.com/docs/4.5/getting-started/introduction/
Pr. Habib Ayad 19
 Fontawesome
 https://www.npmjs.com/package/font-awesome
npm i font-awesome
Icons
https://fontawesome.com/v4.7.0/icons/
Exemple:
<i class="fa fa-laptop fa-2x" aria-hidden="true"></i>
Pr. Habib Ayad 20
 Le routage permet de naviguer entre les différentes vues
d’une application web-mobile. L’affichage d’une vue se
déclenche suivant un événement ou action faite par
l’utilisateur (click sur lien, bouton,…).
Pr. Habib Ayad 21
 Créer des routes
 Supposons qu’on a 3 composants: home, cv, about
 Pour créer des routes vers les vues de ces composants, ouvrez
le fichier app-routing.module.ts et dans le tableau routes
ajoutez les routes de la manière suivante:
{path:'la_route',component:Composant_concerné}
Pr. Habib Ayad 22
Pr. Habib Ayad 23
 redirectTo:
L’attribut redirectTo permet de rediriger vers une autre route
path:' ' : Si il n y a pas de route alors
redirection vers la route /home
pathMatch:'full' : signifie que lors du
lancement de l’application , la page par défaut
est la page de la route /home
path:' **' : Si la route n’existe pas dans le
tableau de routage alors redirection vers la
route /home
Pr. Habib Ayad 24
 L’interpolation permet d’incorporer des donnés dans la
template html ce qui permet aussi de dynamiser le contenu de
la vue.
 La variable titre déclarer dans la classe du composant
 À l’aide de {{ }} on incorpore la valeur de la variable titre
dans html
Pr. Habib Ayad 25
 La directive structurelle ngFor permet de boucler sur un
tableau (array) et d’incorporer les éléments dans le document
html.
Pr. Habib Ayad 26
 Pour récupérer et travailler avec l’index d’un tableau, utlilser
ngFor comme suit:
Pr. Habib Ayad 27
 La directive *ngIF permet retirer un élément html si la condition de
*ngIF est false.
 Exemple:
etat = false;
<button class="btn btn-danger" *ngIf="etat">Envoyer</button>
Bouton masqué
<button class="btn btn-danger" *ngIf="!etat">Envoyer</button>
Bouton affiché
Pr. Habib Ayad 28
Pr. Habib Ayad 29
 Exemple:
Pr. Habib Ayad 30
 Exemple:
Pr. Habib Ayad 31
 Le "two-way" Data Binding : c'est une combinaison du
Property Binding et du Event Binding sous une unique
annotation. Dans ce cas-là, le component se charge
d'impacter le DOM en cas de changement du modèle et le
DOM avertit le component d'un changement via l'émission
d'un évènement.
Pr. Habib Ayad 32
 Pour associer la valeur d’un élément de formulaire et une
propriété du model, il faut utiliser ngModel
Pr. Habib Ayad 33
 Configuration
 Ajouter la classe FormsModule dans app.module.ts
◦ Importer la classe
◦ Ajouter FormsModule dans le tableau imports
Pr. Habib Ayad 34
 Les pipes permettent de faire une transformation de
l’affichage des données.
 Exemples
Pr. Habib Ayad 35
 Un service est une classe TypeScript décorée par @Injectable
 Un service peut être utilisé:
◦ comme intermédiaire avec le back-end
◦ moyen de communication entre les composants
 Injectable dans la classe où on a besoins de l’utiliser
Pr. Habib Ayad 36
Créer un service:
ng generate service nomService
Ou
ng g s nomService
Exemple (créer un service voiture)
ng g s voiture
Pr. Habib Ayad 37
 Le décorateur @Injectable () spécifie qu'Angular peut utiliser
cette classe dans le système DI (Injection de dépendances).
 Les métadonnées, providedIn: 'root', signifie que la classe
service est visible dans toute l'application (pas besoins
d’ajouter le service dans providers de app.module.ts).
Pr. Habib Ayad 38
 Le service httpClient d’angular permet l’interaction avec un
serveur via des appels http (par AJAX).
 Le service httpClient permet à notre application de
communiquer avec un serveur JSON ou un Web-Service (pour
persister ou récupérer des données)
Pr. Habib Ayad 39
 TP – HttpClient
◦ Objectif: créer un service qui permet de récupérer
les données relatives aux voitures de location.
◦ Les données sont stockées dans un fichiers json
Pr. Habib Ayad 40
 TP – HttpClient
1. Créer un composant car
ng g c car
2. Créer une interface cars.ts (les attributs de
l’interface doivent être les même que les attributs
des objets récupérés du fichiers json)
ng g interface cars
Pr. Habib Ayad 41
 TP – HttpClient
1. Créer un service voiture
ng g s voiture
Pr. Habib Ayad 42
 TP – HttpClient
◦ Dans le fichier app.modules.ts importer le module
HttpClientModule
Pr. Habib Ayad 43
 TP – HttpClient
◦ Injection du service HttpClient dans le service voiture
Pr. Habib Ayad 44
 TP – HttpClient
◦ Créer une fonction qui récupère les données via la méthode
get de l’objet http
Pr. Habib Ayad 45
 TP – HttpClient
◦ Injecter le service dans le composant car
La fonction getAllCars()
appelle la méthode allcars()
du service VoitureService via
l’objet car.
Subscribe: souscrire les
données récupérer dans le
tableau voitures de type
Cars[]
Pr. Habib Ayad 46
 Subscribe()
◦ La fonction subscribe() prends en argument trois fonctions
fléchées:
1. Récupérer les données
2. Gestion des erreurs
3. Pour afficher un message d’achèvement de la souscription
Pr. Habib Ayad 47
 TP – HttpClient
◦ Affichage des données dans car.component.html
Pr. Habib Ayad 48
1- Déploiement
 Avant de commencer le déploiement modifier la balise base
du fichier index.html
 à
 Exécuter la commande ng build --prod
 Le projet déployé se trouve dans le dossier dist
<base href="/"> <base href="./">
Pr. Habib Ayad 49
1- Hébergement du projet dans le serveur Apache
◦ Hébergement dans la racine:
Accès par http://domaine (ex: http://localhost)
a) Ajouter le contenu du dossier dist dans le dossier racine du serveur
b) Ajouter un fichier .htaccess pour gérer les routes
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]
Pr. Habib Ayad 50
1- Hébergement du projet dans le serveur Apache
◦ Hébergement dans un dossier dans le serveur:
Accès par http://domaine/dossier/ (ex: http://localhost/myapp/)
a) Créer un dossier pour le projet dans la racine du serveur (htdocs dans
xampp, www ou public_html )
b) Ajouter le contenu du dossier dist dans le dossier réservé à votre
projet
c) Ajouter un fichier .htaccess pour gérer les routes
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /dossier/index.html?path=$1 [NC,L,QSA]
Pr. Habib Ayad 51

Contenu connexe

Tendances

Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACKCv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Moez Hamzaoui
 
Conception et réalisation d’une application web (1).pptx
Conception et réalisation d’une application web (1).pptxConception et réalisation d’une application web (1).pptx
Conception et réalisation d’une application web (1).pptx
SouadZid
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Riadh K.
 

Tendances (20)

Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
formation istqb.pdf
formation istqb.pdfformation istqb.pdf
formation istqb.pdf
 
Angular Avancé
Angular AvancéAngular Avancé
Angular Avancé
 
Cours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweightCours design pattern m youssfi partie 7 facade bridge flyweight
Cours design pattern m youssfi partie 7 facade bridge flyweight
 
Rapport restaurant le-roi
Rapport restaurant le-roiRapport restaurant le-roi
Rapport restaurant le-roi
 
Méthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XPMéthodes Agiles - La Méthode XP
Méthodes Agiles - La Méthode XP
 
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACKCv Moez HAMZAOUI JAVA J2EE FULL STACK
Cv Moez HAMZAOUI JAVA J2EE FULL STACK
 
[PFE] Master en ingénierie du logiciel
[PFE] Master en ingénierie du logiciel[PFE] Master en ingénierie du logiciel
[PFE] Master en ingénierie du logiciel
 
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
Pipeline Devops - Intégration continue : ansible, jenkins, docker, jmeter...
 
Conception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerceConception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerce
 
PrésentationCI_CD.pptx
PrésentationCI_CD.pptxPrésentationCI_CD.pptx
PrésentationCI_CD.pptx
 
Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vie
 
Conception et réalisation d’une application web (1).pptx
Conception et réalisation d’une application web (1).pptxConception et réalisation d’une application web (1).pptx
Conception et réalisation d’une application web (1).pptx
 
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
Rapport PFE : Développement D'une application de gestion des cartes de fidéli...
 
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
Rapport pfe Conceptionet Developpement d'une Application web et  Mobile Rapport pfe Conceptionet Developpement d'une Application web et  Mobile
Rapport pfe Conceptionet Developpement d'une Application web et Mobile
 
Conception et mise en place d'un Workflow du département VAS
Conception et mise en place d'un Workflow du département VASConception et mise en place d'un Workflow du département VAS
Conception et mise en place d'un Workflow du département VAS
 
Spring mvc
Spring mvcSpring mvc
Spring mvc
 
Support NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDBSupport NodeJS avec TypeScript Express MongoDB
Support NodeJS avec TypeScript Express MongoDB
 
PFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignementPFE :: Application de gestion des dus d'enseignement
PFE :: Application de gestion des dus d'enseignement
 
Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...Présentation pfe - Etude, conception et réalisation d'une application web de ...
Présentation pfe - Etude, conception et réalisation d'une application web de ...
 

Similaire à Partie 2: Angular

Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
Ludovic Piot
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
Vincent Perrin
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
RYMAA
 

Similaire à Partie 2: Angular (20)

12-Factor
12-Factor12-Factor
12-Factor
 
Paris ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websitesParis ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websites
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Node.js, le pavé dans la mare
Node.js, le pavé dans la mareNode.js, le pavé dans la mare
Node.js, le pavé dans la mare
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Native script
Native scriptNative script
Native script
 
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
 
ASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJSASP.NET MVC, Web API & KnockoutJS
ASP.NET MVC, Web API & KnockoutJS
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
WebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet ApplicationsWebSphere Portal & Rich Internet Applications
WebSphere Portal & Rich Internet Applications
 
Intégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CIIntégration Continue PHP avec Jenkins CI
Intégration Continue PHP avec Jenkins CI
 
Angular 11
Angular 11Angular 11
Angular 11
 
CV_Bilel CHAOUADI
CV_Bilel CHAOUADICV_Bilel CHAOUADI
CV_Bilel CHAOUADI
 
Ajax intro 2pp
Ajax intro 2ppAjax intro 2pp
Ajax intro 2pp
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Introduction à Angularjs
Introduction à AngularjsIntroduction à Angularjs
Introduction à Angularjs
 
Applications Android - cours 13 : Connectivité et services Web
Applications Android - cours 13 : Connectivité et services WebApplications Android - cours 13 : Connectivité et services Web
Applications Android - cours 13 : Connectivité et services Web
 
RennesJS Talk webperf by Dareboost
RennesJS Talk webperf by DareboostRennesJS Talk webperf by Dareboost
RennesJS Talk webperf by Dareboost
 

Partie 2: Angular

  • 1. Pr. Habib Ayad Enseignant chercheur à l’université Hassan II de Casablanca Laboratoire d’informatique de Mohammedia Faculté des Sciences et Techniques Mohammedia Développement des applications web-mobile Pr. Habib Ayad 1
  • 4.  Angular est une plate-forme et Framework pour créer des applications coté client (Front-end) de type SPA (single-page applications ou application monopage html) en utilisant HTML et TypeScript. Pr. Habib Ayad 4
  • 5. Site SPA Site sans Framework SPA ServeurClient Requête initiale HTML POST HTML Serveur Rechargement de toute la page Client Rechargement d’une seule partie la page Requête initiale HTML & JavaScript AJAX JSON • Composé de plusieurs pages • Le navigateur recharge et affiche chaque page demandée par le client • Composé d’une seule page html (index.html) • Le navigateur recharge une partie de la page en exécutant un script. • Le contenu dynamique est envoyé par le serveur sous format JSON suite à une requête AJAX. Pr. Habib Ayad 5
  • 6.  En 2010, la première version d’AngularJS est lancée, et il permet de créer plus facilement des SPA, mais souffre d'une syntaxe plutôt complexe ainsi que des limitations du JavaScript.  À partir de la version 2 Google choisit de complètement réécrire le Framework et depuis porte le nom Angular et non AngularJS  Versions: 2,4,5,…et actuellement on est à la version 10.x (2020) Pr. Habib Ayad 6
  • 7. AngularJS Angular  Assez proche au design pattern MVC coté javascript  Utilise javascript  Basé sur les composants (web component)  Utilise TypeScript:langage transmpilé (traduit en javascript) En resumé Angularjs & Angular sont deux framework tout à fait différents Pr. Habib Ayad 7
  • 8.  Angular est créé avec le langage TypeScript  TypeScript est un langage de programmation orienté objet coté client, très récent, créé par Microsoft en 2012 afin de faire extension à JavaScript.  TypeScript est un langage transmpilé en JavaScript. C.à.d. après écrire un code en TypeScript un compilateur va convertir le code en JavaScript ainsi tous les navigateurs peuvent comprendre et interpréter ce code.  https://www.typescriptlang.org/ Pr. Habib Ayad 8
  • 9.  Pour pouvoir développer des applications Angular, installer les outils suivants:  NODE.JS  NPM  ANGULAR/CLI Pr. Habib Ayad 9
  • 10. Installation: npm install -g @angular/cli Créer un nouveau projet: ng new my-app --routing Lancer l’app sur le serveur: ng serve --open Pr. Habib Ayad 10
  • 11. • Dossier e2e : Fichiers de configuration du projet • Dossier node_module :Dépendances externes du projet (Bootstrap css js, JQuery, Chartjs….) • Dossier app: c’est le dossier de toute la logique applicative de votre projet (composants, services,…) • Dossier assets: Dossier pour les images et autres fichiers pour votre application • Dossier environments: Fichiers de configuration comme la configuration de la production • Index.html: page html SPA Pr. Habib Ayad 11
  • 14.  AppComponent est le composant racine d’un projet Angular. Toutes les autres composants du projet sont accessible via AppComponent Pr. Habib Ayad 14
  • 15.  Pour créer un composant executer la commande suivante: ng generate component <nom_component> Ou ng g c <nom_component> Exemple: ng g c menu Pr. Habib Ayad 15
  • 16.  selector: permet d’indiquer la façon d’insertion du composant dans le document html  Exemple:   comme classe  comme attribut  Pr. Habib Ayad 16
  • 17.  Bootstrap Bootstrap est un Framework CSS et l’un des Framework les plus utilisés par les développeurs pour styliser les applications web.  Installation via CLI npm install --save bootstrap 1. Ouvrez le fichier angular.json et ajouter le chemin de css "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ] Pr. Habib Ayad 17
  • 18.  Jquery & pooper.js npm install jquery --save npm install popper.js --save Ouvrez le fichier angular.json et ajouter le chemin de css "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ], Pr. Habib Ayad 18
  • 19.  Dans index.html avec CDN https://getbootstrap.com/docs/4.5/getting-started/introduction/ Pr. Habib Ayad 19
  • 20.  Fontawesome  https://www.npmjs.com/package/font-awesome npm i font-awesome Icons https://fontawesome.com/v4.7.0/icons/ Exemple: <i class="fa fa-laptop fa-2x" aria-hidden="true"></i> Pr. Habib Ayad 20
  • 21.  Le routage permet de naviguer entre les différentes vues d’une application web-mobile. L’affichage d’une vue se déclenche suivant un événement ou action faite par l’utilisateur (click sur lien, bouton,…). Pr. Habib Ayad 21
  • 22.  Créer des routes  Supposons qu’on a 3 composants: home, cv, about  Pour créer des routes vers les vues de ces composants, ouvrez le fichier app-routing.module.ts et dans le tableau routes ajoutez les routes de la manière suivante: {path:'la_route',component:Composant_concerné} Pr. Habib Ayad 22
  • 24.  redirectTo: L’attribut redirectTo permet de rediriger vers une autre route path:' ' : Si il n y a pas de route alors redirection vers la route /home pathMatch:'full' : signifie que lors du lancement de l’application , la page par défaut est la page de la route /home path:' **' : Si la route n’existe pas dans le tableau de routage alors redirection vers la route /home Pr. Habib Ayad 24
  • 25.  L’interpolation permet d’incorporer des donnés dans la template html ce qui permet aussi de dynamiser le contenu de la vue.  La variable titre déclarer dans la classe du composant  À l’aide de {{ }} on incorpore la valeur de la variable titre dans html Pr. Habib Ayad 25
  • 26.  La directive structurelle ngFor permet de boucler sur un tableau (array) et d’incorporer les éléments dans le document html. Pr. Habib Ayad 26
  • 27.  Pour récupérer et travailler avec l’index d’un tableau, utlilser ngFor comme suit: Pr. Habib Ayad 27
  • 28.  La directive *ngIF permet retirer un élément html si la condition de *ngIF est false.  Exemple: etat = false; <button class="btn btn-danger" *ngIf="etat">Envoyer</button> Bouton masqué <button class="btn btn-danger" *ngIf="!etat">Envoyer</button> Bouton affiché Pr. Habib Ayad 28
  • 32.  Le "two-way" Data Binding : c'est une combinaison du Property Binding et du Event Binding sous une unique annotation. Dans ce cas-là, le component se charge d'impacter le DOM en cas de changement du modèle et le DOM avertit le component d'un changement via l'émission d'un évènement. Pr. Habib Ayad 32
  • 33.  Pour associer la valeur d’un élément de formulaire et une propriété du model, il faut utiliser ngModel Pr. Habib Ayad 33
  • 34.  Configuration  Ajouter la classe FormsModule dans app.module.ts ◦ Importer la classe ◦ Ajouter FormsModule dans le tableau imports Pr. Habib Ayad 34
  • 35.  Les pipes permettent de faire une transformation de l’affichage des données.  Exemples Pr. Habib Ayad 35
  • 36.  Un service est une classe TypeScript décorée par @Injectable  Un service peut être utilisé: ◦ comme intermédiaire avec le back-end ◦ moyen de communication entre les composants  Injectable dans la classe où on a besoins de l’utiliser Pr. Habib Ayad 36
  • 37. Créer un service: ng generate service nomService Ou ng g s nomService Exemple (créer un service voiture) ng g s voiture Pr. Habib Ayad 37
  • 38.  Le décorateur @Injectable () spécifie qu'Angular peut utiliser cette classe dans le système DI (Injection de dépendances).  Les métadonnées, providedIn: 'root', signifie que la classe service est visible dans toute l'application (pas besoins d’ajouter le service dans providers de app.module.ts). Pr. Habib Ayad 38
  • 39.  Le service httpClient d’angular permet l’interaction avec un serveur via des appels http (par AJAX).  Le service httpClient permet à notre application de communiquer avec un serveur JSON ou un Web-Service (pour persister ou récupérer des données) Pr. Habib Ayad 39
  • 40.  TP – HttpClient ◦ Objectif: créer un service qui permet de récupérer les données relatives aux voitures de location. ◦ Les données sont stockées dans un fichiers json Pr. Habib Ayad 40
  • 41.  TP – HttpClient 1. Créer un composant car ng g c car 2. Créer une interface cars.ts (les attributs de l’interface doivent être les même que les attributs des objets récupérés du fichiers json) ng g interface cars Pr. Habib Ayad 41
  • 42.  TP – HttpClient 1. Créer un service voiture ng g s voiture Pr. Habib Ayad 42
  • 43.  TP – HttpClient ◦ Dans le fichier app.modules.ts importer le module HttpClientModule Pr. Habib Ayad 43
  • 44.  TP – HttpClient ◦ Injection du service HttpClient dans le service voiture Pr. Habib Ayad 44
  • 45.  TP – HttpClient ◦ Créer une fonction qui récupère les données via la méthode get de l’objet http Pr. Habib Ayad 45
  • 46.  TP – HttpClient ◦ Injecter le service dans le composant car La fonction getAllCars() appelle la méthode allcars() du service VoitureService via l’objet car. Subscribe: souscrire les données récupérer dans le tableau voitures de type Cars[] Pr. Habib Ayad 46
  • 47.  Subscribe() ◦ La fonction subscribe() prends en argument trois fonctions fléchées: 1. Récupérer les données 2. Gestion des erreurs 3. Pour afficher un message d’achèvement de la souscription Pr. Habib Ayad 47
  • 48.  TP – HttpClient ◦ Affichage des données dans car.component.html Pr. Habib Ayad 48
  • 49. 1- Déploiement  Avant de commencer le déploiement modifier la balise base du fichier index.html  à  Exécuter la commande ng build --prod  Le projet déployé se trouve dans le dossier dist <base href="/"> <base href="./"> Pr. Habib Ayad 49
  • 50. 1- Hébergement du projet dans le serveur Apache ◦ Hébergement dans la racine: Accès par http://domaine (ex: http://localhost) a) Ajouter le contenu du dossier dist dans le dossier racine du serveur b) Ajouter un fichier .htaccess pour gérer les routes RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA] Pr. Habib Ayad 50
  • 51. 1- Hébergement du projet dans le serveur Apache ◦ Hébergement dans un dossier dans le serveur: Accès par http://domaine/dossier/ (ex: http://localhost/myapp/) a) Créer un dossier pour le projet dans la racine du serveur (htdocs dans xampp, www ou public_html ) b) Ajouter le contenu du dossier dist dans le dossier réservé à votre projet c) Ajouter un fichier .htaccess pour gérer les routes RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /dossier/index.html?path=$1 [NC,L,QSA] Pr. Habib Ayad 51