Développement Web FrontEnd

Framework Angular

Hachicha Hassan
ISET SFAX
hachicha.hs@gmail.com
Développement Web FrontEnd
Framework Angular
 Angular
 Angular Permet de créer la partie front end des applications web de type
SPA (Single Page Application réactive)
 Une SPA est une application qui contient une seule page HTML
(index.html) récupérée du serveur.
 Pour naviguer entre les différentes partie de cette application, Java Script
est utilisé pour envoyer des requêtes http (AJAX) vers le serveur pour
récupérer du contenu dynamique généralement au format JSON.
 Ce contenu JSON est ensuite affiché coté client au format HTML dans la
même page.

Partie Front end Partie back end

ClientWeb ServeurWeb

Index.html
HTTP Back End
JSON API Rest SGBD
PHP,JEE,.Net,NodeJS
angular
Angular 1, 2,4,5,6,7,8
 Angular 1 (Agular JS) :
◦ Première version de Angular qui est la pluspopulaire.
◦ Elle est basé sur une architecture MVC coté client.Les
applications Angular 1 sont écrite en Java Script.
 Angular 2 (Angular) :
◦ Est une réécriture deAngular 1 qui est plus performante,mieux
structurée et représente le futur deAngular.
◦ Les applications deAngular2 sont écrites enType Script qui est
compilé et traduit en Java Script avant d’être exécuté par les
BrowsersWeb.
◦ Angular 2 est basée sur une programmation basée sur les
Composants Web (Web Componenet)
 Angular 4,5,6,7,8,9,10,11 sont de simples mises à jour
deAngular 2 avec des améliorations au niveau
performances.
Angular avec Type Script
 Pour développer une application Angular il est
recommandé d’utiliser Type Script qui sera
compilé et traduit en Java Script.
 Type Script est un langage de script structuré et
orienté objet qui permet de simplifier le
développement d’applications Java Script
Compilé en
Type Script Java Script

Futur Java script

Langage structuré
Typé et orienté objet
 Single Page Application:SPA
 Angular Permet de créer la partie front end des
applications web de type SPA (Single PageApplication)

Partie Front end Partie back end

ClientWeb ServeurWeb

Index.html
HTTP Back End
JSON API Rest SGBD
PHP,JEE,.Net,NodeJS
angular
Démarre avec Angular
 https://angular.io/guide/quickstart

med@youssfi.net
Installation des outils
 Pour faciliter le développement d’une
application Angular, les outils suivantdoivent
être installés :
◦ Node JS :https://nodejs.org/en/download/
 Node JS installe l’outil npm (Node Package Manager) qui
permet de télécharger et installer des bibliothèques Java
Script.
◦ Installer ensuite Angular CLI (Command Line
Interface) qui vous permet de générer,compiler,
tester et déployer des projets angular
(https://cli.angular.io/ ) :
 npm install -g @angular/cli
Création d’un nouveau projet Angular

 Pour générer la structure d’un projet

Angular, on utilise Angular CLI via sa
commange ng suivie des options new et le
nom du projet.
◦ ng new FirstApp
 Cette commande génère les différents
fichiers requis par une application basique
Angular et installe aussi toutes les
dépendances requise par ce projet.
 Exécuter un projet Angular

 Pour excuter un projetAngular,on exécuter la

commande suivante à partir de la racine du
projet
◦ ng serve
 Cette commande compile le code source du
projet pour transpiler le code TypeScript en
Java Script et en même temps démarre un
serveur Web local basé sur Node JS pour
déployer l’application localement.
 Pour tester le projet généré, il suffit de langer
le Browser et taper l’url : http:// localhost:4200
 Dans l’étape suivante, nous allons regarder la
structure du projet généré par Angular CLI.
Edition du projet
 Plusieurs IDE professionnels peuvent être
utilisé pour éditer le code:
◦ Web Storm, PHP Storm
◦ Visual Studio Code
◦ Eclipse avec pluginAngular
 D’autres éditeurs classiques peuvent être
aussi utilisé :
◦ Atom
◦ SublimeText
◦ Etc …
Structure du projet Angular
Fichier de configuration du projet
Dépendances externes du projets (Librairies Java Script et CSS)

Logique applicative de votre projet : Les composants, Les services ..

C’est dans ce dossier app ou vous allez passer votre temps de dev

Code source relatif à votre projet

Fichier de configuration du projet

Structure du projet Angular
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FirstApp</title>
<base href="/">

<meta name="viewport" content="width=device-

width, initial-scale=1">
<link rel="icon" type="image/x-icon"
href="favicon.ico">
</head>
<body>

<app-root> </app-root>

</body>
</html>
Structure du projet Angular
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from
'@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from
'./environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
Structure du projet Angular
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Structure du projet Angular
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

app.component.html
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>

app.component.css

Les fichiers spec sont des tests unitaires pour vos fichiers source. La convention pour
les applications Angular est d'avoir un fichier .spec.ts pour chaque fichier .ts. Ils sont
exécutés à l'aide du framework de test javascript Jasmine via le programme de tâches
Karma lorsque vous utilisez la commande 'ng med@youssfi.net
test'.
Plan de cours
 Démarrage deAngular
 Le bases de Angular
 Components and Data Binding
 Directives
 Services et Injection de dépendances
 Routage
 Observables
 Forms
 Pipes
 http
Type Script
 TypeScript est un langage de programmation libre et open
source développé par Microsoft qui a pour but d'améliorer
et de sécuriser la production de code JavaScript.
 C'est un sur-ensemble de JavaScript (c'est-à-dire que tout
code JavaScript correct peut être utilisé avecTypeScript).
 Le code TypeScript est transcompilé en JavaScript,pouvant
