Angular : Développer votre première application

Partie 1 : Découvrir Angular
Chapitre 1 : L’introduction indispensable à Angular
10 Étapes
1. Angular, c’est quoi ?
1.1. Site Web versus Application Web
2. Différences entre Angular et AngularJS
3. La philosophie d’Angular
4. Le fonctionnement global d’une application Angular
4.1. Le Module
4.2. Le Composant
4.3. Le Template
4.4. Les Annotations
5. Conclusion
Chapitre 2 : Le JavaScript moderne avec ECMAScript 6
10 Étapes
1. C’est quoi, ECMAScript 6 ?
2. Le nouveau monde d’ES6
2.1. L’héritage de classes avec JavaScript
2.2. Les paramètres par défaut
2.3. Les nouveaux mots clés : « let » & « const »
2.4. Un raccourci pour créer des objets
2.5. Les promesses
2.6. Les fonctions fléchées, ou « Arrow Functions »
2.7. Les « Template Strings »
3. Conclusion
Chapitre 3 : Découvrir TypeScript
8 Étapes
1. C’est quoi, « TypeScript » ?
2. Angular et TypeScript
3. « Hello, TypeScript ! »
4. Pas de limites avec TypeScript
4.1. Les fonctions avec TypeScript
4.2. Les classes avec TypeScript
4.3. Les Décorateurs
5. Conclusion
Chapitre 4 : Le standard des « Web Components »
7 Étapes
1. Introduction aux « Web Components »
2. Les éléments personnalisés
3. Le DOM de l’ombre
3.1. Angular et le Shadow DOM
4. Les templates HTML
5. Des importations en HTML
6. Conclusion
Chapitre 5 : Premiers pas avec Angular
11 Étapes | 1 Questionnaire
1. Les outils du développeur Angular
2. Installer Node.js et Npm
3. Installer un éditeur de code qui supporte le TypeScript
4. Démarrer un projet Angular
5. Installer Angular CLI
6. Générer le socle de notre projet
7. Présentation du socle généré par Angular CLI
8. Implémenter notre premier composant Angular
9. Présentation du module racine
10. Démarrer l’application
11. Conclusion
Questionnaire 1 : Démarrer avec Angular
Partie 2 : Acquérir les bases sur Angular
Chapitre 6 : Les Composants
7 Étapes
1. Qu’est-ce qu’un composant ?
2. Les cycles de vie d’un composant
2.1. Interagir sur le cycle de vie d’un composant
3. Une méthode pour gérer les interactions utilisateurs
4. Un peu de pratique !
5. Correction
6. Conclusion
Chapitre 7 : Les Templates
9 Étapes
1. Développer des templates
2. L’interpolation
3. Syntaxe de liaison des données
4. Gérer les interactions de l’utilisateur
5. Les variables référencées dans le template
6. Les directives NgIf et NgFor
7. Un peu de pratique : Modifions les templates de notre application
8. Correction
9. Conclusion
Chapitre 8 : Les Directives
7 Étapes
1. Qu’est-ce qu’une directive ?
2. Créer une directive d’attribut
3. Prendre en compte les actions de l’utilisateur
4. Utiliser notre directive
5. Ajouter un paramètre à notre directive
6. Réorganiser notre code
7. Conclusion
Chapitre 9 : Les Pipes
7 Étapes
1. Utiliser un Pipe
1.1. Les pipes disponibles de base
1.2. Combiner les pipes
1.3. Paramétrer nos pipes
1.4. Améliorons l’affichage des dates de notre application
2. Créer un pipe personnalisé
3. Conclusion
Chapitre 10 : Les Routes
12 Étapes
1. Le fonctionnement de la navigation
2. Deux nouveaux composants
2.1. Le composant DetailPokemonComponent
2.2. Le template du composant
2.3. Le composant de la liste des Pokémons
3. Mise en place du système de navigation
3.1. La balise
3.2. Créer les routes
3.3. Déclarer nos routes auprès du module racine
4. Gérer les erreurs 404
5. Débogguer vos routes
6. Conclusion
Chapitre 11 : Les Modules
5 Étapes
1. Le module racine et les autres
2. Créer un module
3. Mettre à jour le reste de l’application
4. Structurer l’architecture de notre application
5. Conclusion
Chapitre 12 : Les services et l’injection de dépendances
7 Étapes | 1 Questionnaire
1. Créer un service simple
2. Utiliser un service
3. L’injection de dépendances
3.1. Fournir un service à toute l’application
3.2. Fournir un service au niveau d’un module
3.3. Fournir un service au niveau d’un composant
4. Conclusion
Questionnaire 2 : Acquérir les bases sur Angular
Partie 3 : Aller plus loin avec Angular
Chapitre 13 : Formulaires pilotés par le template
15 Étapes
1. Introduction
1.1. Le module FormsModule
1.2. La directive NgForm
1.3. La directive NgModel
2. Créer un formulaire
2.1. Le composant du formulaire
2.2. Le template du formulaire
2.3. Les champs du formulaire
2.4. Le bouton submit
3. Ajouter des règles de validation
4. Prévenir l’utilisateur en cas d’erreurs
4.1. Ajouter des indicateurs visuels
4.2. Afficher des messages d’erreurs
5. Intégration du formulaire
6. Conclusion
Chapitre 14 : Formulaires pilotés par le modèle
14 Étapes
1. Les Formulaires pilotés par le modèle
2. Un peu de théorie
2.1. Les contrôles avec FormControl
2.2. Regrouper les contrôles avec FormGroup
2.3. Un comportement commun avec AbstractControl
2.4. Les validateurs
2.5. Combiner les validateurs
2.6. Valider un groupe de contrôle
2.7. Déclarer vos formulaires sous forme de tableaux
3. Construire un formulaire
3.1. Le FormBuilder
4. Développer une règle de validation personnalisée
5. Choisir entre formulaires pilotés par le template ou par le modèle
6. Conclusion
Chapitre 15 : La programmation réactive
8 Étapes
1. Tenir ses promesses
2. La programmation réactive
2.1. Qu’est-ce qu’un « flux » ?
2.2. Traitement des flux
3. La librarie RxJS
3.1. Les Observables
3.2. Observable ou Promesse ?
4. Conclusion
Chapitre 16 : Effectuer des requêtes HTTP standards
18 Étapes
1. Mettre en place le module HttpClientModule
2. Simuler une API Web
3. Mettre à jour notre service
3.1. Gestion des erreurs
3.2. Récupérer un Pokémon à partir d’un identifiant
3.3. Utiliser le service mis à jour
4. Modifier un pokémon
4.1. Une méthode de modification
4.2. Sauvegarder les données
5. Supprimer un pokémon
6. Ajouter un Pokémon
6.1. Ajouter une méthode POST
6.2. Un composant pour ajouter un Pokémon
6.3. Adapter notre modèle
6.4. Importer ce nouveau composant AddPokemon dans l’application
6.5. Adapter notre formulaire d’édition
6.6. Ajouter un lien vers le formulaire d’ajout
7. Conclusion
Chapitre 17 : Effectuer des traitements asynchrones avec RxJS
8 Étapes
1. Construire un champ de recherche
1.1. Un champ de recherche
1.2. Consommer un Observable
1.3. Les termes de la recherche
1.4. Initialiser un Observable
1.5. Afficher le champ de recherche
2. Ajouter une icône de chargement
3. Conclusion
Chapitre 18 : Authentification
5 Étapes
1. Un Guard
2. Mise en place d’un Guard
3. Vers un système d’authentification plus complet
4. Une page de connexion
5. Conclusion
Chapitre 19 : Déployer votre application
9 Étapes | 1 Questionnaire
1. Le processus de déploiement
2. Activer le mode production
3. Créer un livrable pour notre application
4. Déployer sur Firebase Hosting
5. Créer le projet dans Firebase
6. Installer la boîte à outil de Firebase
7. Configurer votre projet pour le déploiement
8. Déployer l’application
9. Conclusion
Questionnaire 3 : Aller plus loin avec Angular
Bonus
🎁 Bonus : Le Guide des Bonnes Pratiques Angular d’après Google
7 Étapes
1. Le principe de « Responsabilité Unique »
2. Les conventions de nommage
3. Les conventions de code
5. Les composants
6. Les services
7. La structure de l’application
8. Conclusion
1 de 2
Étape Précédent
Chapitre Suivante

