Angular : introduction

1 / 50
Plan
1 Introduction
2 Installations
Angular
IDE
Devtools
3 Commandes de base
Création
Démarrage d’un serveur local
4 Structure d’une application
Non-standalone
Standalone
5 Arrêter la génération de fichiers de tests
6 Commandes utiles

2 / 50
 Introduction

Angular

Angular

Framework JavaScript (ou TypeScript ou Dart : langage de Google)

Open-source

Présenté par Google en 2009

Permettant de créer principalement des applications web

Front-End
Single page

Et aussi mobiles (Ionic ou NativeScript)

3 / 50
 Introduction

Angular respecte l’architecture MVVM

MVVM : Model-View-ViewModel
Model : représenté généralement par une classe référencée par
la couche d’accès aux données (classe ou interface TypeScript).
View H I ©
U EL
O
contenant la disposition et l’apparence de ce qu’un utilisateur voit à
l’écran,
f E LM
r e
recevant l’interaction avec l’utilisateur : clic, saisie, survol...
ch
ViewModel ©A
remplaçant du contrôleur dans l’architecture MVC,
connecté à la vue par le data binding,
représenté dans Angular par un fichier *.[Link].

H & H: Research and Training 4 / 50

 Introduction

Angular

Angular utilise :

H I ©
EL
les composants web

O U
LM
l’injection de dépendance
le DOM Virtuel
r e f E
ch
©A
le change detection

H & H: Research and Training 5 / 50

 Introduction

Angular

Injection de dépendance ?
H I ©
EL
concept connu en programmation orientée objet.
U
O
f E LM
utilisé par plusieurs frameworks Back-End (Spring, Symfony...).

r e
consistant à utiliser des classes sans faire de l’instanciation
ch
statique.
©A

H & H: Research and Training 6 / 50

 Introduction

Angular
DOM Virtuel ?

introduit, initialement, par React.

une représentation en mémoire du DOM physique.

permettant des mises à jour plus rapides et efficaces en ne modifiant que les parties
nécessaires de l’interface utilisateur avant de synchroniser ces changements avec le DOM
physique.

H & H: Research and Training 7 / 50

 Introduction

Angular
DOM Virtuel ?

introduit, initialement, par React.

une représentation en mémoire du DOM physique.

permettant des mises à jour plus rapides et efficaces en ne modifiant que les parties
nécessaires de l’interface utilisateur avant de synchroniser ces changements avec le DOM
physique.

Remarque

Les modifications apportées au DOM physique entraı̂nent généralement des opérations

coûteuses en termes de temps de traitement.

Chaque modification peut déclencher des réorganisations et des recalculs complexes de

la mise en page.

H & H: Research and Training 7 / 50

 Introduction

Angular

Change detection ?

réalisé par la librairie [Link] (qu’on peut trouver dans

node modules).
H I ©
EL
OU
utilisé pour synchroniser la vue avec le composant.
M
chaque composant dispose
f E L
d’un change detector qui surveille en
h r e
particulier les expressions
c utilisées dans l’interpolation ou le

©A
propriété binding.
un changement de la valeur retournée par l’expression ⇒ mise à
jour de la vue.

8 / 50
 Introduction

Angular

Quelques outils utilisés par Angular

npm (node package manager) : le gestionnaire de paquets par défaut pour une
application JavaScript.

H I ©
angular-cli command line interface : outil proposé par Google pour faciliter la création et
la construction d’une application Angular en exécutant directement des commandes.

U EL
webpack : bundler JavaScript
O
E
construit le graphe de dépendances.
f LM
ch r e
regroupe des ressources de même nature (.js ou .css...) dans un ou plusieurs

©A
bundles.

fonctionne avec un système de module : un fichier JS est un module, un fichier CSS

est un module...

Ivy : moteur de compilation et de rendu utilisé partiellement dans Angular 8,

intégralement depuis la version 9. Il permet d’accélérer la compilation et d’avoir une
meilleure lisibilité des messages d’erreur.

9 / 50
 Introduction

Angular

Les différentes versions d’Angular

Angular 1 (ou AngularJS) sorti en 2009 : utilisant Angular 11 sorti en novembre 2020
JavaScript
Angular 12 sorti en mai 2021
Angular 2 sorti en octobre 2014 : remplacement du
JavaScript par TypeScript
H I ©
EL
Angular 13 sorti en novembre 2021
Angular 4 sorti en décembre 2016

O U
Angular 14 sorti en juin 2022
Angular 5 sorti en novembre 2017

f E LM Angular 15 sorti en novembre 2022

