ANGULAR

Le plan :

 Introduction.
 Pour quoi angular ?
 L’architecture ?
 Installer Angular Cli.
 Créer Votre premier application angular.
( Explication et pratique )
INTRODUCTION :

• Angular est un framework côté client, open source, basé sur TypeScript,

et co-dirigé par l'équipe du projet « Angular » à Google et par une
communauté de particuliers et de sociétés.
• Angular est une réécriture complète d'AngularJS construit par la même
équipe. Il permet la création d’applications Web et plus particulièrement
de ce qu’on appelle des « Single Page Applications ».
 POUR QOUI ANGULAR ?
• Un Framework côté client.
• Une documentation détailler.
• Structure et architecture spécialement
créées pour une meilleure scalabilité du
projet.
• Étant le plus ancien Framework
disponible, Angular bénéficie d’un large
soutien de la communauté.
• Nouvelle version chaque 6 mois.
L’ARCHITECTURE
 Architecture d’une ProduitList
application angular Component

App ProduitCreate
Component Component

App Menu
index.html
Module Component

Services
 INSTALLER ANGULAR/CLI
• Pour commencer à développer des application web en utilisant angular on aura besoin
d’installer angular/Cli.
• Angular CLI est une Command Line Interface (interface en ligne de commande, en
français) développée par les équipes d’Angular même. Cette CLI permet de créer
des projets dans lesquels la CLI pourra ajouter des fichiers et plus exactement des
entités Angular. Il sera possible d’ajouter des modules, des composants, des
services ou bien des directives en une ligne de commande.
• Pour installer angular cli il suffit d’executer la comande :

npm install -g @angular/cli

 VOTRE PREMIER
APPLICATION ANGULAR
 COMPONENT
• Le mot component en anglais signifie "composant", et à juste titre : les components
sont les composants de base d'une application Angular. Une application Angular peut
être vue comme une arborescence de components avec AppComponent comme
component racine.
CRÉER VOTRE PREMIER COMPONENT :

• En pratique, un component va associer un fichier HTML, un fichier SCSS et un

fichier TypeScript : c'est le cas de l'AppComponent généré par le CLI, par
exemple. Vous allez maintenant voir comment créer et utiliser votre premier
component !
• Pour créer un component on utilise angular cli pour faciliter la tache en utilisant la
commande :
Ng generate component component_name
 SERVICE
• Avec Angular, une dépendance est généralement l'instance d'une classe permettant
de factoriser certaines fonctionnalités ou d'accéder à un état permettant ainsi aux
composants de communiquer entre eux.
• Dans le vocabulaire Angular, ces classes sont appelées "services".

Component B

Servic Component C
Component A e

Component D
CRÉER VOTRE PREMIER SERVICE :

• Les services en angular sont des classes qui permettent :

La communication avec les serveur en utilisant le HttpClient.
La communication entre les components.
Faire les calcules neccéssaire dans l’application,
• Pour créer un service on utilise angular cli pour faciliter la tache en utilisant la
commande :
ng generate service service_name
 MODEL
• Dans le vocabulaire Angular, Un model est une classe qui représente un type de
données particulier. (C’est le cas des beans en java, ou les structures de données en
C).
CRÉER VOTRE PREMIER COMPONENT :

• Les models en angular sont des classes qui permettent :

Le représentation d’un type d’objet particulier.
• Pour créer un service on utilise angular cli pour faciliter la tache en
utilisant la commande :
ng generate cl model_name - - type=‘’model ’’
 MODULE

• Angular propose un concept de modules afin de mieux structurer le code et

faciliter la réutilisation et le partage.
• Un module Angular est défini simplement avec une classe (généralement vide) et le
décorateur NgModule.
• Un module en angular permet:
 regrouper des composants (mais aussi des services, directives, pipes etc...),
 définir leurs dépendances,
 définir leur visibilité.
DATA BINDING
 Property Binding []
<img
[alt]="bookName“
[src]="bookPictureUrl“
• Permet de faire un lien entre >
les données de la classe du
composant et les attributs des
élements HTML du template.
<button type="button“
[disabled]="!isAvailable">
BUY
</button>
 Event Binding []
