Table des matières · Table des matières 5 4.3 Notifier le parent à l'aide d'un EventEmitter en...

1Table des matières

Avant-propos1. Pourquoi cet ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

2. À qui s'adresse cet ouvrage ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

3. Structure de l'ouvrage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

Chapitre 1Introduction

1. État des lieux du développement web. . . . . . . . . . . . . . . . . . . . . . . . . 17

2. Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.1 Organisation par composants . . . . . . . . . . . . . . . . . . . . . . . . . . . 182.2 TypeScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.3 Les spécifications ES6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.4 DOM Virtuel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192.5 Rendu côté serveur possible . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3. AngularJS vs Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Chapitre 2Ma première application

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

2. Le setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.1 Installation de npm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232.2 Installation d’Angular CLI et initialisation du projet . . . . . . . . 25

3. Mon premier composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

4. Mon premier module . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5. Lancement de l'application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

2Développez vos applications web

Angular

Chapitre 3Fondamentaux d'Angular

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

2. Les composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

3. Les templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353.1 Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.2 Événements JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.3 Listes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393.4 Afficher/cacher un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413.5 Liens. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443.6 Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.7 Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

4. Les décorateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

5. Les pipes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525.1 Utiliser un pipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525.2 Les pipes du framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545.3 Créer un pipe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

5.3.1 Les pipes de transformation. . . . . . . . . . . . . . . . . . . . . . . . 555.3.2 Les pipes filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

5.4 Les pipes purs et impurs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

6. Les modules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

7. Observable et promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

8. Préparer l'application pour la production . . . . . . . . . . . . . . . . . . . . . . 63


Chapitre 4TypeScript

1. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

2. TypeScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

2.1.1 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682.1.2 Fonctions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692.1.3 Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692.1.4 Arrow Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712.1.5 Union type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 722.1.6 Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 732.1.7 Générique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742.1.8 Les décorateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

2.2 Typings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 752.3 Compilation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 762.4 EcmaScript 6 et 7 dès maintenant. . . . . . . . . . . . . . . . . . . . . . . . 772.5 Angular et TypeScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Chapitre 5Angular CLI

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

2. Qu'est-ce qu’Angular CLI ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 792.1 La définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 792.2 Les commandes principales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

2.2.1 Créer un nouveau projet Angular CLI : ng new . . . . . . . . 812.2.2 Compiler l'application : ng build . . . . . . . . . . . . . . . . . . . . 822.2.3 Lancer l'application avec ng serve . . . . . . . . . . . . . . . . . . . 852.2.4 Exécuter les tests avec Angular CLI. . . . . . . . . . . . . . . . . . 86

2.3 Les commandes de scaffolding. . . . . . . . . . . . . . . . . . . . . . . . . . . 902.4 La génération d'un composant. . . . . . . . . . . . . . . . . . . . . . . . . . . 91


Angular

3. Configurer un projet Angular CLI. . . . . . . . . . . . . . . . . . . . . . . . . . . . 973.1 Schéma du fichier de configuration d'Angular CLI . . . . . . . . . . 973.2 Gérer les assets lors de la compilation. . . . . . . . . . . . . . . . . . . . 1023.3 Intégrer une librairie externe . . . . . . . . . . . . . . . . . . . . . . . . . . . 1043.4 Intégrer un préprocesseur CSS. . . . . . . . . . . . . . . . . . . . . . . . . . 1063.5 Ajouter des entités de manière globale . . . . . . . . . . . . . . . . . . . 106

3.5.1 Ajouter un script globalement. . . . . . . . . . . . . . . . . . . . . 1063.5.2 Ajouter une feuille de style globalement . . . . . . . . . . . . 107

3.6 Éjecter la configuration Webpack . . . . . . . . . . . . . . . . . . . . . . . 110

4. Compilation Ahead-Of-Time (AOT) . . . . . . . . . . . . . . . . . . . . . . . . 110

Chapitre 6Les composants

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

2. Qu'est-ce qu'un composant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1152.1 Une première définition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1152.2 Créer un premier composant . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

2.2.1 Syntaxe inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1172.2.2 Une réelle syntaxe, découpée en plusieurs fichiers. . . . . 1182.2.3 Utiliser un composant dans son application . . . . . . . . . 119

2.3 Afficher les propriétés d'un composant. . . . . . . . . . . . . . . . . . . 121

3. Les inputs et outputs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1233.1 Les inputs d'un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

3.1.1 Déclarer une variable en tant qu'Input . . . . . . . . . . . . . . 1233.1.2 Un exemple concret avec une liste . . . . . . . . . . . . . . . . . 1243.1.3 Donner un nom personnalisé à son input. . . . . . . . . . . . 126

3.2 Les outputs d'un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . 1273.3 Donner un nom personnalisé à son output . . . . . . . . . . . . . . . 130

4. Interaction entre composants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1304.1 Passer une donnée du parent vers l'enfant à l'aide d'un input . 1314.2 Intercepter un changement de valeur à l'aide d'un setter . . . . 133