Angular 6 sorti en mai 2018

ch r e Angular 16 sorti en mai 2023

©A
Angular 7 sorti en octobre 2018

Angular 17 sorti en novembre 2023

Angular 8 sorti en mai 2019

Angular 9 sorti en février 2020 Angular 18 sorti en mai 2024

Angular 10 sorti en juin 2020 Angular 19 prévu pour le 14 novembre 2024

10 / 50
 Introduction

Angular

Quelques sites Web réalisés avec Angular

[Link]

H & H: Research and Training 11 / 50

 Introduction

Angular

4 types de fichiers

.html .(s)css .ts .json

templates style composants directives ... configurations

services pipes

H & H: Research and Training 12 / 50

 Introduction

Angular

Remarques

Le code TypeScript est compilé et remplacé par un code

JavaScript.
En revanche, Angular propose deux types de compilation pour
les templates.

H & H: Research and Training 13 / 50

 Introduction

Angular

Angular : deux types de compilation

JIT : Just in Time
AOT : Ahead of Time

H & H: Research and Training 14 / 50

 Introduction

Angular
JIT : Just in Time AOT : Ahead of Time

Chaque fichier est compilé séparément. Tout le code est compilé ensemble, en
insérant HTML/CSS dans les scripts.
Chargement lent à cause de la
compilation avant chaque exécution par Chargement rapide car tout est compilé
le navigateur. à la construction de l’application.

Compilateur d’Angular embarqué pour Pas besoin d’embarquer le compilateur

recompiler avant chaque re-exécution. d’Angular.

Fichiers (bundles) générés plus Fichiers (bundles) générés moins

volumineux à cause de l’embarquement volumineux (pas de compilateur
du compilateur. embarqué).

Utilisable via les commandes ng build Utilisable via les commandes ng build
ou ng serve --aot ou ng serve --aot

Plus adapté au mode développement. Plus adapté au mode production.

Plus sécurisée, code-source original

non-divulgué.

15 / 50
 Installations Angular

Angular
Remarque

Pour installer Angular, il faut télécharger et installer NodeJS (Dernière version stable
LTS)

16 / 50
 Installations Angular

Angular
Remarque

Pour installer Angular, il faut télécharger et installer NodeJS (Dernière version stable
LTS)

Pour installer Angular, exécuter la commande

npm install -g @angular/cli

H & H: Research and Training 16 / 50

 Installations Angular

Angular
Remarque

Pour installer Angular, il faut télécharger et installer NodeJS (Dernière version stable
LTS)

Pour installer Angular, exécuter la commande

npm install -g @angular/cli

Pour installer une version bien précise (par exemple 6.1.0)

npm install -g @angular/cli@6.1.0

16 / 50
 Installations Angular

Angular

Pour vérifier la version d’Angular installée, exécuter la commande

ng version

Pour explorer la liste des commandes Angular, exécuter la

commande
ng

H & H: Research and Training 17 / 50

 Installations IDE

Angular
Quel IDE (Environnement de développement intégré) ?

Visual Studio Vode

Eclipse

Intellij..

18 / 50
 Installations IDE

Angular
Quel IDE (Environnement de développement intégré) ?

Visual Studio Code

Eclipse

Intellij...

Visual Studio Code (ou VSC) , pourquoi ?

Gratuit.

Offrant la possibilité d’intégrer des éditeurs de texte connus (comme Sublime Text,
Atom...).

Extensible selon le langage de programmation.

Recommandé par Microsoft (créateur de TypeScript) pour les projets Angular.

18 / 50
 Installations IDE

Angular

Quelques raccourcis VSC

Pour activer la sauvegarde automatique : aller dans File > AutoSave

Pour indenter son code : Alt Shift f

Pour commenter/décommenter : Ctrl :

Pour sélectionner toutes les occurrences : Ctrl f2

Pour sélectionner l’occurrence suivante : Ctrl d

Pour placer le curseur dans plusieurs endroits différents : Alt

H & H: Research and Training 19 / 50

 Installations IDE

Angular

Extension VSC pour les templates Angular

Angular Language Service

Angular Snippets

H & H: Research and Training 20 / 50

 Installations Devtools

Angular

Devtools : extension Angular pour les navigateurs

Google Chrome : [Link]

webstore/detail/angular-devtools/
ienfalfjdbdpebioblfackkekamfmbnh
Mozilla Firefox : [Link]
firefox/addon/angular-devtools/

H & H: Research and Training 21 / 50

 Commandes de base Création

Angular

Pour créer un nouveau projet Angular

ng new cours-angular