ainsi être interprété par n'importe quel navigateur web
ou moteur JavaScript.
 Il a été cocréé par Anders Hejlsberg, principal inventeur
de C#
 TypeScript permet un typage statique optionnel des variables
et des fonctions, la création de classes et d'interfaces,
l'import de modules, tout en conservant l'approche non-
contraignante de JavaScript.
 Il supporte la spécification ECMAScript 6.
 Architecture de Angular
 Angular est un Framework pour créer la partie Front End des applications
web en utilisant HTML et JavaScript ou TypeScript compilé en JavaScript.
 Une application Angular se compose de :
◦ Un à plusieurs modules dont un est principal.
◦ Chaque module peut inclure :
 Des composant web : La partie visible de la ‘application Web (IHM)
 Des services pour la logique applicative. Les composants peuvent utiliser les
services via le principe de l’injection des dépendances.
 Les directives : un composant peut utiliser des directives
 Les pipes : utilisés pour formater l’affichage des données dans els composants.

Module Angular :app.module.ts

Components Services Directives

C1 Service 1 Pipes
C2 C3 C4 Service 2

Service 3
C5 C6
 Modules
 Les applications angulaires sont modulaires
 Angular possède son propre système de modularité appelé modules
angulaires ou NgModules.
 Chaque application Angular possède au moins une classe de module
angulaire: le module racine,appelé classiquement AppModule.
 Un module angulaire est une classe avec un décorateur @NgModule.
 Les décorateurs sont des fonctions qui modifient les classes JavaScript.
 Angular possède de nombreux décorateurs qui attachent des
métadonnées aux classes pour configurer et donner le sens à ces classes.

src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
 @NgModule
 @NgModule est un décorateur qui pend en parameter un objet javascript
qui contient des métadonnes don’t les propriétés décrivent le module. Les
propriétés les plus importantes sont:
◦ declarations : la classe représentant le module. Angular a trois types de classes de modules
:components,directives,and pipes.
◦ exports – Pour exporter les classes utilisables dans d’autres modules.
◦ imports – Pour importer d’autres modules.
◦ providers – Pour déclarer les fabriques de services.
◦ bootstrap – Pour declarer le composant Racine du module. Seul le module racine doit
définir cette propriété.

src/app/app.module.ts

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

import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
 Démarrage de l’application
 Le module racine est démarré dans le fichier main.ts
 Par défaut le module racine s’appelleAppModule

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);
 Components
 Les composants sont des éléments importants dans Angular.
 L’application est formée par un ensemble de composants.
 Chaque composant peut imbriquer d’autres composants définissant
ainisi une structuré hiérarchique.
 Le composant racine s’appelle Root Component Root
Component
Component 1 Component 2 Component 3

Home A B

Component 6
Component 5

Component 4
Components
 Chaque composant se compose principalement des éléments suivants:
◦ HTML Template : représentant sa vue
◦ Une classe représentant sa logique métier
◦ Une feuille de style CSS
◦ Un fichier spec sont des tests unitaires Ils sont exécutés à l'aidedu
framework de test javascript Jasmine via le programme de tâches
Karma lorsque vous utilisez la commande 'ng test'.
 Les composants sont facile à mettre à jour et à échanger entre les
