Ce livre permet aux lecteurs de se lancer dans le développement d’applications web avec le framework Angular (en version 19 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 à coeur 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. En complément de ces exemples, le livre est enrichi d’un projet fil rouge qui évolue tout au long des chapitres afin de mettre en pratique chaque nouvelle connaissance et de construire progressivement une application complète et fonctionnelle. 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.

Le lecteur trouvera dans les premiers chapitres une approche des fondamentaux comme comprendre le contenu d’un projet Angular et ses outils, puis un code simpliste pour démarrer sa première application. Les auteurs y traitent aussi les fondamentaux à maîtriser comme le langage de Microsoft : TypeScript et l’outil en ligne de commande CLI. Chaque chapitre détaille ensuite une brique précise du framework. Le lecteur y découvre les composants, les signaux, les services et les directives, tout en apprenant à les maîtriser et les intégrer efficacement. Sont également abordés le mécanisme d’injection de dépendances, la gestion du routage ou encore la création de formulaires.

Le livre se poursuit graduellement avec des thèmes de plus en plus avancés comme l’apprentissage des tests unitaires et tests de bout en bout (end-to-end), différentes solutions pour rendre une application multiplateforme (ou cross-platform), comment architecturer et organiser son application et bien d’autres encore jusqu’à la façon d’effectuer le rendu côté serveur.

Caractéristiques

Livre (broché) - 17 x 21 cm
ISBN : 978-2-409-04910-1
EAN : 9782409049101
Ref. ENI : EI4ANGOO

Caractéristiques

HTML
ISBN : 978-2-409-04911-8
EAN : 9782409049118
Ref. ENI : LNEI4ANGOO

Téléchargements

Des fichiers complémentaires (1 638 Ko)

Avant-propos

Pourquoi cet ouvrage ?
À qui s'adresse cet ouvrage ?
Structure

Introduction

État des lieux du Web
Comment Angular fonctionne-t-il ?

TypeScript

Introduction à TypeScript
Les bases de TypeScript
1. 1. Variables et types de données
2. 2. Les fonctions
  1. a. Déclaration de fonctions
  2. b. Fonctions fléchées
3. 3. Interface et types
  1. a. Définition et utilisation des interfaces
  2. b. Définition et utilisation des types
  3. c. Type d’union
  4. d. Type d’intersection
4. 4. Classes et objets
  1. a. Déclaration de classes
  2. b. Modificateurs
  3. c. Héritage
5. 5. Les énumérations
Fonctionnalités avancées de TypeScript
1. 1. Génériques
2. 2. Les décorateurs
3. 3. Les typings
4. 4. Types spéciaux
  1. a. Any
  2. b. Unknown
  3. c. Void & Never
TypeScript et ECMAScript
1. 1. ECMAScript
2. 2. ECMAScript et TypeScript
Compilation
Conclusion

Les premières étapes avec Angular

Introduction
Configuration de l'environnement
1. 1. Visual Studio Code
2. 2. Node et npm
3. 3. Introduction à Angular CLI
Structure d'un projet Angular
1. 1. Fichiers de configuration
  1. a. package.json et package-lock.json
  2. b. angular.json
  3. c. tsconfig.json
  4. d. .editorconfig
  5. e. GIT
2. 2. Fichiers source
  1. a. index.html et main.ts
  2. b. AppComponent
3. 3. Exercice pratique
Projet fil rouge
1. 1. Introduction
2. 2. Qu’est-ce qu’un tableau Kanban ?
3. 3. Bâtir le projet pas à pas

Les composants

Introduction
Déclaration d'un composant
1. 1. Création
2. 2. Gestion des dépendances
3. 3. Standards
Interactions avec le template
1. 1. Interpolation
2. 2. Binding
  1. a. Binding de propriété
  2. b. Binding d’événement
  3. c. Binding bidirectionnel
3. 3. Résumé
Interactions entre composants
1. 1. Input
2. 2. Output
3. 3. Exemple du binding two way
Cycle de vie d'un composant
1. 1. Phase de création
  1. a. ngOnChanges
  2. b. ngOnInit
  3. c. ngAfterViewInit et ngAfterViewChecked
2. 2. Phase de détection de changements
3. 3. Phase de destruction
4. 4. Détection de changements
La projection de contenu
1. 1. Le principe
2. 2. Multiples projections
3. 3. Récupérer des composants enfants
  1. a. Référence d’un élément
  2. b. Le décorateur @ViewChild
  3. c. Le décorateur @ContentChild
Transformer une donnée grâce aux pipes
1. 1. Introduction
2. 2. Exemples de pipe intégré
3. 3. Création d’un pipe
Les modules
1. 1. L’origine des modules
2. 2. Transition vers les éléments standalone
Projet fil rouge
1. 1. Ajout de l’en-tête
2. 2. Préparation de la page
3. 3. Ajout des modèles
4. 4. Implémentation des composants
5. 5. Création d’un pipe
Conclusion

Contrôle de flux et directives

Introduction
Contrôle de flux
1. 1. @if
2. 2. @switch
3. 3. @for
4. 4. @defer
5. 5. @let
Les directives
1. 1. Directives d’attribut
  1. a. ngClass
  2. b. ngStyle
  3. c. ngModel
  4. d. Créer une directive d’attribut simple
2. 2. Directives structurelles
  1. a. Introduction
  2. b. *ngIf
  3. c. *ngFor
  4. d. *ngSwitch
  5. e. Point sur la micro-syntaxe
  6. f. Créer une directive structurelle
Projet fil rouge
1. 1. Tableau de correspondances
2. 2. Rendre le template dynamique
3. 3. Ajouter la possibilité de glisser-déposer
  1. a. Comment fonctionne le drag and drop nativement ?
  2. b. Structure des directives
  3. c. Identifier l’ordre
  4. d. Mettre la liste à jour
  5. e. Ajouter des effets visuels
Conclusion

Les signaux

Introduction
Créer et consommer des signaux
1. 1. Différents types de signaux
2. 2. Écoute d’un signal
  1. a. Utilisation des Effects
  2. b. Prévenir l’exécution d’un Effect
  3. c. Initialisation et destruction d’un Effect
3. 3. Le type LinkedSignal
4. 4. Le type Resource
Autres signaux
1. 1. Input et Output
2. 2. Les requêtes d’élémentsen tant que signaux
Bonnes pratiques d'utilisation
1. 1. Structurer les signaux
  1. a. Optimisation des paramètres
  2. b. Préserver l’immuabilité
2. 2. Bien construire un Effect
Pour aller plus loin
1. 1. Autres avantages des signaux
2. 2. Graphe de dépendances
Projet fil rouge
1. 1. Migration vers les signaux
2. 2. Manipulation des tickets
Conclusion

Les services

Introduction
Création et utilisation simple d'un service
1. 1. Création
2. 2. Utiliser notre service
L'asynchronisme
1. 1. Introduction et rappel
2. 2. Les Promises
  1. a. Introduction
  2. b. Les helpers
  3. c. Premier exemple
  4. d. Second exemple
3. 3. RxJS
  1. a. Les fondamentaux
  2. b. Les schémas à billes
  3. c. Les opérateurs
  4. d. Créer une suite d’opérateurs réutilisable
  5. e. Qu’est-ce qu’un Subject ?
  6. f. Gestion des erreurs
  7. g. Point d’attention
4. 4. Utilisation de RxJS dans les services
  1. a. Où placer les Observables ?
  2. b. Distinction entre Observable et Subject
  3. c. RxJS, un jeu de composition
Signaux ou Observables ?
1. 1. Passer de l’un à l’autre
2. 2. Quel objet utiliser ?
Les requêtes HTTP
1. 1. Introduction
2. 2. Créer le substitut d’une API
  1. a. Postman
  2. b. MirageJS
3. 3. Utiliser le service HttpClient
  1. a. Les bases
  2. b. Requêter de manière robuste
  3. c. Cohabitation entre Observables et signaux
4. 4. Utiliser les intercepteurs
  1. a. Création d’un intercepteur
  2. b. Exemple de mise en cache des données
  3. c. Exemple d’injection d’un jeton d’authentification
D'autres services existants
1. 1. Router
2. 2. Title
3. 3. ErrorHandler
L'injection de dépendances
1. 1. Fonctionnement
  1. a. Enregistrer un provider
  2. b. Injecter une dépendance
2. 2. Scénarios spécifiques d’injectionde dépendances
Projet fil rouge
1. 1. Configuration de l’API
2. 2. Implémenter les actions relatives aux tickets
  1. a. Définition du service
  2. b. Consommer le service
  3. c. Conclusion
3. 3. Implémenter l’authentification
  1. a. Requêter l’API
  2. b. Ajuster l’interface
Conclusion

Les formulaires

Introduction
Les formulaires orientés template
1. 1. Créer un formulaire
2. 2. Ajouter la validation
Les formulaires réactifs
1. 1. Création d’un formulaire
2. 2. Créer un validateur
  1. a. Validation synchrone
  2. b. Validation asynchrone
3. 3. Interagir avec les formulaires
4. 4. Formulaires dynamiques
5. 5. Utiliser FormBuilder
Projet fil rouge
1. 1. Prérequis
2. 2. Création du formulaire de connexion
  1. a. Création du composant
  2. b. Affichage
3. 3. Formulaire d’ajout/modification d’un ticket
  1. a. Modification des modèles
  2. b. Création du composant d’édition
Conclusion

Naviguer entre les pages

Introduction
Mise en place rapide
1. 1. Configuration des routes
2. 2. Naviguer entre les vues
Les routes en détail
1. 1. Structure d’une route
2. 2. Créer des liens
3. 3. Envoyer et recevoir de la donnée
  1. a. Définir des queryParams
  2. b. Les routes dynamiques
  3. c. Récupérer les paramètres
4. 4. Le lazy loading
  1. a. Différer des composants standalone
  2. b. Différer des modules
Guards de protection des routes
1. 1. Introduction
2. 2. Mise en place
  1. a. CanActivate
  2. b. CanActivateChild
  3. c. CanDeactivate
  4. d. CanMatch
  5. e. Resolve
3. 3. Notes et conclusion
Gestion des erreurs
1. 1. Wildcard
2. 2. Gestionnaire d’erreur
Autres données de navigation
Introduction aux animations
1. 1. Ajouter une première animation
2. 2. Les animations en détail
  1. a. Les triggers
  2. b. Les transitions
  3. c. Les styles et animations
3. 3. Appliquer une animation
4. 4. Bonnes pratiques
Projet fil rouge
1. 1. Prérequis
2. 2. Définition des routes
3. 3. Branchement de la navigation
4. 4. Compléter la page de détails
Conclusion

Gestion d'état et architecture d'un projet

Introduction
Bonnes pratiques
1. 1. Quelques principes
  1. a. Principes de code
  2. b. Structurer son application
  3. c. Être pragmatique
2. 2. Structure de fichiers
3. 3. Redux
  1. a. Définition
  2. b. Popularité
  3. c. Que choisir ?
Définir sa propre gestion d'état
1. 1. Solution simple
2. 2. Store Redux maison
  1. a. Une première version
  2. b. Amélioration et optimisation
Utilisation de la librairie SignalStore
1. 1. Création d’un store
2. 2. Configuration du store
  1. a. L’accès aux données avec withStateet withComputed
  2. b. Les fonctions grâce à withMethods
  3. c. Cycle de vie et surveillance du state
  4. d. Utilisation depuis un composant
3. 3. Le système d’entités
4. 4. Créer une feature personnalisée
5. 5. Utiliser une façade
Autres librairies
Projet fil rouge
1. 1. Création de l’AuthStore
2. 2. Création du BoardStore
  1. a. Définition des fonctions d’aide
  2. b. Définition du state
  3. c. Définition des méthodes
  4. d. Adaptation des composants
Conclusion

Tester son application

Introduction
1. 1. Qu’est-ce qu’un test ?
2. 2. Que faut-il tester ?
3. 3. Les outils
  1. a. Tests unitaires
  2. b. Tests e2e
Tests basiques
1. 1. Structure d’un test
2. 2. Exemple
Substituer des dépendances dans les tests unitaires
1. 1. Vocabulaire
2. 2. Créer des substituts
  1. a. Substitutions en général
  2. b. TestBed
Tester les éléments fondamentaux d’Angular
1. 1. Tester un composant
  1. a. Les fixtures
  2. b. Exemple
  3. c. Gestion des inputs/outputs
2. 2. Tester un pipe
3. 3. Directive
4. 4. Service
  1. a. Service classique
  2. b. Tester des requêtes HTTP
5. 5. Routage
  1. a. Mettre en place et tester la navigation
  2. b. Tester les guards
6. 6. Marble-testing dans RxJS
  1. a. Premier exemple : un simple opérateur
  2. b. Second exemple : un champ de recherche
  3. c. Conclusion
Tests end-to-end
1. 1. Introduction à Cypress
  1. a. Configuration
  2. b. La base des tests
  3. c. Récupérer des élémentsdu DOM
  4. d. Vérifier le rendu
  5. e. Les requêtes HTTP
  6. f. Créer des actions réutilisables
2. 2. Introduction à Playwright
  1. a. Configuration
  2. b. La base des tests
  3. c. Récupérer des élémentsdu DOM
  4. d. Vérifier le rendu
  5. e. Les requêtes HTTP
  6. f. Créer des actions réutilisables
3. 3. Conclusion
Projet fil rouge
1. 1. Tests unitaires
  1. a. Substituer les stores
  2. b. Autres fonctions d’aide
  3. c. Ajouter des données statiques
  4. d. Tester des éléments du layout
  5. e. Tester le tableau
  6. f. Tester un store
2. 2. Tests e2e
  1. a. Tester l’authentification
  2. b. Tester un glisser-déposer
Conclusion

Compilation et performances

Introduction
La compilation
1. 1. Fichiers d’environnement
2. 2. La configuration
Analyser les artéfacts
Optimisations de l'application
1. 1. Actions à prendre
2. 2. Un dernier mot sur la détection de changements
  1. a. Rappel
  2. b. Stratégies de détection
  3. c. L’amélioration apportée par lessignaux
Personnalisations
1. 1. Organiser ses imports
2. 2. Structurer son code grâce à ESLint
3. 3. Formater son code avec Prettier
L'outil d'analyse lors de l'exécution
1. 1. Explorateur de composants
2. 2. Profilage des performances
3. 3. L’onglet Injector Tree
Déploiement
Projet fil rouge
Conclusion

Outils de cross-platform

Introduction
Présentation des outils
Les applications web progressives
1. 1. Fonctionnement
2. 2. Mise en place
3. 3. Installation
4. 4. Utilisation d’une API du navigateur
5. 5. Avantages et limitations
Capacitor (Ionic)
1. 1. Installation
2. 2. Ajout d’un plugin
3. 3. Avantages et limitations
Electron
1. 1. Installation et lancement de l’application
2. 2. Avantages et limitations
Projet fil rouge
1. 1. Prérequis
2. 2. Stocker les données localement
  1. a. Configuration
  2. b. Création d’un service dédié
3. 3. Détection de l’état du réseau
4. 4. Modification de la gestion des données
5. 5. Synchroniser les données
6. 6. Modifier l’interface
Conclusion

Pour aller plus loin

Introduction
Rendre son application multilingue
1. 1. Générer un site par langue
2. 2. Changer de langue dynamiquement
Introduction au rendu côté serveur
1. 1. Qu’est-ce que le rendu côté serveur ?
2. 2. Différents modes de fonctionnement
3. 3. Mise en place rapide du rendu côté serveur
4. 4. Points d’attention
  1. a. Cas problématique
  2. b. Synchroniser un composant après l’hydratation
Plus de précisions
1. 1. Configurer le pré-rendu
2. 2. Notes sur l’hydratation
  1. a. Les bases de l’hydratation
  2. b. L’hydratation incrémentale
Points avancés du rendu côté serveur
1. 1. Définition du serveur Node.js
2. 2. Utilisation avec @angular/localize
3. 3. Le routage serveur
Référencement d'une application
1. 1. Balises de référencement
2. 2. Sitemap et robot.txt
Angular Material
1. 1. Installation rapide
2. 2. Bibliothèque de composants
3. 3. CDK
  1. a. Introduction
  2. b. Exemples
4. 4. Comparaison entre composants et CDK
5. 5. Personnalisation des thèmes
6. 6. Accessibilité
Configuration avancée d'un projet
1. 1. Angular Schematics
  1. a. Création d’un schéma
  2. b. Ajout d’un template
  3. c. Définition des schema.json
  4. d. Création d’un schematic plus complexe
  5. e. Tester un schéma localement
2. 2. Workspaces et libraries
Conclusion