1

Olfa Jabri

FRAME WORK Institut Supérieur de Gestion

ANGULAR de Gabés

Angular/Réaliser par Mme Jabri Olfa

Introduction
L’industrialisation du développement d’application Web exige de créer des application
modulaire .

le client (navigateur) doit accueillir une application complète et assez légère pour être charger
en mémoire centrale. Aussi l’utilisateur peut naviguer entre les vues internes à l’application qui
est dite « Monopage »
le problématique consiste à créer des applications web:
Initialement charger sur le navigateur.
Ecrite en Javascript/Html/Css.
Construite modulairement.
Dialogue avec un ou plusieurs serveurs via des services Web.
 solution utiliser un frameWork Angular

Angular/Réaliser par Mme Jabri Olfa

2
Définition

Angular/Réaliser par Mme Jabri Olfa

3
 Le développement Angular passe par trois langages principaux :

• le HTML pour structurer

• le SCSS pour les styles (le SCSS est une surcouche du CSS qui y apporte des
fonctionnalités supplémentaires)

• le TypeScript pour tout ce qui est dynamique, comportement et données. Le

typescript sera compilé et traduit en Java Script. Le Type script est un langage de
script structuré et orienté objet qui permet de simplifier le développement des
application.

Angular/Réaliser par Mme Jabri Olfa

4
 Quelques outils utilisées par angular

Le CLI, ou “Command Line Interface” (un outil permettant d'exécuter des commandes depuis
la console), d’Angular est l’outil qui vous permet d’exécuter des scripts pour la création, la
structuration et la production d’une application Angular. Angular CLI (Command Line Interface) qui
vous permet de générer, compiler, tester et déployer des projets angular

Quelques outils utilisées

Node.js sera notre plateforme de développement par Angular
javascript. En l’utilise pour créer un serveur
web côté serveur qui permet d'exécuter du Code TypeScript.
gestionnaire de packages npm: Angular dépendent des packages npm.

Angular/Réaliser par Mme Jabri Olfa

5
 angular architecture

MVVM:Model-View-ViewModel

Model : représenté généralement par une classe référencée par la couche d’accées aux

données (classe ou interfaceModel

MVVM:Model-View-ViewModel TypeScript).
: repr´ esent´ e g´ en´ eralement par une classe r´ ef´ erenc´ ee par la couche d’acc` es
aux donn´ ees (classe ou interface TypeScript). View contenant la disposition et l’apparence de ce qu’un utilisateur voit ` a l’ ´
ecran,
 recevant l’interactionla
View contenant avec l’utilisateur et
disposition : clic, saisie, survol...
l’apparence deViewModel
ce qu’unremplac ¸ant duvoit
utilisateur contrˆ
` oleur
a l’ ´dans l’architecture
ecran,
MVC, connect´ e ` a la vue par le data binding, repr´ esent´ e dans Angular par un fichier *.component.ts.
recevant l’interaction avec l’utilisateur : clic, saisie, survol...

ViewModel remplacant du controleur dans l’architecture MVC, connecte ` a la vue par le

data binding, represente dans Angular par un fichier *.component.ts.

Angular/Réaliser par Mme Jabri Olfa

6
 La structure du code

Angular/Réaliser par Mme Jabri Olfa

7
 La structure du code

Angular/Réaliser par Mme Jabri Olfa

8
 La structure du code

Angular/Réaliser par Mme Jabri Olfa

9
Angular/Réaliser par Mme Jabri Olfa
10
Angular/Réaliser par Mme Jabri Olfa
11
Angular/Réaliser par Mme Jabri Olfa
12
Angular/Réaliser par Mme Jabri Olfa
13
Angular/Réaliser par Mme Jabri Olfa
14
 Définition d’un composant
oUn composant est formé de trois partie:

• un fichier type script : app.component.ts.

• Un fichier HTML: app.component.html.

• Une feuille de style: app.component.css.

oUn composant est une classe qui possède le décorateur @Component.

oCe décorateur possède les propriétés suivantes:

selector: a chaque fois que le sélecteur sera rencontré, Angular créera une instance
du composant correspondant.

template ou templateUrl: c’est la vue d’écrit à Angular.

styleUrls: spécifier les feuille de styles CSS associées à ce composant.

Angular/Réaliser par Mme Jabri Olfa
15
 Déclaration d’un composant

Angular/Réaliser par Mme Jabri Olfa

16
 Data binding

Angular/Réaliser par Mme Jabri Olfa

17
La double moustache {{}} permet d’injecter du
contenues dans la vue si le composant modifie les
données la vue sera automatiquement mise à jour. Par
contre l’inverse n’est pas vrai.
 le crochet [ ] est utilisé pour un attribut HTML

Angular/Réaliser par Mme Jabri Olfa

18
 Event Binding
Angular permet de reagir aux evenements javascript déclenchés depuis la vue.

o Exemple

Angular/Réaliser par Mme Jabri Olfa

19
 Two-way data binding

est une interaction bidirectionnelle, les données circulent dans les deux sens (du composant
aux vues et des vues au composant.

Angular/Réaliser par Mme Jabri Olfa

20
1) ngIf Condition

src/app/app.component.ts src/app/app.component.html

import { Component } from '@angular/core';

@Component({ <h1>Example – ngif </h1>
selector: 'my-app', <div *ngIf="isShow">
templateUrl: './app.component.html', <p>
styleUrls: [ './app.component.css' ] Display if true.
}) </p>
export class AppComponent { </div>
isShow: boolean = false;
}

2) ngIf Else Condition

src/app/app.component.ts src/app/app.component.html

import { Component } from '@angular/core'; <h1>Example - </h1>

@Component({ <p *ngIf="isShow; else ifNotShow<p>
selector: 'my-app', Display if true.
templateUrl: './app.component.html', </p>
styleUrls: [ './app.component.css' ] </div>
}) <ng-template #ifNotShow>
export class AppComponent { <p>
isShow: boolean = false; Display if not true.
} </p>
Angular/Réaliser par Mme Jabri Olfa </ng-template>
21
 src/app/app.component.ts src/app/app.component.html

import { Component } from '@angular/core';

@Component({
selector: 'my-app', <table>
<tr>
templateUrl: './app.component.html',
<th>ID</th>
styleUrls: [ './app.component.css' ] <th>Name</th>
}) <th>Email</th>
</tr>
export class AppComponent {
<tr *ngFor="let stu of students">
students = [ <td>{{ stu.id }}</td>
{id: 1, name: ‘ali', email: ‘ali@gmail.com'}, <td>{{ stu.name }}</td>
{id: 2, name: ‘sourour', email: ‘sou@gmail.com'},
<td>{{ stu.email }}</td>
</tr>
{id: 3, name: ‘amine', email: ‘amine@gmail.com'}, </table>
]
}

Angular/Réaliser par Mme Jabri Olfa

22
 Two-way data binding

Angular/Réaliser par Mme Jabri Olfa

23
Angular/Réaliser par Mme Jabri Olfa
24