Partie 1 : Découvrir Angular

5 Étapes

1. Les versions utilisées

2. Comment est structuré le cours ?

3. Les ressources du cours

4. Dernières recommandations

5. Remerciements

Chapitre 1 : Présentation de Angular

10 Étapes

1. Introduction

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

4.2. Le Composant

4.3. Le Template

4.4. Les Annotations

Chapitre 2 : ECMAScript 6

10 Étapes

1. C’est quoi, ECMAScript 6 ?

2. Le nouveau monde d’ES6

2.1. L’héritage

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’

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. TypeScript et les fonctions

4.2. Les classes avec TypeScript

4.3. Les Décorateurs

Chapitre 4 : Les 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. Les imports HTML

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

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 !

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

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

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é

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.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

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

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

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

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

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 ?

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

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

Chapitre 18 : Authentification

5 Étapes

2. Mise en place d’un Guard

3. Vers un système d’authentification plus complet

4. Une page de connexion

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

Questionnaire 3 : Aller plus loin avec Angular

1 de 2

Étape Précédent

Chapitre Suivant

11. Conclusion

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

Chapitre Progression

0% Terminé

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 !

En résumé

Angular CLI est l’outil par défaut choisie 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 Suivant