<button type="button"
(click)="buy()">
BUY
• Permet d’éxecuter un </button>
traitement à partir de la
classe du composant
lorsque un évènement est
déclenché.
<input type="text"
(onChange)="validate()">
 String Interpolation {{ }}
• Permet d’afficher la valeur <p>
name is {{ personne.name}}
d’une variable de la classe du </br>
composant directement dans le age is {{ personne.age}}
contenu des éléments de sa </p>

Template

<input type=“text”
• Il est interdit de faire placeholder=“{{message}}”>
l’interpolation pour les
propriétés des éléments.
 Two Way Binding [()]

• Permet de lie une variable

de la classe du composant
avec un éléments du
<input type="text" [(ngModel)]="variable">
Template de telle sort à ce
que la modification de la
valeur de la variable
influence l’élément et
inversement.
DIRECTIVE
 DIRECTIVE

• Il change le comportment des components du Dom par des attributes directives.

• Les plus utilisé sont :
*ngFor
*ngIf
ngSwitch
ngStyle
ngClass
 *ngFor

<ul>
• Il permet de répéter un
<li *ngFor="let book of
élement un certain nombrede bookList">{{ book.name }}</li>
fois, </ul>
• Exemple :
bookList = [
{name: 'eXtreme Programming Explained'},
{name: 'Clean Code'}
];
 *ngIf

• Pour faire un affichage

<ul>
conditionnel, <li *ngIf="n % 2 != 0">
• Exemple : {{ n }} est impair
</li>
– n dans cette exemple est de
</ul>
type number;
 *ngIf & else

• Pour faire un affichage

conditionnel. <ul>
<li *ngIf="n % 2 != 0; else sinon">
• Exemple : {{ n }} est impair
– n dans cette exemple est de </li>
type number; <ng-template #sinon>
<li>{{ n }} est pair</li>
</ng-template>
</ul>
 [ngStyle]
• permet de modifier le style d’un élément
HTML.
• s’utilise conjointement avec le property
<p [ngStyle]="{backgroundColor: n}">
binding pour récupérer des valeurs la couleur rouge
définies dans la classe. </p>
• Exemple :

– n dans cette exemple est de type string

<div [ngStyle]=“
– n= ‘red’
{'background-color': n === ‘green' ?
– ng-container ne sera pas afficher dans 'green' : 'red' }">
le dom,
</<div>
 [ngClass]
• Pour faire controller les classes
d’un element DOM en fonction
d’une variable ou fonction du TS,
• Exemple :
– n dans cette exemple est de
type number
<ul *ngFor="let person of people">
<li [ngClass]="{
'text-success':person.level == 1,
'text-primary':person.level == 2,
'text-danger':person.level == 3
}">{{ person.name }} ({{ person.country }})
</li>
<ul>
 [ngSwitch]

• Pour faire un affichage

conditionnel, <ul>
<ng-container [ngSwitch]="n">
• Exemple : <li *ngSwitchCase="1">{{n}} = un</li>
– n dans cette exemple est de type <li *ngSwitchCase="2">{{n}} = deux</li>
<li *ngSwitchCase="3">{{n}} = trois</li>
number <li *ngSwitchDefault>{{n}} : autre</li>
– ng-container ne sera pas afficher </ng-container>
</ul>
dans le dom,
ROUTAGE ET NAVIGATION
 Comment faire ?

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.
HTTP CLIENT
 Introduction

HttpClient est une classe d’angular qui nous permet de se communiquer

avec les serveurs (Le coté Backend) en utilisant le protocole http,

 Comment faire ?

1) Dans le module principale importé le HttpClientModule.

2) Injecter le service HttpClient dans la classe.

3) Envoyer la requete en utilisant une des méthodes de l’objet

injecter (delete, get, post …).

4) Passer une fonction comme paramètre de la méthode

subscribe.
DEPLOYEMENT
 Comment faire ?

Après avoir terminer la réalisation de votre projet angular, Pour la faire

déployer, vous exécuter la commande : ng build après l’exécution de cette

commande vous aurez un dossier dist (par defualt) Ce dossier contient la

version compilé de votre projet, et c’est le contenu de ce fichier qu’on va

le mettre dans le server,

MERCI POUR VOTRE ATTENTION