différentes parties des applications.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

app.component.html
app.component.css
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
 Création de nouveaux composants
 Pour créer facilement des composantsAngular,on peut utiliser à nouveau la
commande ng comme suit :
◦ ng generate component NomComposant ou bien ng g c NomComposant
 Dans notre exemple,nous allons créer deux composants :about et contacts
Structure du composant about
about.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

about.component.html
<p>
about works!
</p>

about.component.css
 @Component
 Un composant est une classe qui possède le décorateur @Component
 Ce décorateur possède les propriétés suivantes :
◦ selector : indique la déclaration qui permet d’insérer le composant dans le
document HTML. Cette déclaration peut être :
 Le nom de la balise associé à ce composant
 selector :app-about
 Dans ce cas le composant sera inséré par : <app-about></app-about>
 Le nom de l’attribut associé à ce composant :
 selector :[app-about]
 Dans ce cas le composant sera inséré par : <div app-about></div>
 Le nom de la classe associé à ce composant :
 selector :.app-about
 Dans ce cas le composant sera inséré par : <div class="app-about"></div>
◦ template ou templateUrl :
 template : permet de définir dans à l’intérieur du décorateur le code
HTML représentant la vue du composant
 templateUrl : permet d’associer un fichier externe HTML contenant la
structure de la vue du composant
◦ styleUrls : spécifier les feuilles de styles CSS associées à ce
composant
 Déclaration du composant
 Pour utiliser un composant, ce dernier
doit être déclaré dans le module :
App.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { AboutComponent } from './about/about.component';
import { ContactsComponent } from './contacts/contacts.component';

