Ce livre permet aux lecteurs de se lancer dans le développement d'applications web avec le framework Angular (en version 12 au moment de l'écriture). Pour une meilleure compréhension de son contenu, il est nécessaire d'avoir un minimum de connaissances sur le fonctionnement du web et sur les langages HTML et JavaScript. Les auteurs ont eu à cœur de rédiger un livre très pragmatique avec de nombreux exemples de code, commentés et expliqués, qui illustrent de façon très concrète les passages plus théoriques. Conçu pour être un allié efficace au quotidien, ce livre à la structure claire constitue un réel référentiel Angular pour le développeur.

Dans les premiers chapitres, pour pouvoir démarrer le développement d'une application avec Angular, les auteurs traitent des sujets à maîtriser que sont les composants, les templates, les pipes ou encore les modules. Le langage de Microsoft TypeScript et l'outil en ligne de commande CLI sont également étudiés.

Chacun des chapitres suivants détaille une brique précise du framework. Le lecteur y apprend ce qu'est un composant, un service ou une directive et comment les utiliser. Le fonctionnement de l'injection de dépendances et celui du routage sont traités ainsi que la création d'un formulaire ou les interactions avec l'utilisateur.

Le livre se poursuit avec l'apprentissage des tests d'une application Angular, que ce soit au travers de tests unitaires ou d'intégration (end-to-end), ainsi que différentes solutions pour rendre une application multiplateforme (ou cross-platform).

Enfin, un chapitre est consacré à des sujets plus avancés dans lequel les auteurs détaillent notamment la façon d'effectuer le rendu côté serveur ou encore le fonctionnement du moteur de détection de changements.


Quizinclus dans
la version en ligne !

• Testez vos connaissances à l'issue de chaque chapitre
• Validez vos acquis

Avant-propos

1. 1. Pourquoi cet ouvrage ?
2. 2. À qui s'adresse cet ouvrage ?
3. 3. Structure de l'ouvrage

Introduction

1. 1. État des lieux du développement web
2. 2. Angular
   1. 2.1 Organisation par composants
   2. 2.2 TypeScript
   3. 2.3 Les spécifications ES7
   4. 2.4 DOM Virtuel
   5. 2.5 Rendu côté serveur possible
3. 3. AngularJS vs Angular

Ma première application

1. 1. Introduction
2. 2. Le setup
   1. 2.1 Installation de npm
   2. 2.2 Installation d’Angular CLI et initialisation du projet
3. 3. Mon premier composant
4. 4. Mon premier module
5. 5. Lancement de l'application

Fondamentaux d'Angular

1. 1. Introduction
2. 2. Les composants
3. 3. Les templates
   1. 3.1 Binding
   2. 3.2 Événements JavaScript
   3. 3.3 Listes
   4. 3.4 Afficher/cacher un élément
   5. 3.5 Liens
   6. 3.6 Styles
   7. 3.7 Directives
4. 4. Les décorateurs
5. 5. Les pipes
   1. 5.1 Utiliser un pipe
   2. 5.2 Les pipes du framework
   3. 5.3 Créer un pipe
      1. 5.3.1 Les pipes de transformation
      2. 5.3.2 Les pipes filtres
   4. 5.4 Les pipes purs et impurs
6. 6. Les modules
7. 7. Observable et promise
8. 8. Préparer l'application pour la production

TypeScript

1. 1. JavaScript
2. 2. TypeScript
   1. 2.1 Syntaxe
      1. 2.1.1 Variables
      2. 2.1.2 Fonctions
      3. 2.1.3 Classes
      4. 2.1.4 Arrow Function
      5. 2.1.5 Union type
      6. 2.1.6 Interface
      7. 2.1.7 Générique
      8. 2.1.8 Les décorateurs
   2. 2.2 Typings
   3. 2.3 Compilation
   4. 2.4 EcmaScript 6 et 7 dès maintenant
   5. 2.5 Angular et TypeScript

Angular CLI

1. 1. Introduction
2. 2. Qu'est-ce qu’Angular CLI ?
   1. 2.1 La définition
   2. 2.2 Les commandes principales
      1. 2.2.1 Créer un nouveau projet Angular CLI : ng new
      2. 2.2.2 Compiler l'application : ng build
      3. 2.2.3 Lancer l'application avec ng serve
      4. 2.2.4 Exécuter les tests avec Angular CLI
   3. 2.3 Les commandes de scaffolding
   4. 2.4 La génération d'un composant
