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
Étape Suivant

3. Installer un éditeur de code qui supporte le TypeScript

Angular : Développer votre première application Chapitre 5 : Premiers pas avec Angular 3. Installer un éditeur de code qui supporte le TypeScript

Comme nous l’avons vu, le développement d’applications Angular se fait avec TypeScript, et il va donc falloir installer un éditeur de code  qui supporte le TypeScript.

Heureusement, il existe plusieurs IDEs qui supportent TypeScript et qui pourront vous aider lors de vos développements :

  • Visual Studio Code : Recommandé par Microsoft pour les développements Angular, il s’agit d’un IDE complet, populaire et gratuit. Je ne peux que vous conseiller cet IDE si vous ne savez pas lequel choisir, vous ne pouvez pas vous tromper. 👍
  • WebStorm (Payant, mais licence de 1 an offerte si vous êtes étudiant).
  • Sublime Text avec ce plugin à installer.
  • Il y en a plein d’autres, d’ailleurs le site officiel de TypeScript a listé sur sa page d’accueil les IDEs recommandés pour TypeScript.

Retenez que ces outils vous simplifient la vie, mais qu’ils ne sont pas indispensables. Choisissez l’environnement de développement avec lequel vous êtes le plus à l’aise, et ne vous embêtez pas avec un nouvel IDE si vous êtes satisfait du vôtre.

Le terme IDE désigne un environnement de développement : il s’agit souvent d’un éditeur de texte amélioré, spécialisé dans le développement logiciel avec tel ou tel langage.

Pour ma part, j’ai prévu d’utiliser Visual Studio Code, mais vous êtes libres de travailler avec l’outil que vous préférez. Bon, on commence quand, pour de vrai ?

Étape Précédent
Retour à la/au Chapitre
Étape Suivant