@NgModule({
declarations: [
AppComponent,
AboutComponent,
ContactsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
med@youssfi.net
Utilisation composant
 Un composant peut être inséré dans n’importe que partie HTML de
l’application en utilisant son selecteur associé.
 Dans cet exemple les deux composants générés sont insérés à l’intérieur
du composant racine AppComponent
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
<app-about></app-about>
<div app-contacts></div>
</div>

AppModule
AppModule
AppComponent

AppComponent
AboutComponent ContactsComponent

About Contacts
Component Component
Data Binding
 Pour insérer dynamiquement des données de l’applications
dans les vues des composants, Angular définit des techniques
pour assurer la liaison des données.
 Data Binding = Communication

Classe du composant Partie HTML du composant

Output Data

Type Script String interpolation : {{data}} Vue

Property Binding:[property]="data" HTML
Classe
du composant Templates
React to User Events
Logique métier
Event Binding :(clik)="doSome()" {{data}}
data:string
<input [(ngModel)]="data" >

Two Way Bindings

Two way binding: [(ngModel)]="data"
 Exemples de Data Binding :
about.component.html
about.component.ts <ul>
<li>Nom : {{info.nom}} </li>
export class AboutComponent { <li>Email : {{info.email}} </li>
info={ nom:"Mohamed", <li>Tel : {{info.tel}} </li>
email:"hachicha.hs@gmail.com", </ul>
tel:"95240545" <div>
}; <input
comments=[]; type="text"
[(ngModel)]="comment.message" >
comment={id:0,message:''}; <button
(click)="addComment()"
newComment=false; [disabled]="newComment">
Add comment
addComment() {
</button>
if(this.comment.message!=''){ </div>
<div *ngIf="comments.length>0; else
this.comment.id=this.comments.len noComments">
gth+1; <h3>Liste des messages :</h3>
this.comments.push({ <ul>
id:this.comment.id, <li *ngFor="let c of comments">
message:this.comment.message } {{c.id}} : {{c.message}}</li>
); </ul>
this.comment.message=''; </div>
} <ng-template #noComments>
} <p> Liste des commentaires est vide</p>
} </ng-template> med@youssfi.net
 Exemples de Data Binding :
about.component.html
about.component.ts <ul>
<li>Nom : {{info.nom}} </li>
export class AboutComponent { <li>Email : {{info.email}} </li>
info={ nom:"Hachicha", <li>Tel : {{info.tel}} </li>
email:"hachicha.hs@gmail,com", </ul>
tel:"0661326837" <div>
}; <input type="text"
comments=[];
[(ngModel)]="comment.message" >
comment={date:null,message:''}; <button
(click)="addComment()"
newComment=false; [disabled]="newComment">
Add comment
addComment() {
</button>
if(this.comment.message!=''){
</div>
this.comment.date=new
<div *ngIf="comments.length>0; else
Date();
noComments">
this.comments.push({
<h3>Liste des messages :</h3>
date:this.comment.date, <ul>
message:this.comment.message } <li *ngFor="let c of comments">
); {{c.date}} : {{c.message}}</li>
this.comment.message=''; </ul>
} </div>
} <ng-template #noComments>
} <p> Liste des commentaires est vide</p>
</ng-template> med@youssfi.net
Importer FormsModule pour ngModel
 Pour utiliser la directive ngModel, il est nécessaire d’importerle
module FormsModule deAngular.

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';

import { ContactsComponent } from './contacts/contacts.component';

import {FormsModule} from "@angular/forms";

@NgModule({
declarations: [
AppComponent,
AboutComponent,
ContactsComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
 Ajouter le Framework bootstrap css au projet

 L’un des moyens pour ajouter bootstrap et Jquery au projet est d’ajouter les
lignes suivantes au fichier index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/

3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/

jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/

bootstrap.min.js"></script>
 Fichier about.component.css

.container
{
width: 500px;
margin-right: auto;
margin-left: auto;
margin-top:40px;
margin-left: 30px;

}
 Nouveau Look avec Bootstrap
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">About Component</div>
<div class="panel-body">
<ul class="">
<li>Nom:{{ info.nom}}</li>
<li>Email:{{ info.email}}</li>
<li>Nom:{{ info.tel}}</li>
</ul>
<div class="form-group">
<label>Message:</label>
<input type="text" [(ngModel)]="comment.message">
<button (click)="addComment()"[disabled]="newComment"
class="btn btn-primary"> Add comment</button>
</div>
<div *ngIf="comments.length>0; else noComments">
<h3>Liste des messages :</h3>
<ul class="list-group">
<li *ngFor="let c of comments" class="list-group-item">
{{c.message}}<span class="badge">{{c.date|date:'HH:mm:ss'}}</span></li>
</ul>
</div>
<ng-template #noComments>
<p> Liste des commentaires est vide</p>
</ng-template>
</div>
</div>
</div>
 Services
 Un service est une catégorie large qui englobe toute valeur, fonction ou fonctionnalité
dont votre application a besoin.
 Un service est généralement une classe avec un but étroit et bien défini.
 Généralement, les composants se limite à l’affichage et à la gestion des événements
utilisateurs dans la vue du composant. L’exécution des traitements en local ou en back
end sont attribués aux services.
 Quand un événement survient dans la vue, le composant fait appel à des fonctions
dans les services pour effectuer des traitements et fournir des résultats.
 Généralement, c’est les service qui interagissent avec la partie back end de
l’application en envoyant des requêtes HTTP.
 Généralement c’est les composants qui consomme les services, toutefois,un
service peut consommer d’autres services.
 l’utilisation d’un service se fait via le principe de l’injection des dépendances.

HTMLTemplate
< >
@Service 1 @Service 3

@Component
@Service 2
exemple.service.ts
Exemple de service
import { Injectable } from '@angular/core';
@Injectable()
export class ExempleService {
constructor() { }
saveData(data) {
console.log('saving data at back end....');
}
getData() {
console.log('gettig data from back end ...');
}
}

exemple.component.ts
import { Component, OnInit } from '@angular/core';
import {ExempleService} from "../exemple.service";
@Component({
selector: 'app-exemple', templateUrl: './exemple.component.html',
styleUrls: ['./exemple.component.css']
})
export class ExempleComponent {
constructor(private exempleService:ExempleService) { }
onSave(data){
this.exempleService.saveData(data);
}
onGetData() {
return this.exempleService.getData();
}
} med@youssfi.net
 Injection des dépendances
 L'injection de dépendance est une façon de fournir une
nouvelle instance d'une classe avec les dépendances
entièrement formées dont elle a besoin.
 La plupart des dépendances sont des services.
import { Injectable } from
'@angular/core'; export class AboutComponent {
constructor(private
@Injectable() abouteService:AboutService) { }
export class AboutService {
info={
nom:"Hachicha", info=this.abouteService.getInfos();
email:"hachicha.hs@gmail.com", comments=this.abouteService.getAllComments();
tel:"95240545"
}; comment={id:0,message:'',date:null};
comments=[]; newComment=false;
constructor() { } addComment() {
getInfos(){ if(this.comment.message!=''){
return this.info; this.abouteService.addComment({
}
addComment(c) { c.date=new message:this.comment.message});
Date(); this.comments=this.abouteService.getAllComments();
this.comments.push(c); this.comment.message='';
} }
getAllComments() { }
return this.comments; }
}
}
Injection des dépendances
 LorsqueAngular crée un composant,il demande d'abord à un
injecteur les services requis.
 Un injecteur maintient un conteneur d'instances de service qu'il a
créé précédemment.
 Si une instance de service demandée n'est pas dans le conteneur,
l'injecteur en fait une et l'ajoute au conteneur avant de renvoyer le
service àAngular.
 Lorsque tous les services demandés ont été résolus et retournés,
Angular peut appeler le constructeur du composant avec ces
services comme arguments.
 Il s'agit d'une injection de dépendance.

med@youssfi.net
 Enregistrement des services
 Pour utiliser un service, il faut préalablement enregistrer un fournisseurde ce
service avec l'injecteur.
 Un fournisseur de service est une fabrique qui permet de gérer l’instanciation
des services.
 Vous pouvez enregistrer les fournisseurs en modules ou en composants.
 En général,ajoutez des fournisseurs au module racine afin que la même instance
d'un service soit disponible partout.
app.module.ts
imports: [
BrowserModule, FormsModule
],
providers: [AboutService, ExempleService],
bootstrap: [AppComponent]

Sinon, enregistrez-vous à un niveau de composant dans la propriété des fournisseurs

des métadonnées @Component. Dans ce cas le service est instancié pour chaque
nouvelle instance du composant.
@Component({
selector: 'app-about',
templateUrl: './about.component.html',
styleUrls: ['./about.component.css'],
providers: [AboutService]
})
med@youssfi.net
Routage et Navigation
 Le routeur angulaire permet la navigation d'une vue à l'autre
lorsque les utilisateurs exécutent des tâches d'application.
 Le routeur angulaire est un service facultatif qui présente
une vue de composant particulière pour une URL donnée.
 Il ne fait pas partie du noyau angulaire.
 C'est dans son propre paquet de bibliothèque, @
angulaire/router.
 Importez ce dont vous avez besoin comme vous le feriez à
partir de tout autre paquetAngular.

src/app /app.module.ts (import)

import { RouterModule, Routes } from '@angular/router';

 Le fichier app-routing,module.ts gère les routes avec

angular
 module pour la configuration des routes

app/app-routing.module.ts
import {AboutComponent} from "./about/about.component";
import {ContactsComponent} from "./contacts/contacts.component";
import {Routes, RouterModule} from "@angular/router";
import {NgModule} from "@angular/core";
const appRoutes: Routes = [
{ path: 'about', component: AboutComponent },

{ path: 'contacts', component: ContactsComponent },

{ path: '',
redirectTo: '/about', pathMatch: 'full'
}
];
@NgModule({
imports:[RouterModule.forRoot(appRoutes)], exports:[RouterModule]
})
export class AppRoutingModule {
}

app.module.ts
@NgModule({
imports: [
BrowserModule, FormsModule, AppRoutingModule
]
})
export class AppModule { }
 Router outlet
 Etant donnée cette configuration,
◦ Quand l’utilisateur tape :
http://localhost:4200/about ,
◦ le routeur cherche et charge le
composant AboutComponent et l’affiche
dans un élément <router-outlet>
</router-outlet> .
◦ Cet élément est sensé se trouver dans la
vue du composant racine.

app.component.html
<div class="container spacer">
<div class="container">
<button routerLink="/about" class="btn btn-primary">About</button>
<button routerLink="/contacts" class="btn btn-primary">Contacts</button>
</div>
<div class="container spacer">
<router-outlet></router-outlet>
</div>
</div>

med@youssfi.net
 Routage et Navigation
 Il est également possible de naviguer entre les différentes routes en utilisant la
méthode navigate() du service Router. Pour cela le service Router doit être injecté
dans la classe composant.
 L’exemple suivant montre le code de la classe du composant AppComponent :
app.component.ts

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

import {Router} from "@angular/router";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(private router:Router){}
onAbout(){
this.router.navigate(['about']);
}
}

<button (click)="onAbout()" class="btn btn-primary">About</button>

med@youssfi.net