Il ne s’agit pas vraiment d’un article, mais d’une liste présentant les principaux changements que j’ai apporté à mon cours pour la migration vers Angular 5.

Cette liste est destinée aux personnes ayant acheté le cours à jour avec Angular 5, et qui souhaite prendre connaissance des nouveaux éléments apportés par cette mise à jour, par rapport à la version du cours précédente, fonctionnant avec Angular 4.3.4.

Modifications globales

  • Mise à jour de la démonstration en ligne pour Angular 5.
  • Mise à jour de tous les extraits de code, disponibles à cette adresse.
  • Création d’un nouveau dépôt sur Github. La correction des chapitres est maintenant accessible via des tags plutôt qu’avec des branches.
  • Le chapitre sur les requêtes HTTP a été complétement réécrit pour utiliser le nouveau module HttpClientModule, plutôt que le module HttpModule.
  • Le chapitre sur les tests a été supprimé. Il été trop incomplet et n’avait pas sa place dans un cours pour les débutants. A la place, de nouvelles fonctionnalités plus concrètes ont été ajoutées pour les lecteurs: authentification avec des identifiants, possibilité de supprimer un Pokémon via l’API, etc. Les tests avec Angular seront présentés dans un nouveau cours destiné à la maîtrise d’Angular.
  • Pour beaucoup de chapitre, j’ai apporté des modifications mineures. Voici ce qui est englober par ce terme:
    • Réecriture des parties présentant des Imprécisions;
    • Correction des coquilles;
    • Indentations identiques pour les extraits de code;
    • Remplacement des quotes par des backquote pour tous les template;
    • Modification de certains commentaires, dans les extraits de code;
    • Mise à jour des numéros des versions des différents outils à installer : Npm / Node / TypeScript / Firebase-tools.

Chapitre 6 : Premiers pas avec Angular

  • Mise à jour de la version de TypeScript pour fonctionner avec Angular 5.
  • Mise à jour des fichiers de configuration systemjs.config.js et package.json.
  • Mise en garde d’un bug relatif à l’utilisation de l’extension Chrome AdBlock avec la librairie Zone.js.

 

Chapitre 7 : Les templates

  • Séparation des fichiers de composant *.ts et des fichiers de template *.html pour le composant AppComponent.

Chapitre 8 : Les directives

  • Modification du nom de la directive pkmnBorderCard afin de respecter les conventions de nommage recommandés par Google : camelCase plutôt que underscore_case.
  • Suppression de Renderer & Renderer2 car ces éléments étaient devenus inutiles et dépréciés.
  • Ajout d’une nouvelle partie afin de paramétrer la couleur de la bordure de la directive avec l’annotation @Input.
  • Ajout d’une seconde propriété pour définir une couleur par défaut aux bordures.

Chapitre 9 : Les pipes

  • Quelques corrections mineures.

Chapitre 10 : Les routes

  • Séparation du fichier du template et de la classe pour les composants ListPokemonComponent et DetailPokemonComponent.
  • Remplacement de snapshot.params[‘id’] par paramMap.get(‘id’), pour la capture du paramètre de la route avec la nouvelle syntaxe d’Angular 5.
  • Ajout d’une explication de la propriété route.snapshot.
  • Mise à jour de la méthode goBack avec l’utilisation du service Location.
  • Quelques corrections mineures.

Chapitre 11 : Les modules

  • Séparation du fichier du template et de la classe pour tous les composants.
  • Ajout d’une explication sur le débugage du routing avec l’option enableTracing.
  • Quelques corrections mineures.

Chapitre 12 : Les services

  • Ajout de l’élément Router dans le constructeur du composant DetailPokemonComponent.
  • Quelques corrections mineures.

Chapitre 13 : Les formulaires pilotés par le template

  • Ajout d’un opérateur facultatif « ? » pour éviter une requête 404 en console, lors du chargement de l’image d’un pokémon, en attendant la réponse l’API simulée.
  • Ajout d’une méthode goEdit dans le composant DetailPokemonComponent.
  • Mise à jour du code de la méthode isTypesValid du composant PokemonFormComponent, pour gérer le cas où aucun type n’a été sélectionné dans le formulaire.
  • Quelques corrections mineures.

Chapitre 14 : Les formulaires pilotés par modèle

  • Ajout d’un exemple d’utilisation et justification de l’utilisation du FormArray.

Chapitre 16 : Effectuer des requêtes HTTP

  • Récriture complète du chapitre pour l’utilisation du module HttpClientModule.
  • Utilisation systméatique des Observables plutôt que des Promesses. Toutes les méthodes du service PokemonsService ont été réécrites.
  • Ajout d’une partie permettant de supprimer un Pokémon.
  • Mise à jour de la partie sur le champ de recherche d’un Pokémon et de l’auto-complétion. Le code est plus concis et conforme avec les exigences d’Angular 5.
  • Quelques corrections mineures.

Chapitre 17 : Authentification

  • Ajout des champs « Name » et « Password » pour le formulaire de connexion à l’application.
  • Quelques corrections mineures.

 

Chapitre 19 : Déployer votre application

  • Mise à jour des fichiers de configuration pour le déploiement sur Firebase.
  • Mise à jour des catures d’écran avec la nouvelle interface de Firebase.
  • Rappel : Mise en garde d’un bug relatif à l’utilisation de l’extension Chrome AdBlock avec la librairie Zone.js.
  • Quelques corrections mineures.

Annexes

  • Quelques corrections mineures.