3. 3. Configurer un projet Angular CLI
   1. 3.1 Schéma du fichier de configuration d'Angular CLI
   2. 3.2 Gérer les assets lors de la compilation
   3. 3.3 Intégrer une librairie externe
   4. 3.4 Intégrer un préprocesseur CSS
   5. 3.5 Ajouter des entités de manière globale
      1. 3.5.1 Ajouter un script globalement
      2. 3.5.2 Ajouter une feuille de style globalement
4. 4. Compilation Ahead-Of-Time (AOT)

Les composants

1. 1. Introduction
2. 2. Qu'est-ce qu'un composant ?
   1. 2.1 Une première définition
   2. 2.2 Créer un premier composant
      1. 2.2.1 Syntaxe inline
      2. 2.2.2 Une réelle syntaxe, découpée en plusieurs fichiers
      3. 2.2.3 Utiliser un composant dans son application
   3. 2.3 Afficher les propriétés d'un composant
3. 3. Les inputs et outputs
   1. 3.1 Les inputs d'un composant
      1. 3.1.1 Déclarer une variable en tant qu'Input
      2. 3.1.2 Un exemple concret avec une liste
      3. 3.1.3 Donner un nom personnalisé à son input
   2. 3.2 Les outputs d'un composant
   3. 3.3 Donner un nom personnalisé à son output
4. 4. Interaction entre composants
   1. 4.1 Passer une donnée du parent vers l'enfant à l'aide d'un input
   2. 4.2 Intercepter un changement de valeur à l'aide d'un setter
   3. 4.3 Notifier le parent à l'aide d'un EventEmitter en output
   4. 4.4 Observer les changements d'input avec ngOnChanges
   5. 4.5 Utiliser une variable locale
5. 5. Les décorateurs @ViewChild et @ViewChildren
   1. 5.1 Récupérer une référence avec @ViewChild
   2. 5.2 Récupérer plusieurs références avec @ViewChildren
6. 6. Les composants Angular et la View Encapsulation
   1. 6.1 Le Shadow DOM
   2. 6.2 Spécifier une View Encapsulation
   3. 6.3 Les types de View Encapsulation
      1. 6.3.1 La View Encapsulation émulée
      2. 6.3.2 La View Encapsulation ShadowDom
      3. 6.3.3 Aucune View Encapsulation

Les services

1. 1. Introduction
2. 2. Qu'est-ce qu'un service ?
3. 3. Déclarer son service
4. 4. Utiliser son service
5. 5. Rendre son service asynchrone
   1. 5.1 Les promises
   2. 5.2 Les observables
   3. 5.3 Que choisir ?
6. 6. Notifier lorsque les données changent

L'injection de dépendances

1. 1. Principe de base
2. 2. Injection de dépendances dans Angular
   1. 2.1 Enregistrement global
   2. 2.2 Enregistrement dans un composant
   3. 2.3 Injecter une dépendance
3. 3. Provider
   1. 3.1 UseClass
   2. 3.2 UseExisting
   3. 3.3 UseFactory
   4. 3.4 UseValue
   5. 3.5 InjectionToken
   6. 3.6 Dépendance optionnelle
   7. 3.7 Injection restreinte
   8. 3.8 Restriction de l'enregistrement d'une dépendance

Le requêtage HTTP

1. 1. Introduction
2. 2. Obtenir et envoyer des données
3. 3. Transformer des données
4. 4. Communiquer de manière sécurisée
5. 5. Simuler le requêtage HTTP

Les interactions utilisateur

1. 1. Qu’est-ce que l’event binding ?
2. 2. S’abonner à un événement
3. 3. Récupérer une entrée utilisateur
   1. 3.1 Comment manipuler l’objet $event ?
   2. 3.2 Une alternative grâce à un template reference variable
   3. 3.3 Utiliser un template reference variable avec un événement
   4. 3.4 Filtrer les entrées utilisateur

Les formulaires

1. 1. Les formulaires basés sur un template
2. 2. Créer un composant formulaire
   1. 2.1 Le composant
   2. 2.2 La vue et le data binding
      1. 2.2.1 La syntaxe ngModel
      2. 2.2.2 ngModel en détail
      3. 2.2.3 L’utilisation de ngModel dans un cas concret
   3. 2.3 Intégrer le formulaire dans l’application
3. 3. Les états et la validité d’un champ
   1. 3.1 Les états d’un input
   2. 3.2 Styliser selon la validité
