Partie 1 : Démarrer un projet sur de bonnes bases

6 Étapes

1. Avant-propos

2. Remerciements

3. Comment est structuré le cours ?

4. Le fonctionnement de la Maîtriser Angular

5. Ressources de Maîtriser Angular

6. Dernières recommandations

Chapitre 1 : Découvrir le cahier des charges

15 Étapes

1. Un projet incroyable

1.1. Présentation de l’application

1.2. Pour la petite histoire

1.3. Fonctionnement d’un Pomodoro

2. Les interfaces utilisateurs

3. Les parcours utilisateurs

4. Les données

4.1. Un utilisateur

4.2. Une journée de travail

4.3. Une tâche

5. L’architecture technique

5.1. La nécessité d’une base de données

5.2. La plateforme Firebase

5.3. Utilisation de l’API REST de Firebase

Chapitre 2 : Générer son projet avec Angular-CLI

10 Étapes

1. Les outils du développeur Angular

1.1. Node.js et Npm

1.2. TypeScript

1.3. Installer un IDE qui supporte le TypeScript

2.1. Installer Angular CLI

2.2. Générer le socle de notre projet

3. Présentation du socle généré par Angular CLI

3.1. Quelques commandes d’Angular CLI

Chapitre 3 : Mettre en place une Architecture Évolutive

22 Étapes

1. Par où commencer ?

2. Les différents types de modules

2.1. Le module CoreModule

2.2. Le module SharedModule

2.3. CoreModule ou SharedModule ?

2.4. Implémentation de nos modules

2.4.1. Bonne pratique concernant le CoreModule

2.4.2. Ajouter les modules de fonctionnalités

2.4.3. Réorganiser les importations de ses modules

3. Le style de notre application

3.1. Implémentation du style

3.1.1. Intégrer le thème de Bootswatch

3.1.2. Intégrer la partie dynamique de Bootstrap

3.1.3. Choix de la librairie pour les icônes

4. Mise en place de Firebase

4.1. Créer le backend de notre application

4.2. Ajouter Firebase à notre projet Angular

5. Ajouter les modèles

5.1. L’entité User

5.2. L’entité Task

1 de 2

Partie 2 : Construire un espace membre sécurisé avec JWT

Chapitre 4 : Maîtriser les composants

23 Étapes

1. Rappels sur les composants

2. Arborescence des composants

2.1. Les composants de page

2.2. Les composants intelligents

2.3. Les composants idiots

2.4. Le principe de responsabilité unique

3. Création d’une page d’accueil

3.1. Mise en place de la page d’accueil

3.2. Le composant de la bannière

3.3. Les composants de fonctionnalités

3.4. Ajouter une barre de navigation

3.5. Exercice : Ajouter un pied de page

3.5.1. Correction : Ajouter un pied de page

4. Communication entre les composants

4.1. Le parent envoie des données au fils

4.1.1. Utiliser un alias

4.1.2. Intercepter les changements avec un setter

4.1.3. Intercepter les changements avec NgOnChanges

4.2. Le fils envoie des données au parent

4.2.1. Emettre un événement depuis le composant fils

1 de 2

Chapitre 5 : Maîtriser la navigation

22 Étapes

1. La navigation côté client

1.1. Le routeur d’Angular

1.2. Définir l’ordre des routes

2. Les routes de notre application

2.1. Implémenter les routes de notre application

2.2. La route par défaut

2.3. La route générique

3. La navigation côté utilisateur

3.1. Le composant de la barre de navigation

3.2. Créer la barre de navigation latérale dans l’espace membre

3.3. Intégration de la navigation latérale dans l’espace membre

3.3.1. Définir une structure commune aux routes enfants

3.4. Exercice : Ajouter une redirection depuis la bannière

3.4.1. Correction : Ajouter une redirection depuis la bannière

4. Les routes asynchrones

4.1. Présentation des routes asynchrones

4.2. Rendre le module de connexion paresseux

4.3. Exercice : Rendre la route d’inscription asynchrone

4.3.1. Correction : Rendre la route d’inscription asynchrone

4.4. Exercice : Rendre des routes filles asynchrones

1 de 2

Chapitre 6 : Maîtriser les Formulaires Réactifs

30 Étapes

1. Les Formulaires réactifs

1.1. Pourquoi choisir les formulaires réactifs ?

2. Créer un formulaire d’inscription

2.1. Injecter le module ReactiveFormModule

2.2. Implémenter un formulaire réactif

2.3. Ajouter des règles de validation

2.4. Ajouter des indicateurs visuels

2.5. Exercice : Créer un formulaire de connexion