4.3 Notifier le parent à l'aide d'un EventEmitter en output . . . . . 1354.4 Observer les changements d'input avec ngOnChanges . . . . . . 1374.5 Utiliser une variable locale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

5. Les décorateurs @ViewChild et @ViewChildren . . . . . . . . . . . . . . 1425.1 Récupérer une référence avec @ViewChild . . . . . . . . . . . . . . . 1425.2 Récupérer plusieurs références avec @ViewChildren . . . . . . . 145

6. Les composants Angular et la View Encapsulation . . . . . . . . . . . . . 1476.1 Le Shadow DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1476.2 Spécifier une View Encapsulation . . . . . . . . . . . . . . . . . . . . . . . 1496.3 Les types de View Encapsulation . . . . . . . . . . . . . . . . . . . . . . . 149

6.3.1 La View Encapsulation émulée . . . . . . . . . . . . . . . . . . . . 1506.3.2 La View Encapsulation native . . . . . . . . . . . . . . . . . . . . . 1526.3.3 Aucune View Encapsulation . . . . . . . . . . . . . . . . . . . . . . 153

Chapitre 7Les services

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

2. Qu'est-ce qu'un service ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157

3. Déclarer son service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

4. Utiliser son service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

5. Rendre son service asynchrone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1615.1 Les promises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1615.2 Les observables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1645.3 Que choisir ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

6. Notifier lorsque les données changent . . . . . . . . . . . . . . . . . . . . . . . 170


Angular

Chapitre 8L'injection de dépendances

1. Principe de base. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175

2. Injection de dépendances dans Angular . . . . . . . . . . . . . . . . . . . . . . 1762.1 Enregistrement global . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1772.2 Enregistrement dans un composant . . . . . . . . . . . . . . . . . . . . . 1782.3 Injecter une dépendance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179

3. Provider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1803.1 UseClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1803.2 UseExisting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1813.3 UseFactory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1833.4 UseValue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1863.5 OpaqueToken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1863.6 Dépendance optionnelle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1903.7 Injection restreinte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1913.8 Restriction de l'enregistrement d'une dépendance . . . . . . . . . . 193

Chapitre 9Le requêtage HTTP

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

2. Obtenir et envoyer des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

3. Transformer des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198

4. Communiquer de manière sécurisée . . . . . . . . . . . . . . . . . . . . . . . . . 199

5. Simuler le requêtage HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202


Chapitre 10Les interactions utilisateur

1. Qu’est-ce que l’event binding ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

2. S’abonner à un événement. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

3. Récupérer une entrée utilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2073.1 Comment manipuler l’objet $event ? . . . . . . . . . . . . . . . . . . . . 2073.2 Utiliser un typage fort pour $event. . . . . . . . . . . . . . . . . . . . . . 2083.3 Une alternative grâce à un template reference variable . . . . . . 2093.4 Utiliser un template reference variable avec un événement . . 2103.5 Filtrer les entrées utilisateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . 211

Chapitre 11Les formulaires

1. Les formulaires basés sur un template . . . . . . . . . . . . . . . . . . . . . . . 215

2. Créer un composant formulaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2162.1 Le composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2162.2 La vue et le data binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

2.2.1 La syntaxe ngModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2182.2.2 ngModel en détail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2182.2.3 L’utilisation de ngModel dans un cas concret . . . . . . . . 218

2.3 Intégrer le formulaire dans l’application . . . . . . . . . . . . . . . . . . 219

3. Les états et la validité d’un champ . . . . . . . . . . . . . . . . . . . . . . . . . . 2203.1 Les états d’un input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2203.2 Styliser selon la validité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

4. Soumettre le formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

5. Les formulaires et les FormControls . . . . . . . . . . . . . . . . . . . . . . . . . 2245.1 Les contrôles et les groupes de contrôles. . . . . . . . . . . . . . . . . . 2245.2 Les validateurs intégrés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2275.3 Créer un validateur personnalisé . . . . . . . . . . . . . . . . . . . . . . . . 2285.4 Les validateurs asynchrones. . . . . . . . . . . . . . . . . . . . . . . . . . . . 229


Angular

Chapitre 12Le routage

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

2. Définir les routes d’une application . . . . . . . . . . . . . . . . . . . . . . . . . 231

3. Le rendu de composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

4. Naviguer dans son application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

5. Récupération des données de routage . . . . . . . . . . . . . . . . . . . . . . . . 236

6. Outlet nommé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2406.1 Définir des outlets nommés. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2406.2 Naviguer avec des outlets nommés . . . . . . . . . . . . . . . . . . . . . . 242

7. Resolver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243

Chapitre 13Les directives

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

2. Qu’est-ce qu’une directive ?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2492.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2492.2 Directives communes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

2.2.1 ngIf . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2502.2.2 ngFor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2502.2.3 ngStyle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2512.2.4 ngClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

3. Les directives d’attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2523.1 Créer une directive d’attribut . . . . . . . . . . . . . . . . . . . . . . . . . . 2523.2 Interagir avec les événements du DOM . . . . . . . . . . . . . . . . . . 2543.3 Passer des valeurs aux directives d’attribut. . . . . . . . . . . . . . . . 255

