Cours 2 - Framework Angular Structure D'un Projet Angular

Université Virtuelle de Tunis
Atelier : Développement Web
Framework Angular : Structure d’un

projet angular
Tuteur : Bechr Ben Kahla
1. Structure générale d’un projet Angular :
Figure 1 : structure générale d'un projet angular
Figure 2: structure d'un projet angular

2. Architecture Angular :
Une application Angular se compose de :
 Un à plusieurs modules dont un est principal.

 Des services pour la logique applicative. Les composants peuvent utiliser
les services via le principe de l’injection des dépendances.
 Des directives : un composant peut utiliser des directives.
 Des pipes : utilisés pour formater l’affichage des données dans les
composants.
Généralement d’une manière abstraite une application angular est une boite qui
collecte ces éléments.
Une application angular est définie par un ensemble des modules et elle a
toujours au moins un module racine (app.module.ts) qui permet le
démarrage, et a généralement beaucoup plus de modules de fonctionnalités.
Figure 3: app.module.ts
Par la suite le diagramme suivant montre comment ces pièces de base sont
liées :
Figure 4 : Architecture Angular

 Le component et le template définissent un composant angular.
 Les composants peuvent utiliser les services via le principe de l’injection
des dépendances.
 Les composants et les services d’une application angular doivent être
déclarés dans le module pour être accessible dans toute l’application.
a) Les Modules :
 Les applications angulaires sont modulaires
 Chaque application Angular possède au moins une classe de module
angulaire : c’est le module racine, appelé classiquement AppModule.
 Un module angulaire est une classe avec un décorateur @NgModule.
 @NgModule est une fonction décoratrice qui prend des objets de
métadonnées dont les propriétés décrivent le module.
 Les propriétés sont :
 imports : pour les modules dont les classes sont nécessaires au
composant de ce module.
 providers : pour les services présents dans l'un des modules qui
doivent être utilisés dans les autres modules ou composants. Une
fois qu'un service est inclus dans les providers, il devient accessible
dans toutes les parties de cette application.
 declarations : pour les classes liées aux vues et appartenant à ce
module. Angular a trois types de classes de modules : components,
directives, et les pipes.
 exports : pour exporter les classes utilisables dans d’autres
modules.
 bootstrap : pour déclarer le composant racine qui est la vue
principale de l'application.
Les décorateurs sont des fonctions qui modifient les classes Javascript.
Un décorateur est essentiellement utilisé pour attacher des métadonnées à des
classes afin qu’il connaisse la configuration de ces classes et comment elles
devraient fonctionner.
 Le module racine est démarré dans le fichier main.ts.
 Par défaut le module racine s’appelle AppModule.
b) Les components :
Les components sont les composantes de base d'une application Angular : une
application est une arborescence de plusieurs components.
Tout d'abord, AppComponent est notre component principal : tous les autres
components de notre application seront emboîtés dans celui-ci.
Pour cette structure, on peut imaginer un component pour la barre de menu, un

autre pour la partie contenue et un dernier pour le menu à gauche.
Chaque composant se compose principalement des éléments suivants :
 Une template HTML representant le vue,

 Une classe représentant sa logique métier,
 Une feuille de style CSS,
 Un fichier de type spec , c’est un fichier pour les tests unitaires.
Un test unitaire est un procédé de s’assurer du bon fonctionnement d’une unité

de programme.
On prend notre fichier app.component.ts :

Un composant est une classe qui possède le décorateur @Component.
À l'intérieur du décorateur @Component() , on trouve un objet qui contient les

éléments suivants :
 selector :
 Il s'agit du nom qu'on utilisera comme balise HTML pour afficher
ce component,
 Comme on a vu avec <app-root>, ce nom doit être unique et ne doit
pas être un nom réservé HTML de type <div> , <body>,.. .
 templateUrl :
 C’est le chemin vers le code HTML à injecter.
 Généralement on utilise templateUrl qui permet d’associer un
fichier externe HTML contenant la structure de la vue du
composant.
 Mais il est possible aussi d’utiliser template qui permet de définir
à l’intérieur du décorateur le code HTML représentant la vue du
composant.
 styleUrls : c’est un array contenant un ou plusieurs chemins vers les
feuilles de styles qui concernent ce component.
c) Création de nouveaux composants :

Pour créer un nouveau component à l'aide du CLI d'Angular :
 ng generate component componentName

Aussi on peut écrit :
 ng g c componentName