2.5.1. Correction : Créer un formulaire de connexion

3. Cas des formulaires complexes

3.1. Débogguer vos formulaires

3.2. Champ pour la date d’une journée de travail

3.2.1. Mettre le DatePicker en Français

3.3. Champ des tâches d’une journée de travail

3.4. Ajouter une tâche

3.5. Supprimer une tâche

3.6. Exercice : Champ des notes d’une journée de travail

3.6. Correction : Champ des notes d’une journée de travail

4. Ajouter des règles de validation

4.1. Les règles de validation de la journée de travail

1 de 2

Chapitre 7 : Maîtriser les Services

25 Étapes

1. L’injection de dépendance

1.1. Qu’est ce qu’un injecteur ?

1.2. Hiérarchie des injecteurs

1.2.1. Injecteur et unicité

1.2.2. Ordre ascendant des injections

1.3. Définir un fournisseur

1.3.1. Un fournisseur à la racine de l’application

1.3.2. Un fournisseur au niveau d’un module

1.3.3. Un fournisseur au niveau d’un composant

1.4. Intervenir sur le système de l’injection de dépendance

1.4.1. Fournir une valeur simple

1.4.2. Affiner mes injections

2. Les services indispensables

2.1. Le service de chargement, ou loader

2.2. Le service de retour utilisateur, ou toastr

2.2.1. Exercice : Ajouter la possibilité de fermer un toastr

2.2.2. Correction

2.3. Le service de gestion d’erreurs

3. La gestion d’état

3.1. Définir un état avec Angular

1 de 2

Partie 3 : Implémenter des fonctionnalités métiers

Chapitre 8 : Maîtriser l’Authentification

23 Étapes

1. L’authentification avec JWT

1.1. Présentation du fonctionnement de l’authentification avec JWT

1.2. Mettre en place l’authentification côté Firebase

1.2.1. Activer l’authentification par email

1.2.2. Ajouter une base de données sécurisée

1.2.3. Importer le client Http d’Angular

2. Inscrire un nouvel utilisateur

2.1. Récupérer un jeton JWT

2.2. Faire une requête sécurisée avec un jeton JWT

2.2.1. Mettre à jour l’état du service

2.2.2. Gérer les cas d’erreurs

2.2.3. Faire patienter l’utilisateur

3. Connecter et déconnecter un utilisateur

3.1. Connecter l’utilisateur

3.1.1. Récupérer le jeton JWT

3.1.2. Récupérer les données de l’utilisateur depuis le Firestore

3.1.3. Traiter le flux de la connexion

3.2. Déconnecter l’utilisateur

3.3. Sécuriser l’accès à l’espace membre avec un Guard

4. Automatiser l’accès à l’espace membre

1 de 2

Chapitre 9 : Maîtriser l’Autorisation

17 Étapes

1. Présentation de l’autorisation

2. Mise en place de l’autorisation

2.1. Restreindre l’accès aux ressources sensibles

2.2. Adapter l’interface au rôle de l’utilisateur

3. Ajouter la page des paramètres

3.1. Implémenter le formulaire des paramètres

3.2. Exercice : Synchroniser le formulaire et le Firestore

3.3. Correction : Synchroniser le formulaire et le Firestore

3.4. Exercice : Synchroniser le formulaire avec l’état de l’application

3.5. Correction : Synchroniser le formulaire avec l’état de l’application

4. Ajouter la page du profil

4.1. Exercice : Ajouter le formulaire d’édition du profil

4.2. Correction : Ajouter le formulaire d’édition du profil

4.3. Ajouter des indicateurs visuels sur la barre de navigation

4.3.1. Ajouter le nom de l’utilisateur

4.3.2. Ajouter l’avatar de l’utilisateur

Chapitre 10 : Maîtriser le client HTTP

28 Étapes

1. Pousser une journée de travail dans le Firestore

1.1. Ajouter le chargement et la gestion des erreurs

1.2. Prendre en compte le nombre de pomodoro d’une tâche

1.3. Exercice : Améliorer l’ergonomie du formulaire

1.4. Gérer la soumission du formulaire

2. Modifier une journée de travail existante

2.1. Récupérer une journée de travail par date

2.2. Intercepter le changement de journée

2.3. Remonter la modification au composant parent

2.4. Implémenter la modification côté Firestore

2.5. Gérer la soumission du formulaire : création ou modification ?

3. Afficher un « vrai » planning à l’utilisateur

3.1. Récupérer les journées de travail de l’utilisateur

3.2. Afficher les journées de travail reçues

3.3. Améliorer l’apparence du planning

4. Relier le planning et l’édition d’une journée de travail