4. Les directives structurelles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2584.1 La balise <template> et l’astérisque . . . . . . . . . . . . . . . . . . . . 2584.2 Créer une directive structurelle . . . . . . . . . . . . . . . . . . . . . . . . . 259


Chapitre 14Tester son application

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

2. Les tests unitaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2652.1 Introduction aux tests avec Jasmine . . . . . . . . . . . . . . . . . . . . . 2662.2 Exécuter du code avant ou après chaque test . . . . . . . . . . . . . . 2692.3 Les matchers mis à disposition . . . . . . . . . . . . . . . . . . . . . . . . . 270

2.3.1 Comment utiliser un matcher ? . . . . . . . . . . . . . . . . . . . 2712.3.2 Des exemples de matchers . . . . . . . . . . . . . . . . . . . . . . . . 2712.3.3 Négation d’un matcher . . . . . . . . . . . . . . . . . . . . . . . . . . 274

2.4 Créer un matcher personnalisé . . . . . . . . . . . . . . . . . . . . . . . . . 2752.4.1 Créer une librairie de matchers personnalisés. . . . . . . . . 2752.4.2 Utiliser un matcher personnalisé. . . . . . . . . . . . . . . . . . . 277

2.5 Les composants. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2782.5.1 Le composant à tester. . . . . . . . . . . . . . . . . . . . . . . . . . . . 2782.5.2 Le TestBed. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2792.5.3 Vérifier que le composant est bien instancié . . . . . . . . . 2802.5.4 Contrôler les propriétés du composant. . . . . . . . . . . . . . 2812.5.5 S’assurer que le rendu du composant soit cohérent . . . . 281

2.6 Les services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2832.6.1 Le service à tester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2832.6.2 Tester le service. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2832.6.3 S’assurer que le service est bien injecté . . . . . . . . . . . . . . 284

2.7 Les directives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2852.7.1 La directive à tester. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2852.7.2 Tester la directive . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286

2.8 Injecter un faux service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288

3. Les tests e2e. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2893.1 Lancer les tests e2e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2903.2 Écrire un test e2e . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291

3.2.1 Interagir avec le navigateur . . . . . . . . . . . . . . . . . . . . . . . 2923.2.2 Récupérer un élément du DOM et interagir avec . . . . . 293


Angular

3.2.3 Interagir avec les éléments DOM . . . . . . . . . . . . . . . . . . 2943.2.4 Tester le composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296

3.3 Écrire un test e2e, en mieux. . . . . . . . . . . . . . . . . . . . . . . . . . . . 297

Chapitre 15Le cross-platform avec Angular

1. Apache Cordova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3011.1 Créer un projet Apache Cordova. . . . . . . . . . . . . . . . . . . . . . . . 3021.2 Angular dans Apache Cordova . . . . . . . . . . . . . . . . . . . . . . . . . 3041.3 Utiliser un plug-in Apache Cordova . . . . . . . . . . . . . . . . . . . . . 309

2. Ionic 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3142.1 Créer un projet Ionic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3142.2 Utiliser les composants Ionic. . . . . . . . . . . . . . . . . . . . . . . . . . . 3152.3 Utiliser Ionic DevApp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3172.4 Utiliser un plug-in avec Ionic. . . . . . . . . . . . . . . . . . . . . . . . . . . 318

Chapitre 16Pour aller plus loin

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

2. Rendu côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3212.1 Principe de la mise en place . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3222.2 Ajouter le rendu côté serveur. . . . . . . . . . . . . . . . . . . . . . . . . . . 323

3. La détection de changement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3333.1 Pourquoi la détection de changement ? . . . . . . . . . . . . . . . . . . 3333.2 Les Zones, ou comment notifier Angular ?. . . . . . . . . . . . . . . . 336

3.2.1 Le comportement de la détection de changement . . . . . 3383.2.2 L’immuabilité et la stratégie de détection

de changement OnPush . . . . . . . . . . . . . . . . . . . . . . . . . . 3393.3 Encore plus de contrôle sur la détection de changement. . . . . 342


4. Le cycle de vie d’un composant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3434.1 La présentation des lifecycle hooks . . . . . . . . . . . . . . . . . . . . . . 343

4.1.1 Les différents hooks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3434.1.2 Utiliser un lifecycle hook . . . . . . . . . . . . . . . . . . . . . . . . . 344

4.2 Le cycle de vie d’un composant . . . . . . . . . . . . . . . . . . . . . . . . . 3454.2.1 Le constructeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3484.2.2 ngOnInit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3484.2.3 ngOnChanges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3494.2.4 ngDoCheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3504.2.5 ngAfterContentInit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3504.2.6 ngAfterContentChecked . . . . . . . . . . . . . . . . . . . . . . . . . 3524.2.7 ngAfterViewInit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3524.2.8 ngAfterViewChecked . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3534.2.9 ngOnDestroy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355


