Angular Framework:

Concepts de base et Architecture

Master Ingénierie Informatique Big Data et Cloud Computing (II-BDCC)
Filière d’Ingénieur Ingénierie Informatique Big Data et Cloud Computing (II-BDCC)
Filière d’Ingénieur Génie du Logiciel et Systèmes Informatiques Distribués (GLSID)

REST
REST
API

Mohamed Youssfi, Enseignant Chercheur, ENSET Mohammedia, UH2C, Lab. Informatique, Intelligence Artificielle et Cyber Sécurité (2IACS)
 Angular Framework:
Total Demo
Master Ingénierie Informatique Big Data et Cloud Computing (II-BDCC)
Filière d’Ingénieur Ingénierie Informatique Big Data et Cloud Computing (II-BDCC)
Filière d’Ingénieur Génie du Logiciel et Systèmes Informatiques Distribués (GLSID)

REST
REST
API

Mohamed Youssfi, Enseignant Chercheur, ENSET Mohammedia, UH2C, Lab. Informatique, Intelligence Artificielle et Cyber Sécurité (2IACS)
 Angular
— Angular Permet de créer la partie front end des applications web de type
SPA (Single Page Application réactive)
— Pour naviguer entre les différentes partie de cette application, Java Script
est utilisé pour envoyer des requêtes http 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. (Rendu HTML coté Client)

Partie Front end Partie back end

Client Web Serveur Web

[Link]
HTTP Back End
JSON API Rest SGBD
PHP, JEE, .Net, NodeJS
angular
 AngularJS / Angular
— Angular 1 (Agular JS) : V
◦ Première version de Angular qui est la plus populaire.
◦ Elle est basé sur une architecture MVC coté client.
M C
Les applications Angular 1 sont écrite en Java Script.
— Angular 2 (Angular) :
◦ Est une réécriture de Angular 1 qui est plus
performante, mieux structurée et représente le futur
de Angular.
◦ Les applications de Angular2 sont écrites en Type M V
Script qui est compilé et traduit en Java Script avant
d’être exécuté par les Browsers Web.
◦ Angular 2 est basée sur une programmation basée
sur les Composants Web (Web Componenet)
— Angular 4, 5, 6, …, 16
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

med@[Link]
 Single Page Application: SPA
— Angular Permet de créer la partie front end des
applications web de type SPA (Single Page Application)

Partie Front end Partie back end

Client Web Serveur Web

[Link]
HTTP Back End
JSON API Rest SGBD
PHP, JEE, .Net, NodeJS
angular

med@[Link]
 Single Page Application: SPA
— Angular Permet de créer la partie front end des
applications web de type SPA (Single Page Application)

Partie Front end Partie back end

Client Web Serveur Web

[Link]
HTTP Back End
JSON API Rest SGBD
PHP, JEE, .Net, NodeJS
angular

med@[Link]
Démarre avec Angular
— [Link]

med@[Link]
 Installation des outils
— Pour faciliter le développement
d’une application Angular, les outils
suivant doivent être installés :
◦ Node JS : [Link]
– 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 ([Link] ) :
– npm install -g @angular/cli

med@[Link]
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.

med@[Link]
Exécuter un projet Angular
— Pour excuter un projet Angular, 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.

med@[Link]
Edition du projet
— Plusieurs IDE professionnels peuvent être utilisé pour
éditer le code:
◦ Intellij, Web Storm, PHP Storm
◦ Visual Studio Code
— D’autres éditeurs classiques peuvent être aussi utilisé :
◦ Atom
◦ Sublime Text
◦ Etc …

med@[Link]
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

med@[Link]
Structure du projet Angular
Web Browser

[Link]

AppModule ([Link])

AppComponent

Type Script
HTML
M V
Data
Binding CSS

[Link]

Angular Framework
Structure du projet Angular
[Link]
<!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="[Link]">
</head>
<body>

<app-root> </app-root>