Exercice :
1. Créer un composant book et faire l’appeler dans app.componant.html.
d) Déclaration du composant :
Après la génération d’un composant Angular , il faut le déclarer dans le
module (app.module.ts) , pour cela on doit déclarer le nouveau composant dans
app.module.ts :
e) L’utilisation d’un composant :

Une fois notre composant est ajouté à L’array declarations, il est maintenant
accessible via le composant racine AppComponent à travers son selector
associé.
2. Ouvrir book.component.html, supprimer le contenu, et entrer le code ci-

dessous :
3. Ajouter le selector dans la vue de AppComponent :
4. Transférer le contenu html de composant BookComponent et le mettre dans

template :
Ici à la place d’associer un fichier externe HTML contenant la structure de la
vue, on a choisi de définir à l’intérieur du décorateur le code HTML représentant
la présentation du composant.
Mais c’est recommandé d’utiliser templateUrl avec un contenu HTML assez

important.
3. Data Binding :
L'intérêt d'utiliser Angular est de pouvoir gérer le DOM (Document Object Model
: les éléments HTML affichés par le navigateur) de manière dynamique, et pour
cela, il faut utiliser la liaison de données, ou "databinding".
Le databinding, c'est la communication entre un code TypeScript et le template

HTML qui est montré à l'utilisateur. Cette communication est divisée en deux
directions :
 Les informations venant de partie TypeScript qui doivent être affichées

dans le navigateur. : les deux principales méthodes pour les affichés sont
le "string interpolation" et le "property binding ».
 Les informations venant du template HTML qui doivent être gérées par le
code typescript : exemple l'utilisateur a rempli un formulaire ou cliqué
sur un bouton, et il faut réagir et gérer ces événements. On parlera de
"event binding" pour cela.
 Il existe également des situations comme les formulaires, par exemple, où
l'on voudra une communication à double sens : on parle donc de "two-
way binding".
a) String interpolation :
L'interpolation est la manière la plus basique d'émettre des données issues de
code TypeScript.
Avec l'interpolation, nous pouvons afficher la valeur d'une propriété dans la vue
d'un template, entre deux accolades, comme ceci : {{ maPropriete }}
5. Remplacer le titre statique d’un livre par une propriété title dans
book.component.ts et faire l’appeler à l’aide de l’interpolation.
Angular récupère automatiquement la valeur de la propriété title du composant,

et l'injecte dans le template, pour qu'elle s'affiche dans le navigateur de
l'utilisateur.
Le fait que la propriété interpolée soit mise à jour dans le code ts,
automatiquement Angular va le mettre à jour dans le template, cela s'appelle le
binding unidirectionnel.
b) Property binding :
La liaison par propriété ou "property binding" est une autre façon de créer de
la communication dynamique entre la partie TypeScript et le template , plutôt
qu'afficher simplement le contenu d'une variable .
Le property binding c’est modifier dynamiquement les propriétés d'un élément

du DOM en fonction de données dans la partie TypeScript.
6. Ajouter un bouton Acheter dans la vue HTML de composant

book.component.html.
7. Créer une propriété booléenne isAvailable = false dans book.component.ts.
8. Appliquer la propriété binding sur le bouton Acheter où il doit être
désactivé, si la propriété isAvailable égale false et activer si on change
isAvailable à True.
Par la suite le fait de changer la propriété isAvailable à true , le bouton Acheter

va être activé .
La liaison par propriété ou "property binding" peut être appliquée également
sur :
Propriétés Code Explications

Propriété d’élément <img [src]= ‘someImageUrl ‘> On utilise les crochets
pour lier directement la
source de l’image à la
propriété someImageUrl
du composant.
Propriété d’attribut <label On lie l’attribut for de
[attr.for]=’someLabelId’> … l’élément label avec la
</label> propriété de notre
composant someLabelId.
Propriété de la <div Fonctionnement
classe [class.special]=’isSpecial’> similaire pour attribuer
Spécial</div> ou non la classe special à
l’élément.
Propriété de la style <button On peut également
[style.color]= ‘’isSpecial ? définir un style pou nos
’red’ : ‘green’ ‘’> Spécial éléments de manière
</button> dynamique : ici on
définit la couleur de
notre bouton en fonction
de la propriété isSpecial,
soit rouge, soit vert.
c) Event binding :
Avec le string interpolation et le property binding, nous savons communiquer
depuis le code TypeScript vers le template HTML. Maintenant, on va montrer
comment réagir dans le code TypeScript aux événements venant du template
HTML.
Actuellement, nous avons un bouton sur notre template (le bouton

acheter). Nous allons lui ajouter une fonctionnalité liée à l'événement "click"
(déclenché quand l'utilisateur clique dessus).
On utilise les parenthèses () pour créer une liaison à un événement, par la suite
le fait de cliquer sur le bouton acheter va le désactiver sachant que la propriété
isAvailable est initialisée à true et la méthode setAvailable lié au click va
l’inverser chaque fois.
d) Two-way binding :
La liaison à double sens (ou two-way binding) utilise la liaison par propriété et
la liaison par événement en même temps, on l'utilise, par exemple, pour les
formulaires, afin de pouvoir déclarer et de récupérer le contenu des champs,
entre autres.
Pour pouvoir utiliser le two-way binding, il vous faut importer FormsModule

