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

Chapitre Précédent

1. Les outils du développeur Angular

Angular : Développer votre première application (2020) Chapitre 5 : Premiers pas avec Angular 1. Les outils du développeur Angular

Chapitre Progression

0% Terminé

Pour développer avec Angular, il y a un certain nombre d’éléments à installer sur votre machine.

Nous allons réaliser un petit état des lieux avant de commencer, ça ne fera de mal à personne, et au moins nous serons sûr de tous partir sur le même pied d’égalité. Voyons tout de suite les éléments indispensables à installer ou à mettre à jour sur votre poste de travail.

Chapitre Précédent

Retour à la/au Chapitre