22 / 50
 Commandes de base Création

Angular

Pour créer un nouveau projet Angular

ng new cours-angular

Ou le raccourci
ng n cours-angular

H & H: Research and Training 22 / 50

 Commandes de base Création

Angular
Depuis la version 7, il faut aussi répondre aux questions suivantes

Would you like to add Angular routing ? (Yes)

Which stylesheet format would you like to use ? (CSS)

H & H: Research and Training 23 / 50

 Commandes de base Création

Angular
Depuis la version 7, il faut aussi répondre aux questions suivantes

Would you like to add Angular routing ? (Yes)

Which stylesheet format would you like to use ? (CSS)

Pour créer un nouveau projet Angular et éviter la première question

ng new cours-angular --routing

H & H: Research and Training 23 / 50

 Commandes de base Création

Angular
Depuis la version 7, il faut aussi répondre aux questions suivantes

Would you like to add Angular routing ? (Yes)

Which stylesheet format would you like to use ? (CSS)

Pour créer un nouveau projet Angular et éviter la première question

ng new cours-angular --routing

Pour créer un nouveau projet Angular et garder les réponses par défaut pour les deux
questions

ng new cours-angular --defaults

23 / 50
 Commandes de base Création

Angular

Pour créer un projet sans les fichiers de test

ng n cours-angular --skip-tests

H & H: Research and Training 24 / 50

 Commandes de base Création

Angular

Pour créer un projet sans les fichiers de test

ng n cours-angular --skip-tests

ou aussi
ng n cours-angular -S

H & H: Research and Training 24 / 50

 Commandes de base Création

Angular

Pour créer un projet sans les fichiers git

ng n cours-angular --skip-git

H & H: Research and Training 25 / 50

 Commandes de base Création

Angular

Pour créer un projet sans les fichiers git

ng n cours-angular --skip-git

ou aussi
ng n cours-angular -g

H & H: Research and Training 25 / 50

 Commandes de base Création

Angular

Depuis Angular 18, il est possible de créer un projet sans modules (tout est
défini dans les composants) [Actuellement, le mode par défaut]

ng new cours-angular --standalone

H & H: Research and Training 26 / 50

 Commandes de base Création

Angular

Depuis Angular 18, il est possible de créer un projet sans modules (tout est
défini dans les composants) [Actuellement, le mode par défaut]

ng new cours-angular --standalone

Pour créer un projet avec la gestion de modules

ng new cours-angular --standalone=false

26 / 50
 Commandes de base Création

Angular
Autres options

--inline-template

Permet d’inclure directement le template HTML dans le fichier TypeScript du composant.

Utile pour les composants simples où le code HTML est court.

H I ©
--inline-style

U EL
O
Permet d’inclure directement les styles CSS dans le fichier TypeScript du composant.

f E LM
Réduit le nombre de fichiers créés par composant.

--minimal
ch r e
©A
Crée un projet minimal avec uniquement les fichiers essentiels pour démarrer.
Supprime les fichiers et configurations non indispensables.

--skip-install

Empêche l’exécution de la commande npm install après la création du projet.

Utile si vous souhaitez installer les dépendances plus tard ou utiliser un gestionnaire de paquets différent.

H & H: Research and Training 27 / 50

 Commandes de base Démarrage d’un serveur local

Angular

Pour lancer le projet, exécuter la commande (depuis la racine du projet)

ng serve

28 / 50
 Commandes de base Démarrage d’un serveur local

Angular

Pour lancer le projet, exécuter la commande (depuis la racine du projet)

ng serve

Ou le raccourci
ng s

H & H: Research and Training 28 / 50

 Commandes de base Démarrage d’un serveur local

Angular
Pour lancer le projet et ouvrir une nouvelle fenêtre dans le
navigateur, exécuter la commande
ng s --open

29 / 50
 Commandes de base Démarrage d’un serveur local

Angular
Pour lancer le projet et ouvrir une nouvelle fenêtre dans le
navigateur, exécuter la commande
ng s --open

Ou
ng s -o

H & H: Research and Training 29 / 50

 Commandes de base Démarrage d’un serveur local

Angular
Pour lancer le projet et ouvrir une nouvelle fenêtre dans le
navigateur, exécuter la commande
ng s --open

Ou
ng s -o

On peut aussi lancer un projet Angular comme tout projet

NodeJS, exécuter la commande
npm start

29 / 50
 Commandes de base Démarrage d’un serveur local

Angular

Lien vers la documentation officielle d’Angular

[Link]

H & H: Research and Training 30 / 50

 Structure d’une application Non-standalone

