Angular

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.

Avant-propos

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

Introduction

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

Ma première application

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

Fondamentaux d’Angular

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

TypeScript

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

Angular CLI

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

Les composants

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

Les services

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

L’injection de dépendances

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

Le requêtage HTTP

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

Les interactions utilisateur

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

Les formulaires

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

Le routage

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

Les directives

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