11. Conclusion

Angular : Développer votre première application Chapitre 5 : Premiers pas avec Angular 11. Conclusion

Voilà, vous avez réalisé votre premier « Hello, World ! » avec Angular ! Vous pouvez être fier de vous.

Mine de rien, ce modeste exemple a nécessité d’utiliser les Web Components, ES6 et TypeScript ! C’est pourquoi il n’était pas inutile de les étudier juste avant.

Je vous propose dans le prochain chapitre de commencer à construire notre application de Pokémons, par-dessus la base que nous venons de réaliser dans ce chapitre. Mais rassurez-vous, il y a encore beaucoup de choses à voir !

Débloquer l’accès au Programme Complet

(12 Chapitres et 2 Bonus supplémentaires)

🔓 Recevoir le seul livre Angular en couleur >>>

En résumé

  • Angular CLI est l’outil par défaut choisi par Angular pour démarrer une nouvelle application.
  • On a besoin au minimum d’un module racine et d’un composant racine par application.
  • Le module racine se nomme par convention AppModule.
  • Le composant racine se nomme par convention AppComponent.
  • Angular CLI est fourni avec des commandes prêtes à l’emploi comme la commande ng serve, qui nous permet de démarrer notre application web dans le navigateur.
Étape Précédent
Retour à la/au Chapitre
Chapitre Suivante