Angular
Arborescence d’un projet Angular

node modules : contenant les modules [Link] nécessaire pour un projet Angular

src : contenant les fichiers sources de l’application

[Link] : contenant l’ensemble de dépendance de l’application

.[Link] (ou [Link] depuis la version 6) : contenant les données

concernant la configuration du projet (l’emplacement des fichiers de démarrage...)
.editorconfig : utilisé pour définir les styles de formatage de code appliqués à tous les
fichiers du projet qui sont ouverts dans un éditeur supportant ce fichier de configuration
(comme VSC)

[Link] : spécifie les options de compilation TypeScript globales pour tout le

projet

[Link] : spécifie les options de compilation TypeScript globales pour une

application particulière

[Link] : spécifie les options de compilation TypeScript pour les tests

unitaires (fichiers *.[Link]).

H & H: Research and Training 31 / 50

 Structure d’une application Non-standalone

Angular

[Link] vs [Link]

Rien ne nous empêche de supprimer [Link]. c’est juste un fichier de

configuration supplémentaire qui permet d’ajuster la configuration en fonction de
l’application.

Utile lorsque nous avons plusieurs applications dans le même projet.

Il est possible d’avoir

le dossier racine avec [Link]

un sous-dossier app-a avec un fichier [Link] dans app-a
un sous-dossier app-b d’une autre application avec son propre
[Link]

H & H: Research and Training 32 / 50

 Structure d’une application Non-standalone

Que contient src ?

assets : unique dossier accessible aux visiteurs et contenant les images, les sons...

[Link] : unique fichier HTML d’une application Angular

[Link] : feuille de style commune de tous les composants web de l’application

[Link] : icône d’Angular

[Link] : fichier qui permet le chargement du module principal (app)

app : contient initialement les 5 fichiers du module principal

[Link] : classe correspondante au module principal

[Link] : classe associé au composant web
[Link] : contenant le code HTML associé au composant web
[Link] : contenant le code CSS associé au composant web

[Link] : contenant le code de test du composant web

H & H: Research and Training 33 / 50

 Structure d’une application Non-standalone

Angular
Contenu d’[Link]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoursAngular</title>

<!-- cette balise va permettre d'assurer le routage -->

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="[Link]">
</head>
<body>

<!-- le composant web introduit dans le module principal -->

<app-root></app-root>
</body>
</html>

34 / 50
 Structure d’une application Non-standalone

Contenu de [Link]

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

H & H: Research and Training 35 / 50

 Structure d’une application Non-standalone

Contenu de [Link]

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

Explication

@NgModule : pour déclarer cette classe comme module

declarations : dans cette section, on déclare les composants de ce module
imports : dans cette section, on déclare les modules nécessaires pour le module
providers : dans cette section, on déclare les services qui seront utilisés dans le module
bootstrap : dans cette section, on déclare le composant principal de ce module

H & H: Research and Training 35 / 50

 Structure d’une application Non-standalone

Angular
Angular : les modules

37 / 50
 Structure d’une application Non-standalone

Angular

Décorateur du composant

@Component : pour déclarer cette classe comme composant web

selector : pour définir le nom de balise correspondant à ce composant web

templateUrl : pour indiquer le fichier HTML correspondant au composant web

styleUrls : pour indiquer le(s) fichier(s) CSS correspondant au composant web

38 / 50
 Structure d’une application Standalone

Angular
Arborescence d’un projet Angular

node modules : contenant les modules [Link] nécessaire pour un projet Angular

src : contenant les fichiers sources de l’application

[Link] : contenant l’ensemble de dépendance de l’application

.[Link] (ou [Link] depuis la version 6) : contenant les données

concernant la configuration du projet (l’emplacement des fichiers de démarrage...)
.editorconfig : utilisé pour définir les styles de formatage de code appliqués à tous les
fichiers du projet qui sont ouverts dans un éditeur supportant ce fichier de configuration
(comme VSC)

[Link] : spécifie les options de compilation TypeScript globales pour tout le

projet

[Link] : spécifie les options de compilation TypeScript globales pour une

application particulière

[Link] : spécifie les options de compilation TypeScript pour les tests

unitaires (fichiers *.[Link]).

39 / 50
 Structure d’une application Standalone

Angular

[Link] vs [Link]

Rien ne nous empêche de supprimer [Link]. c’est juste un fichier de

configuration supplémentaire qui permet d’ajuster la configuration en fonction de
l’application.

Utile lorsque nous avons plusieurs applications dans le même projet.

Il est possible d’avoir