depuis @angular/forms dans app.module.ts.
Le two-way binding emploie le mélange des syntaxes de property binding et

d'event binding : des crochets et des parenthèses [()].
Pour une première démonstration, ajoutez un <input> dans le
template book.component.html et liez-le à la variable title en utilisant la
directive ngModel :
Dans notre template, vous verrez un <input> par livre. Le nom de livre est déjà
indiqué dedans, et si vous le modifiez, le contenu du nom de livre est modifié
avec. Ainsi vous voyez également que chaque instance du component
BookComponent est entièrement indépendante une fois créée : le fait d'en
modifier une ne change rien aux autres. Ce concept est très important, et il
s'agit de l'une des plus grandes utilités d'Angular.
4. Les directives :
 Une directive est une classe permettant d’attacher un comportement aux
éléments du DOM. Elle est décorée avec l’annotation @Directive.
 La commande pour créer une directive est :
ng g d directiveName
La documentation officielle d’Angular identifie trois types de directives :
 Les composants qui sont des directives avec des templates.

 Les directives structurelles qui changent l’apparence du DOM en ajoutant
et supprimant des éléments.
 Les directives d’attributs qui permettent de changer l’apparence ou le
comportement d’un élément.
a) Les directives par attribut :
Les directives par attribut modifient le comportement d'un objet déjà

existant. On a déjà utilisé une directive de ce type, la directive ngModel que on a
employée pour le two-way binding, qui modifie la valeur du <input> et répond
à tout changement qu'on lui apporte.
On va montrer deux autres exemples très utiles : : ngStyle et ngClass , qui

permettent d'attribuer des styles ou des classes de manière dynamique.
ngStyle :
Cette directive permet de modifier l’apparence de l’élément cible.
 Elle est placé entre des crochets [ ] , exemple : [ngStyle.width] .

 Elle prend en paramètre un attribut représentant un objet décrivant le
style à appliquer.
 Elle utilise le property Binding.
9. Imaginons pour l’application, nous souhaitons modifier la couleur de titre de

livre selon sa disponibilité, disons vert s’il est disponible et rouge s’il n’est
pas disponible.
ngClass :
 Cette directive permet de modifier l’attribut class.

 Elle cohabite avec l’attribut class.
 Elle prend en paramètre :
o Une chaine (string)
o Un tableau (dans ce cas il faut ajouter les [ ] donc [ngClass])
o Un objet (dans ce cas il faut ajouter les [ ] donc [ngClass])
 Elle utilise le property Binding.
10. Cette fois on va appliquer des classes Bootstrap à la balise <li> en fonction
du la disponibilité de livre :
o La classe : list-group-item-success si la variable isAvailable égale à true.
o La classe : list-group-item-danger si la variable isAvailable égale à false.
b) Les directives structurelles :
 Les "Structural Directives" permettent de manipuler le DOM en ajoutant
ou en retirant des éléments.
 Les "Structural Directives" natives les plus utilisées sont ngIf et ngFor.
 Les "Structural Directives" sont généralement utilisées en préfixant les
directives par un astérisque :
Il s'agit d'un raccourci pour la syntaxe suivante :

Le tag ng-template est un tag particulier qui n'affiche pas les éléments qui y
sont contenus mais les rend disponible aux directives appliquées dessus par
l'injection de la classe TemplateRef.
La directive ngIf a donc accès au template en injectant la classe TemplateRef ;