4.1. Intercepter la date depuis le formulaire

5. Supprimer une journée de travail

5.1. Remonter une entité métier via un événement

5.2 Mettre à jour l’interface du Planning

1 de 2

Chapitre 11 : Maîtriser la programmation réactive avec Angular

29 Étapes

1. Le problème de l’asynchrone avec JavaScript

1.1. Une interface unique grâce aux Observables

1.2. Tout est un flux

2. Comprendre les concepts de base de la Programmation Réactive

2.1. Qu’est ce qu’un Observable ?

2.2. Qu’est ce qu’un Observer ?

2.3. Qu’est ce qu’une Subscription ?

2.4. Qu’est ce que les opérateurs ?

2.5. Qu’est ce qu’un Subject ?

3. Mise en application de la programmation réactive

3.1. Présentation du Famework FOOC

3.2. Exercice : Appliquer le Framework FOOC

3.3 Correction : Appliquer le Framework FOOC

4. Ajouter un titre dynamique

4.1. Ajouter une barre de progression

4.2. Ajouter la ProgressBar sur le dashboard

4.3. Générer le composant qui liste les tâches

4.4. Ajouter la liste des tâches

4.5. Est-ce que des tâches sont prévues ?

4.6. Est-ce qu’un pomodoro est en cours ?

1 de 2

Chapitre 12 : Maîtriser le Déploiement

8 Étapes

1. Adapter les variables d’environnement

2. Créer le livrable de notre application

3. L’intérêt du chargement différentiel

4. Vérifier la taille du livrable

5. Déjouer la mise en cache du navigateur

6. Développeur ou « DevOps » ?

7. Déployer sur Firebase Hosting

Partie 4 : Bonus

🎁 Bonus : Organiser efficacement sa veille sur Angular

4 Étapes

1. Première phase : Découvrir l’éco-système

1.1. L’evolution des versions d’Angular

2. Deuxième phase : Se tenir informé

3. Troisième phase : Maintenir son code à jour

🎁 Bonus : Épisode 1 de Techflix « 3 architectures classiques Angular : SaaS, E-Commerce & Marketplace »

PARTIE 5 : Questions Fréquentes

Maîtriser Angular : F.A.Q

7 Étapes

Question n°7 : Comment aligner correctement le Footer sur la page 404 ?

Question n°1 : Quand doit-on mettre les services dans le CoreModule ?

Question n°2 : Comment gérer le cas où l’apparence de notre application est vraiment différent selon le rôle de l’utilisateur ?

Question n°3 : Où sauvegarder les variables globales ou de configuration ?

Question n°4 : Où placer un validateur personnalisé ?

Question n°5 : Est-ce obligatoire de renseigner l’id des champs pour les formulaires réactifs ?

Question n°6 : Comment gérer l’ouverture d’un nouvel onglet et l’erreur 404 en production ?

Étape Précédent

4. Mise en place de Firebase

Maîtriser Angular : Réussir votre prochain projet en entreprise. Chapitre 3 : Mettre en place une Architecture Évolutive 4. Mise en place de Firebase

Chapitre Progression

0% Terminé

Je vous ai rapidement présenter Firebase au début de ce cours. C’est une solution de Google qui va nous permettre de mettre en place le backend de votre application en quelques clics. Afin de pouvoir utiliser Firebase depuis notre application Angular, nous allons devoir créer un compte sur leur site, et ajouter les clefs de configuration de notre projet fournis par Firebase dans notre application.

En cherchant sur Internet, vous pourrez trouver des paquets proposant de faciliter l’intégration de Firebase avec Angular. C’est effectivement très pratique pour développer une application avec Firebase, mais il y a deux contraintes majeures :

On ne voit pas comment faire les appels au backend. Toute cette compléxité est masqué par la librairie, donc on ne peut pas comprendre ce qu’il se passe vraiment.
Firebase est très peu utilisé dans la « vraie » vie par les entreprises, voir pas du tout. C’est très pratique pour mettre en place rapidement un backend à des fins pédagogique, ou pour de petits projets personnels, mais cette solution a ses limites.

L’approche que j’ai utilisé dans ce cours, c’est d’utilisé directement l’API Rest de Firebase. Comme ça, vous pourrai par la suite interagir avec n’importe quel API Rest dans les projets que vous rencontrerez. Il n’y aura “que” l’url à adapter, et le corps de vos requêtes. Cette approche hybride semble le meilleur compromis : nous comprenons ce nous développons, nous saurons interagir avec n’importe quelle API Rest, et nous ne perdons pas des heures à mettre en place un backend fonctionnel. 😉

Étape Précédent

Retour à la/au Chapitre