Partie 1Présentation de JavaScript et programmation à partir d’algorithmes

Chapitre 1

Présentation du langage JavaScript

1. Définition et rapide historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2. Prérequis pour un apprentissage aisé du langage . . . . . . . . . . . . . . . . 21

3. Outillage nécessaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

4. Positionnement du JavaScript face à d’autres technologies de développement web (HTML, CSS, PHP…) . . . . . . . . . . . . . . . . . . 23

Chapitre 2

Développement à partir d’algorithmes

1. Présentation de la notion d'algorithme . . . . . . . . . . . . . . . . . . . . . . . . 25

2. Notion de variable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272.1 Présentation des notions de variable et de type . . . . . . . . . . . . . 272.2 Types de base et opérations associées . . . . . . . . . . . . . . . . . . . . . 282.3 Intérêt des types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.4 Utilisation des variables dans des expressions . . . . . . . . . . . . . . 312.5 Tableau récapitulatif des opérateurs . . . . . . . . . . . . . . . . . . . . . . 31

3. Manipulation des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.1 Nommage des variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333.2 Affectation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Les éléments à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence ENI de l'ouvrage RI3JASAP dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

2avec JavaScript

Apprendre à développer

3.3 Exercice n°1 : Inversion du contenu de deux variables mémoire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

3.4 Affichage des résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363.5 Exercice n°2 : Surfaces de cercles . . . . . . . . . . . . . . . . . . . . . . . . . 393.6 Saisie au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403.7 Exercice n°3 : Surface et volume d'une sphère . . . . . . . . . . . . . . 41

4. Fonctions prédéfinies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.1 Exercice n°4 : Affichage de la longueur d'un nom . . . . . . . . . . . 424.2 Exercice n°5 : Détermination des initiales . . . . . . . . . . . . . . . . . 43

5. Traitements conditionnés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 465.1 Exercice n°6 : Polynôme du second degré . . . . . . . . . . . . . . . . . . 485.2 Exercice n°7 : Libellé du mois en clair . . . . . . . . . . . . . . . . . . . . . 505.3 Exercice n°8 : Libellé du mois en clair (Suivant ... Finsuivant) . 53

6. Structures itératives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.1 Principe des itérations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.2 Structures itératives de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546.3 Exercice n°9 : Moyenne de 10 nombres. . . . . . . . . . . . . . . . . . . . 576.4 Exercice n°10 : Moyenne d'une série de n nombres . . . . . . . . . . 586.5 Exercice n°11 : Plus Grand Commun Diviseur

par la méthode des divisions successives. . . . . . . . . . . . . . . . . . . 616.6 Structure itérative Pour . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636.7 Exercice n°12 : Calcul de la moyenne de 10 nombres. . . . . . . . . 656.8 Exercice n°13 : Décompte du nombre

de voyelles dans un mot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

7. Tableaux à dimension unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687.1 Exercice n°14 : Décompte des nombres pairs dans un tableau . 69

8. Tableaux à dimensions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718.1 Exercice n°15 : Mini-tableur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71


9. Procédures, fonctions et passage de paramètres . . . . . . . . . . . . . . . . . 739.1 Les objectifs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 739.2 Les procédures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.3 Exercice n°16 : Appel d'une procédure

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 749.4 Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779.5 Exercice n°17 : Appel d'une fonction

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

Partie 2Bien débuter avec JavaScript

Chapitre 3

Bases du langage JavaScript

1. Méthodologie d'apprentissage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

2. Variables (déclaration et typage) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 822.1 Exercice n°2 : Surfaces de cercles . . . . . . . . . . . . . . . . . . . . . . . . . 822.2 Exercice n°3 : Surface et volume d'une sphère . . . . . . . . . . . . . . 892.3 Exercice n°4 : Nombre de lettres d'un mot . . . . . . . . . . . . . . . . . 922.4 Exercice n°5 : Détermination des initiales . . . . . . . . . . . . . . . . . 92

Chapitre 4

Conditionnement des traitements

1. Présentation de la syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

2. Exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 972.1 Exercice n°6 : Polynôme du second degré . . . . . . . . . . . . . . . . . . 972.2 Exercice n°8 : Impression du libellé d'un mois . . . . . . . . . . . . . . 98

4avec JavaScript


Chapitre 5

Traitements itératifs (boucles)

1. Présentation de la syntaxe des boucles . . . . . . . . . . . . . . . . . . . . . . . 101

2. Boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.2 Exercice n°9 : Moyenne de 10 nombres saisis au clavier . . . . . 1032.3 Exercice n°10 : Moyenne d'une série

de n nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . 104

3. Boucle do while. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1053.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1053.2 Exercice n°11 : Moyenne d'une série

de n nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . . 106

4. Boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1074.2 Exercice n°12 : Moyenne d'une série

de 10 nombres saisis au clavier . . . . . . . . . . . . . . . . . . . . . . . . . 1084.3 Exercice n°13 : Décompte du nombre

de voyelles dans un mot. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Chapitre 6