</body>
</html>

med@[Link]
Structure du projet Angular
[Link]
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from
'@angular/platform-browser-dynamic';

import { AppModule } from './app/[Link]';

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

if ([Link]) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

med@[Link]
Structure du projet Angular
[Link]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './[Link]';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

med@[Link]
Structure du projet Angular
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
title = 'app';
}

[Link]
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>

[Link]

Les fichiers spec sont des tests unitaires pour vos fichiers source. La convention pour
les applications Angular2 est d'avoir un fichier .[Link] 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 test'. med@[Link]
Plan de cours
— Démarrage de Angular
— Le bases de Angular
— Components and Data Binding
— Directives
— Services et Injection de dépendances
— Routage
— Observables
— Forms
— Pipes
— http
— Authentification
— Optimisation et NgModules
— Deployement
— Animations
— Tests

med@[Link]
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é avec TypeScript).
— 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.
med@[Link]
— Une application Angular se compose de :
◦ Un à plusieurs modules dont un est principal.
Architecture de Angular
◦ Chaque module peut inclure :
– Des composant web : La partie visible de la
‘application Web (IHM) Module Angular : [Link]
– Des services pour la logique applicative. Les
composants peuvent utiliser les services via le
principe de l’injection des dépendances. Components Services Directives
– Les directives : un composant peut utiliser des
C1 Service 1
directives Pipes
– Les pipes : utilisés pour formater l’affichage des Service 2
données dans els composants. C2 C3 C4
Service 3
C5 C6
C1: Root
Component

