Statut actuel

Non-inscrit

Tarif

Fermé

Commencer

Suivre ce cours

Maîtriser Angular

Réussir votre prochain projet Angular en entreprise

REJOINDRE LE PROGRAMME « MAÎTRISER ANGULAR »

Contenu Cours

Tout Afficher

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

Préambule 6 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/6 Etapes

1. Avant-propos

2. Remerciements

3. Comment est structuré le cours ?

4. Le fonctionnement de Maîtriser Angular

5. Ressources de Maîtriser Angular

6. Dernières recommandations

Chapitre 1 : Découvrir le cahier des charges 15 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/15 Etapes

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

6. Conclusion

Chapitre 2 : Générer correctement son projet avec Angular-CLI 10 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/10 Etapes

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

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

5. Conclusion

Chapitre 3 : Mettre en place une Architecture Évolutive 22 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/22 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/23 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/22 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/30 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/25 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/23 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/17 Etapes

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

5. Conclusion

Chapitre 10 : Maîtriser le client HTTP 28 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/28 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/29 Etapes

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

Afficher

Contenu de la Chapitre

0% Terminé 0/8 Etapes

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

8. Conclusion

Partie 4 : Bonus

🎁 Bonus : Organiser efficacement sa veille sur Angular 4 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/4 Etapes

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 : 3 Architectures Classiques Angular « SaaS, E-Commerce ou Marketplace ? »

🎁 Bonus : Le Pack Startup Angular

Partie 5 : Questions Fréquentes

Maîtriser Angular : F.A.Q 7 Étapes

Afficher

Contenu de la Chapitre

0% Terminé 0/7 Etapes

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 ?

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