Tableaux

1. Tableaux à dimension unique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1111.2 Exercice n°14 : Décompte

des nombres pairs dans un tableau . . . . . . . . . . . . . . . . . . . . . . 113

2. Tableaux à dimensions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1142.2 Exercice n°15 : Mini-tableur. . . . . . . . . . . . . . . . . . . . . . . . . . . . 115


Chapitre 7

Procédures et fonctions

1. Les procédures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1191.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1201.2 Exercice n°16 : Appel d'une procédure

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

2. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222.1 Syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1222.2 Exercice n°17 : Appel d'une fonction

avec passage de paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Partie 3Approche POO sous JavaScript

Chapitre 8

Approche "objet" en JavaScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

2. Programmation orientée objet au travers d’exemples . . . . . . . . . . . 1262.1 Séquence 1 : Déclaration des objets

JavaScript en méthode "Inline" . . . . . . . . . . . . . . . . . . . . . . . . . 1262.2 Séquence 2 : Création des objets JavaScript par constructeur. 1272.3 Séquence 3 : Variables privées dans une instance d'objet . . . . 1292.4 Séquence 4 : Passage de paramètre(s) à un constructeur . . . . . 1302.5 Séquence 5 : Non-partage des méthodes

par les instances d'objets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1312.6 Séquence 6 : Notion de prototype . . . . . . . . . . . . . . . . . . . . . . . 1322.7 Séquence 7 : Surcharge d'une méthode . . . . . . . . . . . . . . . . . . . 1342.8 Séquence 8 : Extension d'un prototype. . . . . . . . . . . . . . . . . . . 1352.9 Séquence 9 : Mécanisme de l'héritage . . . . . . . . . . . . . . . . . . . . 1362.10 Séquence 10 : Limite de l'héritage de la séquence n°9 . . . . . . . 1382.11 Séquence 11 : Une seconde limite à notre héritage . . . . . . . . . 139

6avec JavaScript


Chapitre 9

Objets de base de JavaScript

1. Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

2. Les objets de base . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.1 Objet Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.2 Objet Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1422.3 Objet Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1512.4 Objet window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1542.5 Objet navigator. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1642.6 Objet String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166

Chapitre 10

Les nouveautés d’EcmaScript 6

1. Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173

2. Apports au niveau de la Programmation Orientée Objet . . . . . . . . 1742.1 Notion de prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1742.2 Surcharge d’une méthode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1772.3 Extension de prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1802.4 Héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1832.5 Premier exemple POO en EcmaScript 6 . . . . . . . . . . . . . . . . . . 1882.6 Héritage en EcmaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1912.7 Méthodes getter, setter et static en EcmaScript 6 . . . . . . . . . . 194

3. Fonctions fléchées (arrow functions) . . . . . . . . . . . . . . . . . . . . . . . . 1993.1 Avantages des fonctions fléchées . . . . . . . . . . . . . . . . . . . . . . . 1993.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

4. Structures Map, Set et boucle for of . . . . . . . . . . . . . . . . . . . . . . . . . 2054.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2054.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

5. Portée des variables (var ou let) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2155.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2155.2 Exemple. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215


6. Promesses (promise) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2196.2 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

7. Déstructuration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2247.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2247.2 Exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

Partie 4Gestion de formulaire et modèle DOM

Chapitre 11

Saisie de données via des formulaires

1. Pilotage des contrôles de saisie via JavaScript. . . . . . . . . . . . . . . . . . 2291.1 Contrôle de saisie sur un champ texte . . . . . . . . . . . . . . . . . . . 2291.2 Contrôle de numéricité d'une saisie dans un champ texte . . . 2361.3 Contrôle de caractères alphabétiques d'une saisie

dans un champ texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2401.4 Contrôle de caractères alphabétiques et numériques

d'une saisie dans un champ texte . . . . . . . . . . . . . . . . . . . . . . . 2401.5 Contrôle de longueur d'une saisie dans un champ texte . . . . . 2411.6 Contrôle de saisie sur une adresse e-mail . . . . . . . . . . . . . . . . . 2421.7 Contrôle d'un choix dans une liste déroulante

(version simplifiée) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2431.8 Contrôle d'un choix dans une liste déroulante

(version étendue) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2461.9 Contrôle d'un choix par bouton radio . . . . . . . . . . . . . . . . . . . . 2491.10 Contrôle d'un choix par case à cocher . . . . . . . . . . . . . . . . . . . . 253

8avec JavaScript


Chapitre 12

Modèle DOM

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2571.1 Définition de DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2571.2 Définition de l'arborescence. . . . . . . . . . . . . . . . . . . . . . . . . . . . 258