{{dateNaissance | date : ‘dd/MM/yyyy'}}

C5 C6 C2
<input type="text" required />
FrontEnd : Angular
Backend
C3 C4 Component
Service HTTP Web
JSON API DB
Component
 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/[Link]
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 { }

med@[Link]
 @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 corposant Racine du module. Seul le module racine doit
définir cette propriété.

src/app/[Link]

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 { }

med@[Link]
Démarrage de l’application
— Le module racine est démarré dans le fichier [Link]
— Par défaut le module racine s’appelle AppModule

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

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

import { AppModule } from './app/[Link]';

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

if ([Link]) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

med@[Link]
 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

med@[Link]
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'aide du
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.
[Link]
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
title = 'app';
}

[Link]
[Link]
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
med@[Link]
med@[Link]
 Création de nouveaux composants
— Pour créer facilement des composants Angular, on peut utiliser à
nouveau la commande ng comme suit :
◦ ng generate component NomComposant
— Dans notre exemple, nous allons créer deux composants : about et
contacts

med@[Link]
Structure du composant about
[Link]
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-about',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AboutComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

[Link]
<p>
about works!
</p>

[Link]

med@[Link]
 @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

med@[Link]
 Déclaration du composant
— Pour utiliser un composant, ce dernier
doit être déclaré dans le module :
[Link]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './[Link]';

import { AboutComponent } from './about/[Link]';
import { ContactsComponent } from './contacts/[Link]';

@NgModule({
declarations: [
AppComponent,
AboutComponent,
ContactsComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
med@[Link]
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
— Data Binding est un mécanisme qui permet de créer un lien asynchrone entre les
données du modèle avec les composants de la vue HTML
— Quand les données changent, le rendu des composants est regénéré
— Quand on saisie des données dans les champs d’une vue, les variables liées sont
automatiquement mise à jour

Classe du composant Partie HTML du composant

export class TestComponent {
counter : number =1; Output Data
name: string=""; String interpolation : {{data}}
increment() { Property Binding: [property]="data"
++[Link];
} React to User Events
<input type="text" [(ngModel)]="name">
Event Binding : (clik)="doSome()" <label>Name is : {{name}}</label>
decrement() { <button (click)="decrement()" [disabled]="counter==0">
--[Link]; -
} </button>
} Two Way Bindings <label>Counter: {{counter}}</label>
<button (click)="increment()" [disabled]="counter==10">
Two way binding: [(ngModel)]="data" +
</button>
 Exemples de Data Binding :
[Link]
[Link] <ul>
<li>Nom : {{[Link]}} </li>
export class AboutComponent { <li>Email : {{[Link]}} </li>
info={ nom:"Mohamed", <li>Tel : {{[Link]}} </li>
email:"med@[Link]", </ul>
[Link] <div>
}; <input
comments=[]; type="text"
[(ngModel)]="[Link]" >
comment={id:0,message:''}; <button
(click)="addComment()"
newComment=false; [disabled]="newComment">
Add comment
addComment() { </button>
if([Link]!=''){ </div>
<div *ngIf="[Link]>0; else
[Link]=[Link] noComments">
gth+1; <h3>Liste des messages :</h3>
[Link]({ <ul>
id:[Link], <li *ngFor="let c of comments">
message:[Link] } {{[Link]}} : {{[Link]}}</li>
); </ul>
[Link]=''; </div>
} <ng-template #noComments>
} <p> Liste des commentaires est vide</p>
med@[Link]
} </ng-template>
 Exemples de Data Binding :
[Link]
[Link] <ul>
<li>Nom : {{[Link]}} </li>
export class AboutComponent { <li>Email : {{[Link]}} </li>
info={ nom:"Mohamed", <li>Tel : {{[Link]}} </li>
email:"med@[Link]", </ul>
[Link] <div>
}; <input
comments=[]; type="text"
[(ngModel)]="[Link]" >
comment={date:null,message:''}; <button
(click)="addComment()"
newComment=false; [disabled]="newComment">
Add comment
addComment() { </button>
if([Link]!=''){ </div>
[Link]=new <div *ngIf="[Link]>0; else
Date(); noComments">
[Link]({ <h3>Liste des messages :</h3>
date:[Link], <ul>
message:[Link] } <li *ngFor="let c of comments">
); {{[Link]}} : {{[Link]}}</li>
[Link]=''; </ul>
} </div>
} <ng-template #noComments>
} <p> Liste des commentaires est vide</p>
med@[Link]
</ng-template>
Importer FormsModule pour ngModel
— Pour utiliser la directive ngModel, il est nécessaire d’importer le
module FormsModule de Angular.

[Link]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './[Link]';
import { AboutComponent } from './about/[Link]';

import { ContactsComponent } from './contacts/[Link]';

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

@NgModule({
declarations: [
AppComponent,
AboutComponent,
ContactsComponent
],
imports: [
BrowserModule, FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

med@[Link]
 Ajouter le Framework bootstrap css au projet

— L’un des moyen les plus élégant pour ajouter de

nouveau liens vers des fichiers css à [Link] est
de le faire à l’aide Angular CLI.
— Il faut d’abord installer bootstrap avec npm:
◦ npm install --save bootstrap@3
— Ensuite, ajouter le chemin de [Link] dans
le fichier .[Link]
— Ensuite démarre le serveur avec ng serve

med@[Link]
 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 : {{[Link]}}</li>
<li>Email : {{[Link]}}</li>
<li>Tel : {{[Link]}}</li>
</ul>
<div class="form-group">
<label>Message:</label>
<input type="text" [(ngModel)]="[Link]">
<button (click)="addComment()"
[disabled]="newComment" class="btn btn-primary">Add
comment</button>
</div>
<div *ngIf="[Link]>0; else noComments">
<h3>Liste des messages :</h3>
<ul class="list-group">
<li *ngFor="let c of comments" class="list-group-
item">
{{[Link]}}<span
class="badge">{{[Link]|date:'HH:mm:ss'}}</span></li>
</ul>
</div>
<ng-template #noComments>
<p> Liste des commentaires est vide</p>
</ng-template>

</div>
</div>
</div>

med@[Link]
 Partage des données entre Parent et Child Components
<parent-component>
— Considérons la hiérarchie suivante : <child-component></child-component>
</parent-component>
Parent Component
export class AppComponent {
currentItem = 'Television';
}

<app-item-detail [item]="currentItem"></app-item-detail>

Child Component
export class ItemDetailComponent {
@Input() item: string;
}

<p> Today's item: {{item}} </p>

 Partage des données entre Parent et Child Components

— Considérons la hiérarchie suivante :

Parent Component
export class AppComponent {
items = ['item1', 'item2', 'item3', 'item4'];
addItem(newItem: string) {
[Link](newItem);
} }
<app-item-output (newItemEvent)="addItem($event)"></app-item-output>
<ul> <li *ngFor="let item of items">{{item}}</li> </ul>

Child Component
export class ItemOutputComponent {
@Output() newItemEvent = new EventEmitter<string>();
addNewItem(value: string) {
[Link](value);
}
}
<label>Add an item: <input #newItem></label>
<button (click)="addNewItem([Link])">
Add to parent's list
</button>
 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.

HTML Template
< >
@Service 1 @Service 3

@Component
@Service 2
Injection d’un service dans un composant

export class ExempleComponent {

private exService:ExempleService;
constructor(ex:ExempleService) {
[Link]=ex;
}
}

Où

export class ExempleComponent {

constructor(private ex:ExempleService) { }
}
[Link] Exemple de service
import { Injectable } from '@angular/core';
@Injectable()
export class ExempleService {
constructor() { }
saveData(data) {
[Link]('saving data...');
}
getData() {
return 'gettig data...';
}
}

[Link]
import { Component, OnInit } from '@angular/core';
import {ExempleService} from "../[Link]";
@Component({
selector: 'app-exemple', templateUrl: './[Link]',
styleUrls: ['./[Link]’] })
export class ExempleComponent {
result:string
constructor(private exempleService:ExempleService) { }
onSave(data){
[Link](data);
}
onGetData() {
[Link] = [Link]();
}
med@[Link]
}
 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:"Mohamed", info=[Link]();
email:"med@[Link]", comments=[Link]();
[Link]
}; comment={id:0,message:'',date:null};
comments=[]; newComment=false;
constructor() { } addComment() {
getInfos(){ if([Link]!=''){
return [Link];
[Link]({
}
addComment(c) { message:[Link]});
[Link]=new Date(); [Link]=[Link]();
[Link](c); [Link]='';
} }
getAllComments() { }
return [Link]; }
}
}
Injection des dépendances
— Lorsque Angular 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@[Link]
 Enregistrement des services
— Pour utiliser un service, il faut préalablement enregistrer un fournisseur de 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.
[Link]
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: './[Link]',
styleUrls: ['./[Link]'],
providers: [AboutService]
})
med@[Link]
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 paquet Angular.

src/app /[Link] (import)

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

med@[Link]
 Configuration des routes
Import ...
import {RouterModule, Routes} from '@angular/router';

const appRoutes: Routes = [

{ path: 'about', component: AboutComponent },
{ path: 'contacts', component: ContactsComponent },
{ path: '',
redirectTo: '/about',
pathMatch: 'full'
}
];
@NgModule({
declarations: [
AppComponent,
AboutComponent,
ContactsComponent,
ExempleComponent
],
imports: [
BrowserModule, FormsModule, [Link](appRoutes)
],
providers: [AboutService, ExempleService],
bootstrap: [AppComponent]
})
export class AppModule { }
med@[Link]
 Router outlet
— Etant donnée cette configuration,
◦ Quand l’utilisateur tape :
[Link] ,
◦ 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.

[Link]
<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@[Link]
 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 :
[Link]

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

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

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

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

med@[Link]
 Créer un module séparé pour la
configuration des routes
app/[Link]
import {AboutComponent} from "./about/[Link]";
import {ContactsComponent} from "./contacts/[Link]";
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:[[Link](appRoutes)],
exports:[RouterModule]
})
export class AppRoutingModule {
}
[Link]
— Il est plus utile de créer un module séparé pour @NgModule({
configurer les routes au de le faire dans le module imports: [
principale. BrowserModule, FormsModule,
AppRoutingModule
— Il suffit de créer un fichier app/[Link] ]
— Ensuite importer ce module dans le module principal })
export class AppModule { }

med@[Link]
HTTP: Interaction avec la partie back end
— La plupart des applications Frontend communiquent avec les
services backend via le protocole HTTP.
— Les navigateurs modernes prennent en charge deux API
différentes pour effectuer des requêtes HTTP :
◦ l'interface XMLHttpRequest
◦ et l'API fetch ().
— Le HttpClient du le module @angular/common/http offre
une API HTTP client simplifiée pour les applications Angular
qui repose sur l'interface XMLHttpRequest exposée par les
navigateurs.
— Les avantages supplémentaires de HttpClient incluent des
fonctionnalités de test, des objets de requête et de réponse
typés, un mécanisme d’interception de requêtes et de
réponses, des apis observables et une gestion simplifiée des
erreurs.

med@[Link]
 HttpClientModule
— Avant de pouvoir utiliser HttpClient, vous devez
importer le module HttpClientModule angulaire.
— La plupart des applications le font dans le module racine
AppModule.
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent, LoginComponent, TasksComponent, NewTaskComponent,
RegistrationComponent
],
imports: [
BrowserModule, [Link](appRoutes), FormsModule, HttpClientModule
],
providers: [AuthenticationService],
bootstrap: [AppComponent]
})
export class AppModule { }

