Deviens un ninja
avec Angular
Cet ebook t'aide à comprendre la philosophie d'Angular, les outils (dont ES2015, TypeScript, Angular CLI...) et chaque brique du framework de façon pragmatique. Dès la fin de la lecture, tu seras capable de démarrer ton projet et développer l'application de tes rêves !
Pour aller plus loin, un Pack Pro est disponible, avec plein de tests unitaires fournis. Tu pourras alors coder dans l'instant, étape par étape, pour construire une véritable application, en suivant ce que tu as appris dans le livre.
Disponible en PDF, EPUB & HTML; Anglais & Français; Paiement PayPal ou CB via Stripe.
J'ai déjà acheté cet ebook, mais je veux récupérer la dernière version.
Cet ebook est mis à jour régulièrement, voir l'historique des révisions. La version courante utilise Angular 19.2.7.
Ce que vous apprendrez
Découvrez les notions que nous étudierons dans ce livre
Angular moderne
Le livre et les exercices, tout en mentionnant les manières plus anciennes de faire les choses, se concentrent sur l'Angular moderne : composants standalone, réactivité basée sur les signaux et interopérabilité avec RxJS, et bien sûr TypeScript.
Comment ça fonctionne
Tu découvriras bien sûr la syntaxe des templates, le système d'injection de dépendances, le routage, les tests, les formulaires, RxJS. Mais le livre explique aussi comment le framework fonctionne, pourquoi certains choix sont meilleurs que d'autres, et les raisons derrière les choix d'architecture.
Bonnes pratiques
Le livre et les exercices ont évolué, maturé et se sont améliorés en même temps que le framework, et grâce à notre longue expérience sur des projets réels. Gagne du temps en bénéficiant de cette expérience, de nos trucs et astuces et des meilleures pratiques.
Composants
Apprend comment concevoir tes pages en les divisant en composants, directives et services. Découvre les diverses manières de les faire collaborer et communiquer entre eux. Intègre des librairies de composants réutilisables dans ton application.
Tests
Nous passerons aussi du temps à parler des tests, unitaires et de bout en bout, et à apprendre comment les écrire, les exécuter et les maintenir. Si tu optes pour le Pack Pro, tous les exercices consistent à faire passer des tests automatisés que nous avons écrits, et qui peuvent te servir d'inspiration pour écrire tes propres tests.
Performance
La performance est au cœur de nombreux choix architecturaux faits par Angular. Le transition vers les signaux est bien sûr l'un d'entre eux. Tu apprendras le comment, mais aussi le pourquoi. Et nous nous assurerons que tu puisses écrire du code aussi efficace que possible sans tomber dans les pièges que l'optimisation peut apporter.
Table des matières
Voici tous les chapitres que tu pourras lire dans notre eBook. Tu peux aussi consulter l'historique des révisions ici.
- IntroductionGratuit
- Une rapide introduction à ECMAScript 2015+Gratuit
- Transpileur
let- Constantes
- Raccourcis pour la création d’objets
- Affectations déstructurées
- Paramètres optionnels et valeurs par défaut
- Rest operator
- Classes
- Promises
- (arrow functions)
- Async/await
- Set et Map
- Template de string
- Modules
- Conclusion
- Un peu plus loin qu’ES2015+Gratuit
- Types dynamiques, statiques et optionnels
- Hello TypeScript
- Un exemple concret d’injection de dépendance
- Découvrir TypeScriptGratuit
- Les types de TypeScript
- Valeurs énumérées (enum)
- Return types
- Interfaces
- Paramètre optionnel
- Des fonctions en propriété
- Classes
- Utiliser d’autres bibliothèques
- Décorateurs
- TypeScript avancéGratuit
- readonly
- keyof
- Mapped type
- Union de types et gardien de types
- Le monde merveilleux des Web ComponentsGratuit
- Le nouveau Monde
- Custom elements
- Shadow DOM
- Template
- Les bibliothèques basées sur les Web Components
- La philosophie d’AngularGratuit
- Commencer de zéroGratuit
- Node.js et NPM
- Angular CLI
- Structure de l’application
- Notre premier composant standalone
- Démarrer l’application
- Les signaux : les briques de base de l’état de l’application
- Qu’est-ce qu’un signal ?
- Créer, lire et écrire un signal
- La syntaxe des templates
- Interpolation
- Utiliser d’autres composants dans nos templates
- Binding de propriété
- Événements
- Expressions vs instructions
- Variables locales
- If, For et Switch avec la syntaxe control flow
- Variable de template avec
@let - Directives structurelles
- Directives de templating
- Résumé
- Créer des composants et directives
- Introduction
- Directives
- Sélecteurs
- Inputs avec
input() - Le décorateur
@Input - Outputs avec
output() - Le décorateur
@Output - Cycle de vie
- Métadonnées spécifiques des composants
- Template / URL de template
- Styles / URL de styles
- Réagir aux changements des signaux
- Signaux calculés avec
computed - Effets avec
effect
- Signaux calculés avec
- Style des composants et encapsulation
- Stratégie Shadow DOM
- Stratégie Emulated ("émulée")
- Stratégie None ("aucune")
- Style l’hôte
- Pipes
- Ceci n’est pas une pipe
- json
- slice
- keyvalue ("clé valeur")
- uppercase ("majuscule")
- lowercase ("minuscule")
- titlecase ("titre")
- number ("nombre")
- percent ("pourcent")
- currency ("devise monétaire")
- date
- async
- Un pipe dans ton code
- Créer tes propres pipes
- Injection de dépendances
- Cuisine et Dépendances
- Développement facile
- Configuration facile
- Autres types de provider
- Injecteurs hiérarchiques
- Injection sans types
- Services fournis par le framework
- Programmation réactive
- OK, on vous rappellera
- RxJS
- Les signaux et l’interopérabilité avec RxJS
- Tester ton application
- Tester c’est douter
- Tests unitaires
- Dépendances factices
- Tester des composants
- Tester avec des templates ou providers factices
- Des tests unitaires plus simples et plus propres avec
ngx-speculoos - Tests de bout en bout
- Envoyer et recevoir des données par HTTP
- Obtenir des données (
provideHttpClient) - Transformer des données
- Options avancées
- Intercepteurs
- Contexte
- Tests
- Obtenir des données (
- Routeur
- En route (
provideRouter) - Navigation
- Redirections
- Quelle route pour une URL ?
- Routes hiérarchiques
- Guards
- Resolvers
- Événements de routage
- Paramètres et data
- Lier les paramètres et data aux inputs des composants
- Chargement à la demande
- En route (
- Formulaires
- Form, form, form-idable !
- Formulaire piloté par le template
- Formulaire piloté par le code
- Un peu de validation
- Erreurs et soumission
- Un peu de style
- Créer un validateur spécifique
- Regrouper des champs
- Réagir aux modifications
- Mettre à jour seulement à la perte de focus ou à la soumission
FormArrayetFormRecord- Des formulaires typés
- Des messages d’erreur de validation super simples avec
ngx-valdemort - Aller plus loin : définir ses propres contrôles de formulaires avec
ControlValueAccessor - Conclusion
- Les Zones et la magie d’Angular
- ZoneJS
- La détection de changement
- Compilation Angular : JiT (Just in Time) et AoT (Ahead of Time)
- Génération de Code
- Compilation En Avance (Ahead of Time, AoT)
- Observables : utilisation avancée
- Certains l’aiment chaud
- Dé-souscriptions
- Dé-souscriptions automatiques
- Le pouvoir des opérateurs
- Utiliser les Subjects comme déclencheurs
- Construire son propre Observable
- Gestion d’état avec un store (NgRx, NGXS, Elf et autres)
- Conclusion
- Composants et directives avancés
- Transformation d’inputs
- Requêtes de vue :
viewChild - Contenu :
ng-content - Requêtes de contenu :
contentChild - Projection de contenu conditionnelle et contextuelle :
ng-templateetngTemplateOutlet - À l’écoute de l’hôte : Host Listener
- Binding sur l’hôte : Host binding
- Manipulation de DOM avec
afterRenderouafterNextRender
- Les modules Angular
- Une unité de compilation
- Composition de modules
- Modules fonctionnels associés au routage
- Internationalisation
- La locale
- La devise par défaut
- Traduire du texte
- Processus et outillage
- Traduire les messages dans le code
- Pluralisation
- I18n à l’exécution avec Transloco
- Bonnes pratiques
- Performances
- Premier chargement (bundling, compression, lazy-loading, rendu côté serveur…)
- Rechargement (cache, service worker)
- Profilage
- Performances à l’exécution
- Mode production
trackdans les boucles for- Stratégies de détection de changements
- Sortir de la zone
- Détection de changements zoneless
- Pipes purs
- Signaux : pour aller plus loin
- Égalité
untracked- Effets racine et effets de composant
afterRenderEffect- Nettoyage d’un effet
- Binding bidirectionnel avec les
modelinputs - Signaux liés avec
linkedSignal - Ressources asynchrones avec
resourceetrxResource - Appels HTTP avec
httpResource
- Chargement différé avec
@defer@placeholder,@loadinget@error- Conditions
- Pré-chargement avec
prefetch - Comment tester le chargement différé ?
- Livrer en production
- Environnements et configurations
- strictTemplates
- Assembler ton application
- Configuration du serveur
- Conclusion
- Ce n’est qu’un au revoir
Le Pack Pro
Passe à la vitesse supérieure en construisant un vrai projet, étape par étape !
Le Pack Pro te propose une série d'exercices qui permet de construire l'application PonyRacer de A à Z, en te frottant à tous les problèmes des applications JavaScript modernes. À chaque étape, tu reçois un jeu d'instructions correspondant à l'un des chapitres du livre, et un ensemble de tests unitaires et end-to-end à faire passer. Un module NodeJS que nous avons conçu sera là pour t'aider à analyser ton code et calculer ton score. A toi de résoudre le problème grâce à nos astuces ! Lorsque tu as terminé, ou si tu es bloqué, tu peux consulter la solution que nous avons élaborée. La plateforme te permet de suivre tes progrès, et t'informe lorsque nous mettons à jour les exercices. Tu peux alors passer à cette nouvelle version (gratuitement), et reprendre là où tu en étais. C'est un excellent moyen de suivre l'évolution des bonnes pratiques !
PonyRacer
Construis une application complète
Grâce au Pack Pro, tu apprendras à construire une application pour parier sur des courses de poneys (parce que tout le monde aime les poneys), mais surtout, tu apprendras tous les cas d'utilisation dont tu pourrais avoir besoin dans une véritable application Angular.
Liste des exercices
Voici toutes les leçons que tu pourras suivre avec notre Pack Pro.
- C'est parti !Gratuit
Générons le squelette du projet, et commençons notre aventure !
- Quiz sur les templatesGratuit
Un quiz facile pour commencer avec la syntaxe des templates. Prêt ?
- TemplatesGratuit
Apprenez-en un peu plus sur les composants et la syntaxe des templates avec un nouveau composant pour le menu responsive.
- Liste des coursesGratuit
Créez un nouveau composant pour afficher la liste des courses.
- Détail d'une courseGratuit
Affichez un détail de la course plus convivial, avec une liste de poneys.
- Composant poneyGratuit
Ajoutez un joli composant poney, avec une belle image en 8-bit.
- Utilisation des pipesGratuit
Utilisez un pipe dans votre template pour formater des données brutes.
- Pipe personnalisé avec date-fns
Construisez votre propre pipe en utilisant la bibliothèque tierce date-fns pour afficher des belles dates.
- Service pour les courses
Construisez un service pour gérer la logique métier des courses, avec une touche d'injection de dépendances.
- Quiz sur les observables
Voyons comment nous utilisons RxJS.
- Observables avec RxJS
Apprenez-en plus sur la programmation réactive et utilisez des observables dans le service.
- HTTP
Récupérez des données via HTTP depuis l'API REST de Ponyracer.
- Router
Créons de belles URLs qui reflètent le contenu affiché en utilisant le router.
- Quiz sur les formulaires
Vous souvenez-vous comment construire des formulaires ?
- Formulaire de connexion
Construisez un formulaire simple pour authentifier nos utilisateurs.
- Formulaire d'inscription
Construisez un formulaire plus complexe avec toutes les fonctionnalités d'Angular.
- Control Value Accessor
Créez un composant de formulaire personnalisé avec un Control Value Accessor.
- Gestion de l'état
Affichez notre utilisateur connecté et ajoutez une fonctionnalité de déconnexion avec l'aide des signaux.
- Se souvenir de moi
Devoir se connecter à chaque fois est pénible : souvenons-nous de notre utilisateur pour la prochaine fois ! Jouez avec le LocalStorage et les effets.
- Quiz sur HTTP
Vérifions vos connaissances de l'API HTTP !
- HTTP avec authentification
Certaines entrées de l'API REST sont sécurisées : voyons ce que nous devons faire pour les appeler, et comment utiliser les intercepteurs. Aussi une petite introduction aux JSON Web Token et à comment utiliser les fichiers d'environnement.
- Parier sur un poney
Où est le fun si on ne peut pas parier sur un poney ? Les outputs et RxJS à la rescousse !
- Course en direct
Affichez la course en direct avec des fausses données provenant d'un observable fait main avec RxJS.
- WebSockets
Récupérez des données en temps réel du serveur via WebSockets !
- Trucs et astuces avec les observables
Apprenez quelques opérateurs utiles et devenez un maître avec RxJS et les Observables.
- Booster un poney
Nous pouvons rendre un poney beaucoup plus rapide en cliquant dessus : une bonne excuse pour apprendre quelques astuces avancées de RxJS.
- Score utilisateur réactif
Notre score utilisateur devrait se mettre à jour en temps réel. Un autre cas d'utilisation pour les observables et les signaux !
- Quiz sur le router
Vérifions vos connaissances du router !
- Routes protégées avec des guards
Utilisons des guards pour protéger des parties de notre application.
- Routes imbriquées et redirections
Une vraie application a souvent des routes imbriquées et des redirections.
- Chargement à la demande
Le router peut charger à la demande des parties de notre application. Voyons comment !
- Construire des composants avancés
Apprenez à construire des composants avancés, en utilisant `ng-content`.
- Construire des directives avancées
Apprenez à construire des directives avancées, en utilisant `contentChild`, host listener et host binding.
- Intégrer une bibliothèque UI
Utilisons des composants UI de ng-bootstrap, une bibliothèque tierce avec des composants puissants.
- Graphiques dans votre application
Toute application professionnelle a son graphique. Voyons comment Angular peut jouer avec Chart.js.
- Astuces de performance
Angular est super rapide, mais il reste quelques astuces à apprendre pour ne mettre à jour le DOM que lorsque c'est nécessaire, et rendre la détection des changements plus performante.
- Application sans zone
Débarrassons-nous de zone.js !
- Internationalisation
Localisation et traductions dans notre application en utilisant Transloco.
- Passer en production
Dernière étape pour livrer notre application ! Que devons-nous faire pour lancer notre produit ?
Extraits gratuits
Jette un oeil à ces extraits pour te faire une idée.
Prix et packages
Ce livre est fourni en deux langues : l'anglais et le français. Le Pack Pro (notre plateforme en ligne pleine d'exercices) peut être acheté pour une équipe de toute taille, avec une réduction appropriée.
| eBook | Pack Pro | |
|---|---|---|
| Prix libre | 99,00 € | |
| Acheter | Acheter | |
| ePUB | ||
| HTML | ||
| Anglais | ||
| Français | ||
| Exercices | ||
| Tests | ||
| Projet complet | ||
| Quiz | ||
| Code source de l'application |
Foire aux questions
Comme tu as probablement une question angoissante en tête, on va essayer d'y répondre calmement
Cet ebook s'adresse à tous ceux qui veulent découvrir et/ou apprendre en profondeur Angular. Des étudiants débutants aux développeurs très expérimentés, en passant par des fans absolus d'autres frameworks (Vue.js, React), tous ont trouvé dans ce livre des éléments pour progresser.
Cela peut aussi être un bon cadeau à faire à un ami ! ;)En bons adeptes des tests, chacun de nos bouts de code donnés en exemples sont analysés statiquement et testés unitairement. Cela nous permet, lors de la rédaction de ce livre, d'upgrader Angular à chaque nouvelle release, et de détecter automatiquement les changements non compatibles (et ils étaient nombreux avant la sortie finale...). Ensuite, cela te garantira que chaque bout de code est fonctionnel, et que les mises à jour d'Angular n'ont rien cassé. Idem pour le Pack Pro, où le projet est régénéré intégralement à chaque nouvelle version, et chaque étape testée en détail.
On rédige ce livre en Asciidoc, et on utilise AsciiDoctor pour produire les formats attendus (PDF, EPUB, et HTML). Un build orchestré par Angular CLI analyse les bouts de code en exemple, les teste tous unitairement, avant de les embarquer dans le texte source de l'ebook.
Soyons honnêtes : les ventes de ce livre ne payeront jamais le temps investi pour l'écrire (tous les auteurs de livres techniques te le diront).
Mais nous sommes heureux de contribuer, même modestement, à une cause qui nous est chère. Tu pourras ainsi récompenser les auteurs pour leur travail, et soutenir cette association, selon le ratio que tu veux.Absolument pas.
Non, c'est la seule restriction : la revente et la redistribution sont interdites.
Nous ne recueillons que ton email, nécessaire pour l'envoi de ton achat, de ta facture et de quelques emails pour te notifier d'une nouveauté dans l'ebook. Tu peux à tout moment demander la suppression de ton email de notre base de données (mais nous ne pourrons plus t'envoyer les mises à jour).
Oui, tu recevras une facture pour chaque achat. Et tu pourras même saisir les coordonnées spécifiques de ton entreprise si tu comptes lui faire suivre.
Bien sûr ! Il te suffit d'indiquer la quantité dont tu as besoin lors de l'achat, et tu auras une réduction en fonction. Tu pourras ensuite inscrire les membres de ton équipe un par un, pour leur permettre l'accès à la plateforme. Si ce n'est pas clair, envoie un email à hello+books@ninja-squad.com pour en discuter.
Merci de poser cette question ! :) Oui, nous donnons des formations sur Angular pour tous les niveaux, mais aussi sur d'autres sujets qui peuvent t'intéresser. Nos actions de formation sont également certifiées Qualiopi, ta formation peut donc être financée intégralement ou partiellement par ton OPCO.
L'auteur
Cédric Exbrayat
Je suis un développeur web, un membre de l'équipe Angular qui s'intéresse aussi à Vue.js, et un des co-fondateurs de Ninja Squad. Toute notre petite entreprise est impliquée dans l'écriture de ce livre, écrivant certaines parties, testant le code, et donnant des retours.
Ninja Squad est uniquement composée de quatre développeurs, qui aident d'autres équipes à construire leurs projets, niveau backend comme frontend. La qualité du code est notre priorité, et en tant que développeurs expérimentés, les ninjas aiment partager leurs connaissances avec d'autres. Les livres comme celui-ci sont un bon moyen, mais nous écrivons aussi sur notre blog, nous donnons des formations à d'autres développeurs, et nous organisons des conférences, la plus chère à notre cœur étant MiXiT.
Notre support à l'EFF
Défends tes droits sur Internet tout en apprenant Angular !
Ninja Squad a choisi de soutenir cette organisation durant cette vente. Quand tu achèteras notre livre électronique, tu ne décideras pas seulement de combien tu veux le payer, mais aussi, si tu le désires, de combien tu veux donner à l'EFF. Notre société s'engage à reverser périodiquement l'ensemble des dons reçus.