elle décide ensuite d'insérer ou non ce template dans la vue en fonction de la
valeur de l'expression title !== null.
*ngIf :
Un component auquel on ajoute la directive *ngIf="condition" ne s'affichera que
si la condition est "truthy" (elle retourne la valeur true où la variable
mentionnée est définie et non-null), comme un statement if classique.
11. Pour une démonstration simple, ajouter une <div> rouge qui ne s'affichera
que si le livre est non disponible et autre verte qui ne s'affichera que si le
livre est disponible.
*ngFor :
La directive structurelle ngFor permet de boucler sur un array et d'injecter les

éléments dans le DOM.
Il est possible de récupérer d'autre informations telles que l'index de l'élément :
 index : position de l'élément.

 odd : indique si l'élément est à une position impaire.
 even : indique si l'élément est à une position paire.
 first : indique si l'élément est à la première position.
 last : indique si l'élément est à la dernière position.
On peut imaginer que notre application récupère, depuis un serveur, un array
contenant tous les livres et leurs états. Pour l'instant, on va créer cet array
directement dans AppComponent :
Nous avons un array avec trois objets, chaque objet ayant une propriété title et
une propriété isAvailable. Nous pourrions même créer une interface ou une
class Typescript Book, mais dans ce cas simple ce n'est pas nécessaire.
Maintenant la magie *ngFor dans app.component.html :
Par la suite on va utiliser le property binding, et y passer les propriétés title

et isAvailable de cet objet, et de contre partie dans book.component.ts on doit
ajouter le décorateur @Input avec les propriétés title et isAvailable.C’est
concept est appelé sharing Data entre un composant parent
(app.compnent.html) et un composant fils (book.component.html) , on va le
plus le détailler dans le chapitre suivant.

Cours 2 - Framework Angular Structure D'un Projet Angular

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours 2 - Framework Angular Structure D'un Projet Angular

Transféré par

Droits d'auteur :

Formats disponibles

Université Virtuelle de Tunis

Atelier : Développement Web

Framework Angular : Structure d’un

1. Structure générale d’un projet Angular :

Figure 1 : structure générale d'un projet angular

Figure 2: structure d'un projet angular

 Un à plusieurs modules dont un est principal.

Figure 4 : Architecture Angular

Pour cette structure, on peut imaginer un component pour la barre de menu, un

Chaque composant se compose principalement des éléments suivants :

 Une template HTML representant le vue,

Un test unitaire est un procédé de s’assurer du bon fonctionnement d’une unité

On prend notre fichier app.component.ts :

À l'intérieur du décorateur @Component() , on trouve un objet qui contient les

c) Création de nouveaux composants :

 ng generate component componentName

e) L’utilisation d’un composant :

2. Ouvrir book.component.html, supprimer le contenu, et entrer le code ci-

3. Ajouter le selector dans la vue de AppComponent :

4. Transférer le contenu html de composant BookComponent et le mettre dans

Mais c’est recommandé d’utiliser templateUrl avec un contenu HTML assez

Le databinding, c'est la communication entre un code TypeScript et le template

 Les informations venant de partie TypeScript qui doivent être affichées

Angular récupère automatiquement la valeur de la propriété title du composant,

Le property binding c’est modifier dynamiquement les propriétés d'un élément

6. Ajouter un bouton Acheter dans la vue HTML de composant

Par la suite le fait de changer la propriété isAvailable à true , le bouton Acheter

Propriétés Code Explications

Actuellement, nous avons un bouton sur notre template (le bouton

Pour pouvoir utiliser le two-way binding, il vous faut importer FormsModule

Le two-way binding emploie le mélange des syntaxes de property binding et

La documentation officielle d’Angular identifie trois types de directives :

 Les composants qui sont des directives avec des templates.

Les directives par attribut modifient le comportement d'un objet déjà

On va montrer deux autres exemples très utiles : : ngStyle et ngClass , qui

Cette directive permet de modifier l’apparence de l’élément cible.

 Elle est placé entre des crochets [ ] , exemple : [ngStyle.width] .

 Elle utilise le property Binding.

9. Imaginons pour l’application, nous souhaitons modifier la couleur de titre de

 Cette directive permet de modifier l’attribut class.

Il s'agit d'un raccourci pour la syntaxe suivante :

La directive ngIf a donc accès au template en injectant la classe TemplateRef ;

La directive structurelle ngFor permet de boucler sur un array et d'injecter les

Il est possible de récupérer d'autre informations telles que l'index de l'élément :

 index : position de l'élément.

Maintenant la magie *ngFor dans app.component.html :

Par la suite on va utiliser le property binding, et y passer les propriétés title

Vous aimerez peut-être aussi