med@[Link]
 Exemple de Service avec HttpClientModule
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable()
export class AuthenticationService{
private host:string="[Link]

constructor(private http:HttpClient){ }

getTasks() : Observable{
return [Link]([Link]+"/tasks");
}

login(user){
return [Link]([Link]+"/login",user,{observe:'response'});
}

getTasksV2(){
return [Link]([Link]+"/tasks",
{headers:new HttpHeaders({'Authorization':'my-token'})});
}

saveTask(task){
return [Link]([Link]+"/tasks",task,{headers:new
HttpHeaders({'authorization':'my-token'})});
}
}

med@[Link]
 Exemple de composant
export class TasksComponent implements OnInit {
tasks;
constructor(public authService:AuthenticationService,private
router:Router) { }
ngOnInit() {
[Link]()
.subscribe(data=>{
[Link]=data;
[Link]();
},err=>{
[Link]();
[Link]('/login')
})

}
}

med@[Link]
 Exemple de composant
export class LoginComponent implements OnInit {
mode:number=0;
constructor(private authService:AuthenticationService,private
router:Router) { }

ngOnInit() {
}

onLogin(user){
[Link](user)
.subscribe(resp=>{
let jwt=[Link]('Authorization');
// [Link]([Link]('Authorization'));
[Link](jwt);
[Link]('/tasks');
},
err=>{
[Link]=1;
})
}

med@[Link]
Application
— Créer une application Web JEE qui permet de gérer des
contacts (id, nom, prénom, date de naissance, email, tel,
photo):
◦ Saisir et ajouter des contacts
◦ Chercher des contacts
◦ Éditer et modifier des contacts
◦ Supprimer des contacts
— L’application se compose de deux parties :
◦ La prtie BackEnd basée un Spring, Spring Data JPA et Hibernate.
(API Restful)
◦ La partie FrontEnd est basée sur Angular 4
med@[Link]
 Architecture
Micro Service

Spring Boot IOC Containner

Web DAO
<<Entity>>
Contact
HTML 5 <<service>>
HTTP, JSON <<interface>>
Angular 4 Contact ProduitRepository
BootStrap RestService
Spring Data
SGBD
JPA

Client Mobile HTTP, JSON DispatcherServlet Hibernate

Embedded Tomcat JDBC

Application

med@[Link]
Application

med@[Link]
Application

med@[Link]
Application

med@[Link]
 Module de routage : app/[Link]
import {AboutComponent} from "./about/[Link]";
import {ContactsComponent} from "./contacts/[Link]";
import {Routes, RouterModule} from "@angular/router";
import {NgModule} from "@angular/core";
import {DetailContactComponentComponent} from "./detail-contact-
component/[Link]";
import {NewContactComponent} from "./new-contact/new-
[Link]";
const appRoutes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'contacts', component: ContactsComponent },
{ path: 'detailContact/:id', component:
DetailContactComponentComponent },
{ path: 'newContact', component: NewContactComponent },
{ path: '',
redirectTo: '/about',
pathMatch: 'full'
}
];
@NgModule({
imports:[[Link](appRoutes)],
exports:[RouterModule]
})
export class AppRoutingModule { } med@[Link]
Service ContactService: app/service/[Link]
import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/catch"
import {Observable} from "rxjs";
@Injectable()
export class ContactService {
constructor(private http:Http){}

getAllContacts():Observable<any>{
return [Link]("[Link]
.map(resp=>[Link]());

}
getContact(id:number):Observable<any>{
return [Link]("[Link]
.map(resp=>[Link]());

}
saveContact(contact){
return [Link]("[Link]
.map(resp=>[Link]());
}
deleteContact(id:number){
return [Link]("[Link]
.map(resp=>resp);
}
} med@[Link]
Composant ContactsComponent: [Link]
import { Component, OnInit } from '@angular/core';
import {ContactService} from "../services/[Link]";
import {Router} from "@angular/router";
@Component({
selector: '[app-contacts]',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class ContactsComponent implements OnInit {
contacts=[];
constructor(
private contactService:ContactService,
private router:Router
) { }
ngOnInit() {
[Link]()
.subscribe(data=>[Link]=data);

}
detailContact(id:number){
[Link](["/detailContact",id]);
}
deleteContact(id:number){
[Link](id)
.subscribe(data=>{[Link]();});
}
}
med@[Link]
Composant ContactsComponent: [Link]
<div class="panel panel-primary">
<div class="panel-heading">Liste des contacts</div>
<div class="panel-body">
<table class="table table-striped">
<tr>
<th>ID</th><th>Nom</th><th>Prénom</th><th></th><th></th>
</tr>
<tr *ngFor="let c of contacts">
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<td>{{[Link]}}</td>
<!--
<td><a routerLink="/detailContact/{{[Link]}}">Detail</a></td>
-->
<td><a class="clickable" (click)="detailContact([Link])">Detail</a></td>
<td><a class="clickable" (click)="deleteContact([Link])">Delete</a></td>
</tr>
</table>
</div>
</div>

med@[Link]
Composant DetailContactComponent: detail-
[Link]
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {ContactService} from "../services/[Link]";

@Component({
selector: 'app-detail-contact-component',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class DetailContactComponentComponent implements OnInit {

constructor(
private route:ActivatedRoute,
private router:Router,
private contactService:ContactService) { }
contact={};
id:number;
ngOnInit() {
[Link]=+[Link]['id'];
[Link]([Link])
.subscribe(data=>[Link]=data);
}
}

med@[Link]
Composant DetailContactComponent: detail-
[Link]
<div class="panel panel-primary">
<div class="panel-heading">Détail Contact</div>
<div class="panel-body">
<div class="form-group">
<label>ID:</label>
<label>{{[Link]}}</label>
</div>
<div class="form-group">
<label>Nom:</label>
<label>{{[Link]}}</label>
</div>
<div class="form-group">
<label>Prénom:</label>
<label>{{[Link]}}</label>
</div>
<div class="form-group">
<label>Date Naissance:</label>
<label>{{[Link]|date:'dd/MM/yyyy'}}</label>
</div>
<div class="form-group">
<label>Email:</label>
<label>{{[Link]}}</label>
</div>
<div class="form-group">
<label>Tel:</label>
<label>{{[Link]}}</label>
</div>
<div class="form-group">
<label>Photo:</label>
<img src="[Link] width="100" height="100" class="img-
circle" >
</div>
</div>
</div> med@[Link]
Composant NewContactComponent: new-
[Link]
import { Component, OnInit } from '@angular/core';
import {ContactService} from "../services/[Link]";

@Component({
selector: 'app-new-contact',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class NewContactComponent implements OnInit {
contact={nom:"",prenom:"",email:"",dateNaissance:null,[Link]
mode="new";
constructor(private contactService:ContactService) { }

ngOnInit() {
}

saveContact(){
[Link]([Link])
.subscribe(data=>{[Link]='confirm';[Link]=data;});
}

newContact(){
[Link]={nom:"",prenom:"",email:"",dateNaissance:null,[Link]
[Link]='new';
}
}
med@[Link]
Composant NewContactComponent: new-
[Link]
— <div class="panel panel-primary" *ngIf="mode=='new'">
<div class="panel-heading">Nouveau Contact</div>
<div class="panel-body">
<div class="form-group">
<label class="control-lable">Nom:</label>
<input type="text" [(ngModel)]="[Link]" class="form-control">
</div>
<div class="form-group">
<label class="control-lable">Prénom:</label>
<input type="text" [(ngModel)]="[Link]" class="form-control">
</div>
<div class="form-group">
<label class="control-lable">Date naissance:</label>
<input type="date" [(ngModel)]="[Link]" class="form-
control">
</div>
<div class="form-group">
<label class="control-lable">Email:</label>
<input type="email" [(ngModel)]="[Link]" class="form-control">
</div>
<div class="form-group">
<label class="control-lable">Tel:</label>
<input type="tel" [(ngModel)]="[Link]" class="form-control">
</div>
<button (click)="saveContact()" class="btn ptn-primary">Save</button>
</div>
</div>
med@[Link]
Composant NewContactComponent: new-
[Link] (suite)
— <div class="panel panel-primary" *ngIf="mode=='confirm'">
<div class="panel-heading">Confirmation</div>
<div class="panel-body">
<div class="form-group">
<label class="control-lable">Id:</label>
<label class="control-lable">{{[Link]}}</label>
</div>
<div class="form-group">
<label class="control-lable">Nom:</label>
<label class="control-lable">{{[Link]}}</label>
</div>
<div class="form-group">
<label class="control-lable">Prénom:</label>
<label class="control-lable">{{[Link]}}</label>
</div>
<div class="form-group">
<label class="control-lable">Date Naissance:</label>
<label class="control-lable">{{[Link]}}</label>
</div>
<div class="form-group">
<label class="control-lable">Email:</label>
<label class="control-lable">{{[Link]}}</label>
</div>
<div class="form-group">
<label class="control-lable">Tel:</label>
<label class="control-lable">{{[Link]}}</label>
</div>
<button (click)="newContact()" class="btn ptn-primary">OK</button>
</div>
</div>
med@[Link]
Interaction avec La partie Backend
— Angular dispose d’un service http qui permet d’envoyer des
requêtes http Ajax vers les serveur Web
— La partie serveur exécute des traitement et renvoi à la partie Front
des données généralement au format JSON.
— Ces données sont généralement affichées en utilisant des
composants Web

Partie Front end Partie back end

Client Web Serveur Web

[Link] HTTP
Back End
JSON SGBD
API Rest
PHP, JEE, .Net, NodeJS
angular

med@[Link]
Application
— Application permettant de chercher des photos en
interagissant avec une API Rest
— [Link]
81dc7429a63c86e3b707d0429&q=casablanca&per_page=10&page=1

med@[Link]
Application
— Application permettant de chercher des photos en
interagissant avec une API Rest :
◦ [Link]
81dc7429a63c86e3b707d0429&q=casablanca&per_page=10&page=1

med@[Link]
API REST
— Voir [Link]

med@[Link]
Structure du projet

med@[Link]
 [Link]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './[Link]';

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

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,FormsModule, HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

med@[Link]
 [Link]
import { Component } from '@angular/core';
import {Http} from "@angular/http";
import "rxjs/add/operator/map"
@Component({
selector: 'app-root',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class AppComponent {
motCle:string=""; images:{hits:null}; pageSize:number=5; currentPage:number=1;
totalPages:number; pages:Array<number>=[]; mode='LIST'; currentImage=null;

getImages(){
[Link]("[Link]
81dc7429a63c86e3b707d0429&q="+[Link]+" &per_page="+[Link]+" &page="+
[Link])
.map(resp=>[Link]())
.subscribe(data=>{
[Link]=data;
[Link]=[Link]['totalHits'] / [Link];
if([Link]['totalHits'] % [Link] !=0)
[Link]+=1;
[Link]=new Array([Link]);
});
}
gotoPage(i:number){ [Link]=i; [Link](); }
detailImage(im){ [Link]='DETAIL'; [Link]=im; }

constructor(private http:Http){

}
}

med@[Link]
 [Link]
<p></p>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Recherche de Photos</div>
<div class="panel-body">
<div class="form-group">
<label>Mot Clé:</label>
<input type="text" [(ngModel)]="motCle">
<button class="btn btn-primary"
(click)="getImages()">Chercher</button>
</div>
</div>
</div>

med@[Link]
 [Link]
<div *ngIf="mode=='LIST'">
<div class="row">
<div *ngFor="let im of [Link]" class="col-md-3 col-xs-12">
<div class="panel panel-primary hauteur">
<div class="panel-heading">{{[Link]}}</div>
<div class="panel-body">
<p>Size: <strong>{{[Link]}} X
{{[Link]}}</strong></p>
<img (click)="detailImage(im)"
src="{{[Link]}}" class="img-thumbnail clickable">
<p>By <strong>{{[Link]}}</strong></p>
</div>
</div>
</div>
</div>
<div class="row">
<ul class="nav nav-pills">
<li [ngClass]="{'active':currentPage==(i+1)}" *ngFor="let p of
pages; let i=index" class="clickable">
<a (click)="gotoPage(i+1)">{{i+1}}</a>
</li>
</ul>
</div>
</div>
</div>

med@[Link]
 [Link]
<div *ngIf="mode=='DETAIL'" class="container">
<div class="container padding">
<button class="btn btn-primary" (click)="mode='LIST'">Mode
Liste</button>
</div>
<div class="panel panel-primary">
<div class="panel-heading">{{[Link]}}</div>
<div class="panel-body">
<p>
Size: <strong>{{[Link]}} X
{{[Link]}}</strong>
, By {{[Link]}}
</p>
<div>
<img src="{{[Link]}}" class="img-circle">
<img src="{{[Link]}}" class="img-
thumbnail">
</div>

</div>
</div>
</div>

med@[Link]
 [Link]
.padding {
padding: 5px;
margin: 5px;

}
.border{
border: 1px dotted gray;
}
.hauteur {
height: 280px;
}

med@[Link]
 Développement Mobile
IONIC Framework

Mohamed Youssfi
Laboratoire Signaux Systèmes Distribués et Intelligence Artificielle (SSDIA)
ENSET, Université Hassan II Casablanca, Maroc
Email : med@[Link]
Supports de cours : [Link]
Chaîne vidéo : [Link]
Recherche : [Link]
 Développement Web
- Back End : Spring Boot
- Front End : Angular 4

Mohamed Youssfi
Laboratoire Signaux Systèmes Distribués et Intelligence Artificielle (SSDIA)
ENSET, Université Hassan II Casablanca, Maroc
Email : med@[Link]
Supports de cours : [Link]
Chaîne vidéo : [Link]
Recherche : [Link]