2. Apprentissage du modèle DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.1 Script "Hello World!" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2612.2 Différence entre write et writeln. . . . . . . . . . . . . . . . . . . . . . . . 2622.3 Gestion des liens hypertextes . . . . . . . . . . . . . . . . . . . . . . . . . . 2642.4 Gestion des images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2652.5 Gestion des formulaires et de leurs balises . . . . . . . . . . . . . . . . 2682.6 Gestion des ancres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2702.7 Gestion de la navigation entre pages web. . . . . . . . . . . . . . . . . 2732.8 Affichage de caractéristiques générales du document . . . . . . . 2782.9 Gestion des boutons dans les formulaires. . . . . . . . . . . . . . . . . 2802.10 Gestion des tableaux (balise HTML table) . . . . . . . . . . . . . . . . 290

Chapitre 13

Exploration de flux XML via DOM

1. Notion de flux XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319

2. Exemples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3202.1 Exemple 1 : Affichage d'un contenu d’e-mail codé en XML . . 3202.2 Exemple 2 : Liste des marques des voitures

(fichier voitures.xml) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3242.3 Exemple 3 : Liste des marques des voitures avec une boucle. . 3262.4 Exemple 4 : Liste des nœuds rattachés à la racine . . . . . . . . . . 3282.5 Exemple 5 : Liste des champs (nœuds) de chaque voiture. . . . 3302.6 Exemple 6 : Remplacement d'une valeur de nœud. . . . . . . . . . 3332.7 Exemple 7 : Accès aux attributs. . . . . . . . . . . . . . . . . . . . . . . . . 3342.8 Exemple 8 : Accès à un nœud parent . . . . . . . . . . . . . . . . . . . . 3352.9 Exemple 9 : Parcours arrière des nœuds . . . . . . . . . . . . . . . . . . 336


2.10 Exemple 10 : Remplacement systématique d'une valeur d'attribut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

2.11 Exemple 11 : Conversion XML en HTML . . . . . . . . . . . . . . . . 3392.12 Exemple 12 : Suppression d'un nœud dans un flux XML . . . . 341

Partie 5Cookie et mécanismes de persistances

Chapitre 14

Gestion des cookies en JavaScript

1. Notion de cookie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

2. Écriture d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346

3. Lecture d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348

4. Suppression d'un cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

Chapitre 15

Stockage local de données

1. Présentation générale des solutions . . . . . . . . . . . . . . . . . . . . . . . . . . 3531.1 Stockage par sessionStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . 3541.2 Stockage par localStorage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 354

2. Mise en œuvre du Web Storage au travers d'exemples . . . . . . . . . . 3552.1 Exemple 1 : Stockage par localStorage

de chaînes de caractères . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3552.2 Exemple 2 : Stockage dans le localStorage

d'un objet JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365

10avec JavaScript


Chapitre 16

Stockage distant (Ajax - PHP - MySQL - XML)

1. Présentation générale de la solution . . . . . . . . . . . . . . . . . . . . . . . . . 375

2. Mise en œuvre du stockage distant au travers d'exemples . . . . . . . 3762.1 Exemple 1 : Accès Ajax sur BDD MySQL