4. 4. Soumettre le formulaire
5. 5. Les formulaires et les FormControls
   1. 5.1 Les contrôles et les groupes de contrôles
   2. 5.2 Les validateurs intégrés
   3. 5.3 Créer un validateur personnalisé
   4. 5.4 Les validateurs asynchrones

Le routage

1. 1. Introduction
2. 2. Définir les routes d’une application
3. 3. Le rendu de composant
4. 4. Naviguer dans son application
5. 5. Récupération des données de routage
6. 6. Outlet nommé
   1. 6.1 Définir des outlets nommés
   2. 6.2 Naviguer avec des outlets nommés
7. 7. Resolver

Les directives

1. 1. Introduction
2. 2. Qu’est-ce qu’une directive ?
   1. 2.1 Introduction
   2. 2.2 Directives communes
      1. 2.2.1 ngIf
      2. 2.2.2 ngFor
      3. 2.2.3 ngStyle
      4. 2.2.4 ngClass
3. 3. Les directives d’attribut
   1. 3.1 Créer une directive d’attribut
   2. 3.2 Interagir avec les événements du DOM
   3. 3.3 Passer des valeurs aux directives d’attribut
4. 4. Les directives structurelles
   1. 4.1 La balise <template> et l’astérisque
   2. 4.2 Créer une directive structurelle

Tester son application

1. 1. Introduction
2. 2. Les tests unitaires
   1. 2.1 Introduction aux tests avec Jasmine
   2. 2.2 Exécuter du code avant ou après chaque test
   3. 2.3 Les matchers mis à disposition
      1. 2.3.1 Comment utiliser un matcher ?
      2. 2.3.2 Des exemples de matchers
      3. 2.3.3 Négation d’un matcher
   4. 2.4 Créer un matcher personnalisé
      1. 2.4.1 Créer une librairie de matchers personnalisés
      2. 2.4.2 Utiliser un matcher personnalisé
   5. 2.5 Les composants
      1. 2.5.1 Le composant à tester
      2. 2.5.2 Le TestBed
      3. 2.5.3 Vérifier que le composant est bien instancié
      4. 2.5.4 Contrôler les propriétés du composant
      5. 2.5.5 S’assurer que le rendu du composant soit cohérent
   6. 2.6 Les services
      1. 2.6.1 Le service à tester
      2. 2.6.2 Tester le service
      3. 2.6.3 S’assurer que le service est bien injecté
   7. 2.7 Les directives
      1. 2.7.1 La directive à tester
      2. 2.7.2 Tester la directive
   8. 2.8 Injecter un faux service
3. 3. Les tests e2e
   1. 3.1 Ajouter Cypress à son projet
   2. 3.2 Interagir avec le navigateur
   3. 3.3 Récupérer un élément du DOM
   4. 3.4 Interagir avec les éléments DOM
   5. 3.5 Tester le composant

Le cross-platform avec Angular

1. 1. Apache Cordova
   1. 1.1 Créer un projet Apache Cordova
   2. 1.2 Angular dans Apache Cordova
   3. 1.3 Utiliser un plug-in Apache Cordova
2. 2. Ionic 6
   1. 2.1 Créer un projet Ionic
   2. 2.2 Utiliser les composants Ionic
   3. 2.3 Lancer l’application
   4. 2.4 Utiliser un plug-in avec Ionic Capacitor

Pour aller plus loin

1. 1. Introduction
2. 2. Rendu côté serveur
   1. 2.1 Principe de la mise en place
   2. 2.2 Ajouter le rendu côté serveur
3. 3. La détection de changement
   1. 3.1 Pourquoi la détection de changement ?
   2. 3.2 Les Zones, ou comment notifier Angular ?
      1. 3.2.1 Le comportement de la détection de changement
      2. 3.2.2 L’immuabilité et la stratégie de détection de changement OnPush
   3. 3.3 Encore plus de contrôle sur la détection de changement
4. 4. Le cycle de vie d’un composant
   1. 4.1 La présentation des lifecycle hooks
      1. 4.1.1 Les différents hooks
      2. 4.1.2 Utiliser un lifecycle hook
   2. 4.2 Le cycle de vie d’un composant
      1. 4.2.1 Le constructeur
      2. 4.2.2 ngOnInit
      3. 4.2.3 ngOnChanges
      4. 4.2.4 ngDoCheck
      5. 4.2.5 ngAfterContentInit
      6. 4.2.6 ngAfterContentChecked
      7. 4.2.7 ngAfterViewInit
      8. 4.2.8 ngAfterViewChecked
      9. 4.2.9 ngOnDestroy
   6. Index