en Ingénierie des systèmes d’information et de Communication

Angular

Réalisé par: Sous l’encadrement du:

Amina BOUJEGLAT Prof.Mohammed Lachgar
Siham EL MAOUI

1
 Le plan
I.Introduction

II.Prérequis

III.Les avantages

IV.ng-cli: la ligne de commande pour Angular

V.Architecture d’angular

VI.conclusion

2
 Introduction

Angular est un cadriciel coté client open source basé sur Typescript

Dirigée par l’équipe du projet Angular à Google et par une

communauté de particuliers et de sociétés.

3
 Pré-requis

Des connaissances solides en HTML

Des bases en TypeScript ou une bonne connaissance du JavaScript

Des bases en CSS/SCSS

4
 Type script

 Permet le typage strict

 Permet les fonctions lambda

 Permet la création de classes et d’interfaces

5
 Les avantages

 Multiplateforme

 Maintenu par Google

 Communauté active

 Type script

 Testable

6
 Outil de ligne de commande
La ligne de commande pour
Angular

7
 Node.js version 8.x or 10.x

 npm package manager

8
Architecture d’Angular

9
 Le composant:

Un composant Angular est constitué de deux parties :

La classe:
C’est là qu’on trouve les données à afficher et la logique
applicative.
Le template. C’est la partie du composant qui sera affichée à
l’utilisateur.
Pour faire une analogie avec le pattern MVC (Model-View-
Controller), on pourrait dire :
Classe ≈ Contrôleur.
Template ≈ Vue.

C’est juste une analogie, car la terminologie MVC n’est pas utilisée
dans le cadre d’Angular.

10
 Les modules:

Un module Angular est un mécanisme permettant de :

regrouper des composants (mais aussi des services,
directives, pipes etc...)
définir leurs dépendances
et définir leur visibilité.

Un module Angular est défini simplement avec une classe

(généralement vide) et le décorateur NgModule.

11
 NgModule:

Le but d’un NgModule est simplement de regrouper les

composants et/ou services qui vont ensemble.

Rien de plus, rien de moins.

Vous pouvez donc les comparer à un package Java 

12
Les modules:

13
Les modules:

 Déclarations

 Exports

 Imports

14
15
 Un service:

Définition : 

Un service Angular représente un bout de logique applicative.

Par exemple, il est fréquent d’avoir un service qui gère:

 la communication avec la base de données

ou un service qui gère l’authentification de l’utilisateur.

Les services Angular sont généralement globaux (accessibles

partout dans l’application) et ce sont des singletons (ils n’existent
qu’en un seul exemplaire).
16