(liste de l'ensemble des voitures) . . . . . . . . . . . . . . . . . . . . . . . . 3772.2 Exemple 2 : Accès MySQL via Ajax. . . . . . . . . . . . . . . . . . . . . . 403

Chapitre 17

Stockage distant (Ajax - PHP - MySQL - JSON)

1. Présentation générale de la solution . . . . . . . . . . . . . . . . . . . . . . . . . 411

2. Mise en œuvre du stockage distant au travers d'exemples . . . . . . . 4132.1 Exemple 1 : Présentation du système de notation JSON. . . . . 4132.2 Exemple 2 : Lecture d'un fichier JSON via XMLHttpRequest. 4182.3 Exemple 3 : Lecture d'un fichier JSON

via XMLHttpRequest et un script serveur en PHP . . . . . . . . . 4242.4 Exemple 4 : Lecture d'une table MySQL

via XMLHttpRequest (serveur PHP et flux JSON) . . . . . . . . . 4262.5 Exemple 5 : Recodage de l'exemple 4

avec une liste déroulante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432


Partie 6Géolocalisation, dessin et graphiques de gestion

Chapitre 18

Géolocalisation

1. Principe de la géolocalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437

2. Exemples d'applications de géolocalisation. . . . . . . . . . . . . . . . . . . . 4382.1 Exemple 1 : Affichage de la carte de l'Ouest de la France . . . . 4382.2 Exemple 2 : Affichage de la carte de l'Ouest de la France

(informations météorologiques) . . . . . . . . . . . . . . . . . . . . . . . . 4552.3 Exemple 3 : Affichage de la carte de Rennes Centre-Sud

(couche panorama) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4582.4 Exemple 4 : Affichage de la carte de Rennes (Street View) . . . 462

Chapitre 19

Dessin (HTML5 CANVAS)

1. Présentation de l'API HTML5 CANVAS. . . . . . . . . . . . . . . . . . . . . . 465

2. Exemples d'applications de l'élément <canvas> . . . . . . . . . . . . . . . 4662.1 Exemple 1 : Tracé d'un simple carré . . . . . . . . . . . . . . . . . . . . . 4662.2 Exemple 2 : Tracé d'une grille de TicTacToe . . . . . . . . . . . . . . 4702.3 Améliorations possibles sur le jeu du TicTacToe . . . . . . . . . . . 477

Chapitre 20

Graphiques de gestion

1. Différentes solutions de conception de graphiques de gestion . . . . 479

2. Exemples d'utilisation des API Google Charts . . . . . . . . . . . . . . . . . 4802.1 Exemple 1 : Tracé d'un histogramme . . . . . . . . . . . . . . . . . . . . 4802.2 Exemple 2 : Tracé d'un graphique en secteurs . . . . . . . . . . . . . 4862.3 Exemple 3 : Tracé d'une carte . . . . . . . . . . . . . . . . . . . . . . . . . . 489

12avec JavaScript


Partie 7Frameworks JavaScript et serveur/client

Chapitre 21

Framework AngularJS


2. Notions de base. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4942.1 Premier exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4942.2 Directive ng-bind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4972.3 Directive ng-init . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4992.4 Évaluation d’une expression . . . . . . . . . . . . . . . . . . . . . . . . . . . 5002.5 Exemple de synthèse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502

3. Manipulation de tableaux mémoire et d’objets . . . . . . . . . . . . . . . . 5053.1 Utilisation d’un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5053.2 Utilisation d’un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507

4. Module et contrôleur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5094.1 Exemple utilisant un modèle et un contrôleur . . . . . . . . . . . . . 5114.2 Directive personnelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5134.3 Méthode personnelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5154.4 Contrôleur dans un fichier externe . . . . . . . . . . . . . . . . . . . . . . 5174.5 Saisie de données par zones de texte . . . . . . . . . . . . . . . . . . . . . 519

5. Boucles et affichage en mode tableau . . . . . . . . . . . . . . . . . . . . . . . . 5225.1 Itération sur un tableau de données . . . . . . . . . . . . . . . . . . . . . 5225.2 Itération sur un tableau de données et un filtre . . . . . . . . . . . . 5245.3 Itération sur un tableau de données et un tri . . . . . . . . . . . . . . 5275.4 Itération sur un tableau de données et un tableau HTML . . . 5295.5 Filtrage d’un tableau via une zone de texte . . . . . . . . . . . . . . . 532

6. Accès à un serveur de données distant (serveur PHP) . . . . . . . . . . . 5356.1 Liste simple à partir d’une table MySQL . . . . . . . . . . . . . . . . . 5356.2 Liste filtrée à partir d’une table MySQL . . . . . . . . . . . . . . . . . . 5456.3 Insertion d’un enregistrement dans une table MySQL . . . . . . 551


7. Contrôles de saisie dans les formulaires . . . . . . . . . . . . . . . . . . . . . . 5577.1 Contrôle de saisie sur une zone de texte. . . . . . . . . . . . . . . . . . 5577.2 Contrôle de saisie sur adresse mail . . . . . . . . . . . . . . . . . . . . . . 5597.3 Contrôle de saisie sur une zone de texte requise . . . . . . . . . . . 5607.4 Liste déroulante pour choisir une marque. . . . . . . . . . . . . . . . . 5627.5 Liste déroulante plus évoluée pour choisir une marque . . . . . . 5647.6 Liste déroulante encore plus évoluée

pour choisir une marque . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5667.7 Liste déroulante couplée à une recherche MySQL . . . . . . . . . . 5677.8 Directives ng-click et ng-mousemouve . . . . . . . . . . . . . . . . . . . 5717.9 Directives ng-show et ng-mouseleave . . . . . . . . . . . . . . . . . . . . 5757.10 Gestion du temps (temporisation) . . . . . . . . . . . . . . . . . . . . . . 5777.11 Gestion de choix par boutons radio. . . . . . . . . . . . . . . . . . . . . . 5817.12 Gestion de choix par cases à cocher. . . . . . . . . . . . . . . . . . . . . . 583

Chapitre 22

Framework Node.js


2. Installation de Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590

3. Lancement de l’environnement Node.js . . . . . . . . . . . . . . . . . . . . . . 592

4. Premier script Node.js affichant « Hello World » . . . . . . . . . . . . . . . 5944.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5944.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5954.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597

5. Deuxième script affichant « Hello World » (version avec Content-Type) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5985.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5985.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5985.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599

6. Troisième script affichant « Hello World » (version HTML) . . . . . . 6006.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600

14avec JavaScript


6.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6006.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602

7. Gestion des URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6027.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6027.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6027.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604

8. Récupération de paramètre dans l’URL . . . . . . . . . . . . . . . . . . . . . . 6058.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6058.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6058.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

9. Détection de l’événement close sur le serveur . . . . . . . . . . . . . . . . . 6089.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6089.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6089.3 Exécution du serveur node_06.js . . . . . . . . . . . . . . . . . . . . . . . . 609

10. Création d’un objet avec son propre événement . . . . . . . . . . . . . . . 61010.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61010.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61010.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 612

11. Affichage du premier enregistrement d’une table MySQL (version 1) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61211.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61211.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61311.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 616

12. Affichage de l’ensemble des enregistrements d’une table MySQL . 61812.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61812.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61812.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

13. Affichage du premier enregistrement d’une table MySQL (version 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.1 Présentation générale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.2 Code source. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62113.3 Exécution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 623


Partie 8Développement hybride avec Ionic 3

Chapitre 23

Développement hybride en JavaScript

1. Approches de développement pour les applications mobiles. . . . . . 6251.1 Développements web, natif et hybride . . . . . . . . . . . . . . . . . . . 626

1.1.1 Applications web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6261.1.2 Applications natives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6271.1.3 Applications hybrides. . . . . . . . . . . . . . . . . . . . . . . . . . . . 628

1.2 Les trois principales plateformes . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.1 Apple iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.2 Android . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6291.2.3 Windows Phone, Windows 10 Mobile . . . . . . . . . . . . . . 630

2. Panorama des principales plateformes « hybrides » . . . . . . . . . . . . . 6302.1 Ionic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6302.2 React Native . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6312.3 Autres solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631

Chapitre 24

Ionic 3, JavaScript en mode hybride

1. Présentation détaillée de l’environnement Ionic . . . . . . . . . . . . . . . 633

2. Installation de l’environnement Ionic 3 . . . . . . . . . . . . . . . . . . . . . . 6342.1 L’installation de Node.js. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6352.2 L’installation des frameworks Ionic et Cordova. . . . . . . . . . . . 6362.3 Une première application de test. . . . . . . . . . . . . . . . . . . . . . . . 6362.4 Un IDE pour modifier les scripts,

Microsoft Visual Studio Code . . . . . . . . . . . . . . . . . . . . . . . . . . 6392.5 Le code du projet ionic3-blank en détail . . . . . . . . . . . . . . . . . . 640

16avec JavaScript


Chapitre 25

Gestion du Hardware sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659

2. Application ioni3-infos_hardware. . . . . . . . . . . . . . . . . . . . . . . . . . . 6592.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6592.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 6602.3 Déploiement de l’application sous Android . . . . . . . . . . . . . . . 668

2.3.1 Téléchargement d’Android Studio . . . . . . . . . . . . . . . . . 6702.3.2 Préparation de l’application Ionic pour transfert

sous Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6702.3.3 Importation de l’application Ionic

sous Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6722.3.4 Test de l’application Ionic sous Android Studio

en mode AVD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6752.3.5 Test de l’application Ionic

sur le périphérique « physique » . . . . . . . . . . . . . . . . . . . . 678

3. Application ionic3-battery_status. . . . . . . . . . . . . . . . . . . . . . . . . . . 6803.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6803.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 681

4. Application ionic3-screen_orientation . . . . . . . . . . . . . . . . . . . . . . . 6864.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6864.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 687

Chapitre 26

Composants de base sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695

2. Application ionic3-passage_parametres . . . . . . . . . . . . . . . . . . . . . . 6962.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 6962.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 698


3. Applications intégrant des fenêtres modales . . . . . . . . . . . . . . . . . . 7063.1 Application ionic3-alert_basic . . . . . . . . . . . . . . . . . . . . . . . . . . 7083.2 Application ionic3-alert_confirm . . . . . . . . . . . . . . . . . . . . . . . 7123.3 Application ionic3-alert_checkbox . . . . . . . . . . . . . . . . . . . . . . 7163.4 Application ionic3-alert_prompt . . . . . . . . . . . . . . . . . . . . . . . . 7233.5 Application ionic3-alert_radio . . . . . . . . . . . . . . . . . . . . . . . . . . 727

Chapitre 27

Applications basiques sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 733

2. Application ionic3-racines_polynome. . . . . . . . . . . . . . . . . . . . . . . . 7332.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7332.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 735

3. Application ionic3-pgcd . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7433.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7433.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 745

Chapitre 28

Gestion de la persistance sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747

2. Application ionic3-clipboard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7482.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7482.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 749

3. Application ionic3-local_storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7533.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7533.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 754

4. Application ionic3-sqlite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7584.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7584.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 761

18avec JavaScript


Chapitre 29

Gestion des listes sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 769

2. Application ionic3-list_basic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7702.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7702.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 771

3. Application ionic3-list_avatar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7733.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7733.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 774

4. Application ionic3-list_slider . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7754.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7754.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 778

Chapitre 30

Graphiques de gestion sous Ionic 3

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787

2. Application ionic3-chartjs_bar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7882.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7882.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 789

3. Application ionic3-chartjs_pie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7943.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 7943.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 796

4. Application ionic3-chartjs_doughnut_json . . . . . . . . . . . . . . . . . . . 8004.1 Compte rendu d’exécution de l’application . . . . . . . . . . . . . . . 8004.2 Analyse des scripts principaux. . . . . . . . . . . . . . . . . . . . . . . . . . 801

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 811

Table des matières · Table des matières 5 4.3 Notifier le parent à l'aide d'un EventEmitter en...

Documents

Transcript of Table des matières · Table des matières 5 4.3 Notifier le parent à l'aide d'un EventEmitter en...