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