le dossier racine avec [Link]

un sous-dossier app-a avec un fichier [Link] dans app-a
un sous-dossier app-b d’une autre application avec son propre
[Link]

40 / 50
 Structure d’une application Standalone

Angular

Que contient src ?

[Link] : unique fichier HTML d’une application Angular

[Link] : feuille de style commune de tous les composants web de l’application

[Link] : fichier qui permet le chargement du module principal (app)

app : contient initialement les 5 fichiers du module principal

[Link] : fichier utilisé pour centraliser la configuration de l’application

[Link] : fichier de routes
[Link] : classe associé au composant web
[Link] : contenant le code HTML associé au composant web
[Link] : contenant le code CSS associé au composant web
[Link] : contenant le code de test du composant web

41 / 50
 Structure d’une application Standalone

Angular
Contenu d’[Link]

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CoursAngular</title>

<!-- cette balise va permettre d'assurer le routage -->

<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="icon" type="image/x-icon" href="[Link]">
</head>
<body>

<!-- le composant web introduit dans le module principal -->

<app-root></app-root>
</body>
</html>

42 / 50
 Structure d’une application Standalone

Angular

Contenu de [Link]

export const appConfig: ApplicationConfig = {

providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

43 / 50
 Structure d’une application Standalone

Angular

Contenu de [Link]

export const appConfig: ApplicationConfig = {

providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};

Explication

providers: [ ... ] : permet de définir une liste de services (ou providers) que l’application utilisera. Les services
mentionnés ici seront injectés dans les composants ou d’autres services en fonction des besoins de l’application.

provideZoneChangeDetection( eventCoalescing: true ) : optimise la gestion des événements avec la

détection de changement via les zones.

provideRouter(routes) : met en place le système de routage pour l’application.

43 / 50
 Structure d’une application Standalone

Angular

Décorateur du composant

@Component : pour déclarer cette classe comme composant web

selector : pour définir le nom de balise correspondant à ce composant web

templateUrl : pour indiquer le fichier HTML correspondant au composant web

styleUrls : pour indiquer le(s) fichier(s) CSS correspondant au composant web

standalone : fonctionnalité relativement récente d’Angular 14 qui permet de créer des

composants sans dépendre de modules Angular

imports : pour spécifier les composants ou autres fonctionnalités Angular dont ce

composant a besoin.

44 / 50
 Arrêter la génération de fichiers de tests

Angular
Commençons par localiser la section schematics dans cours-angular (nom du projet) dans [Link] et
chercher

"projects": {
"cours-angular": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
},
},
},
},

45 / 50
 Arrêter la génération de fichiers de tests

Angular
Commençons par localiser la section schematics dans cours-angular (nom du projet) dans [Link] et
chercher

"projects": {
"cours-angular": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
},
},
},
},

Pour arrêter la génération des fichiers de test pour les composants (par exemple), on ajoute la section suivante

"projects": {
"cours-angular": {
"projectType": "application",
"schematics": {
"@schematics/angular:application": {
"strict": true
},
"@schematics/angular:component": {
"skipTests": true
},
},
},
},

45 / 50
 Arrêter la génération de fichiers de tests

Angular

Remarque

On peut ajouter une section pour chaque élément pour lequel on veut
plus générer des fichiers de test : service, directive, class,
pipe...

46 / 50
 Commandes utiles

Angular

Pour désinstaller Angular

npm uninstall -g @angular/cli

47 / 50
 Commandes utiles

Angular

Pour désinstaller Angular

npm uninstall -g @angular/cli

Pour vider le cache (Avant la version 5 de npm)

npm cache clean

47 / 50
 Commandes utiles

Angular

Pour désinstaller Angular

npm uninstall -g @angular/cli

Pour vider le cache (Avant la version 5 de npm)

npm cache clean

Pour vider le cache (depuis la version 5 de npm)

npm cache verify

47 / 50
 Commandes utiles

Angular

Pour mettre à jour la version d’Angular

ng update @angular/cli @angular/core

48 / 50
 Commandes utiles

Angular

Pour mettre à jour la version d’Angular

ng update @angular/cli @angular/core

Pour mettre à jour tous les paquets définis dans [Link]

ng update @angular/cli @angular/core --all=true

48 / 50
 Commandes utiles

Angular

Pour faire la migration, consulter

[Link]

49 / 50
 Commandes utiles

Angular

En cas de problème avec les commandes précédentes, exécutez la commande suivante

depuis PowerShell pour permettre à l’utilisateur actuel d’exécuter des scripts locaux sans
restriction

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

50 / 50