Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

December 20, 2018

Angular Routing Course Update (for v7)

Filed under: Angular,Angular Course Updates @ 12:18 pm

This post identifies the latest changes to the “Angular Routing” Pluralsight course.

History

The first release of the “Angular Routing” course was in March of 2017. It supported Angular 2.0 and did not use the Angular CLI (which was released a few days later).

On December 20, 2018, this course was updated to Angular v7.

The key changes include:

  • Change of all references from “Angular 2” to “Angular”.
  • Modified to use the Angular CLI as this course was originally recorded before the final release of the CLI. This also impacted the module on lazy loading as the files are now bundled at development time as well.
  • Update to Bootstrap v4 and Font Awesome (since Bootstrap no longer provides icons). This affected all screenshots, demos, and code walkthroughs that displayed Html.
  • Replaced param with paramMap, queryParams with queryParamMap, and preserveQueryParams with queryParamsHandling.
  • Added more information on exception handling in a resolver.
  • Replaced animation with animation libraries that were new in v4.3.
  • Modified to use the providedIn property of the Injectable decorator (new in v6) to register services.
  • Modified to use HttpClientModule (new in v4.3) in place of HttpModule.
  • Update to RxJS v6, which includes new import statements and pipeable operators.

The detailed changes to this course include:

General

  • Added more callouts throughout.
  • Removed some of the silence between slides/demos to shorten the clips and improve the flow.
  • Removed many of the fade transitions and eliminated the shadow from the callouts to better follow Pluralsight standards.

Module 1: Introduction

  • Upgraded from Bootstrap 3 to Bootstrap 4 and Font Awesome which changed the visual appearance of the pages. (Clip 2, 4)
  • Changed from “Angular 2” to just “Angular” in the narration and slides. (Clip 2, 5)
  • Changed from “localhost:3000” to “localhost:4200”, which is the Angular CLI default, in the slides and demos. (Clip 2, 4)
  • Updated from HttpModule to HttpClientModule on the slides. (Clip 3)
  • Updated the templateUrl paths to use the ‘./’ prefix. (Clip 4)

Module 2: Routing Basics

  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 2, 3, 4, 5, 6, 7)
    • Folder structure
    • Changed from “localhost:3000” to “localhost:4200”, which is the Angular CLI default.
    • Updated from HttpModule to HttpClientModule.
    • Updated the templateUrl paths to use the ‘./’ prefix.
  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 2, 4)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 2, 3, 5, 6, 7, 8)
  • Changed the demo of adding the base path since it is now automatically added by the CLI. (Clip 3)

Module 3: Routing to Features

  • Updated from HttpModule to HttpClientModule on the slide. (Clip 1)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 2, 4, 5, 6, 7)
    • Folder structure
    • Changed from “localhost:3000” to “localhost:4200”, which is the Angular CLI default.
    • Removed the Product List Filter pipe because using a pipe to filter is no longer recommended.
    • Removed the providers array from the feature modules and instead use the new providedIn property of the Injectable decorator to register services.
    • Added getters to expose the properties from the auth service to the template since the service instance is private to the component.
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 2, 4, 5)
  • Added a demo slide. (Clip 6)

Module 4: Route Parameters

  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 1, 3, 4, 8, 9)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 1, 2, 4, 5, 6, 7, 8, 9, 10, 11)
    • Changed from “localhost:3000” to “localhost:4200”, which is the Angular CLI default.
    • Removed the Product List Filter pipe because using a pipe to filter is no longer recommended.
    • Removed the providers array from the feature modules and instead use the new providedIn property of the Injectable decorator to register services.
    • Modified the parameters of the currency pipe to the latest format.
    • Updated from the params array to the paramMap get method.
    • Changed the interface name from IProduct to Product to match with TypeScript naming conventions.
    • Changed from let to const wherever possible.
    • Updated Http to the newer HttpClient.
    • Updated to RxJS to use its new import statements and pipeable operators.
    • Updated preserveQueryParams to queryParamsHandling.
    • Updated from queryParams to queryParamMap.
  • Add a demo title slide. (Clip 6)
  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 6)

Module 5: Prefetching Data Using Route Resolvers

  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 1, 3)
  • Modified the slides to replace the SmartArt with standard Pluralsight templates. (Clip 2, 3)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 4, 6, 7, 8, 9)
    • Folder structure
    • Registered the resolver using the providedIn property of the Injectable decorator instead of a module.
    • Updated from the params array to the paramMap get method.
    • Changed the interface name from IProduct to Product to match with TypeScript naming conventions.
    • Changed from let to const wherever possible.
    • Updated to RxJS to use its new import statements and pipeable operators.
    • Removed the Product List Filter pipe because using a pipe to filter is no longer recommended.
    • Modified to use the resolver structure with the error handling.
    • Added steps to demonstrate the error handling when running in the browser.
  • Added a clip on handling errors in the resolver service. (Clip 5)
  • Removed the demo that defined the resolver in the module’s providers array as that is not considered a best practice. (Clip 8)

Module 6: Child Routes

  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 2, 4, 5, 8)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 3, 4, 5, 6, 7)
    • Removed the Product List Filter pipe because using a pipe to filter is no longer recommended.
    • Removed the providers array from the feature modules and instead use the new providedIn property of the Injectable decorator to register services.
    • Modified to match the changes in the prior module for better resolver error handling.
    • Changed the interface name from IProduct to Product to match with TypeScript naming conventions.

Module 7: Grouping and Component-less Routes

  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 2, 3)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 2, 3)
    • Modified to match the changes in the prior module for better resolver error handling.

Module 8: Styling, Animating, and Watching Routes

  • Upgraded to Bootstrap 4 and Font Awesome which changed the visual appearance of the pages and style classes in the Html. (Clip 2)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 2, 3, 4, 5, 6)
    • Removed the work around since the routerLinkActive now works correctly on list items.
    • Added an override of the active style class for the nav-link because the default active class was too subtle.
    • Replaced the animation with the route animation features new in Angular 4.3.
    • Changed the spinner to use Font Awesome.
  • Modified the slides to replace the SmartArt with standard Pluralsight templates. (Clip 4)

Module 9: Secondary Routes

  • Upgraded to Bootstrap 4 and Font Awesome which changed the visual appearance of the pages and style classes in the Html. (Clip 2, 3)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 3, 4, 5, 6, 7)
    • Modified to match the changes in the prior module for route animation.
    • Added getters to expose the properties from the service to the template since the service instance is private to the component.
    • Move the html for the message component to its own file.
    • Enhanced the UI of the message component.
    • Registered the message service using the providedIn property of the Injectable decorator instead of a module.
    • Changed from let to const wherever possible.
    • Changed “localhost:3000” to “localhost:4200”, which is the Angular CLI default.
    • Added a demo of why getters are needed to expose the properties from a service.

Module 10: Route Guards

  • Reformatted title slide to match Pluralsight standards. (Clip 1)
  • Corrected duplicate word on slides. (Clip 2)
  • Modified the slides to replace the SmartArt colors with standard Pluralsight colors. (Clip 2)
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 2, 3, 4, 6, 7)
    • Registered the guards using the providedIn property of the Injectable decorator instead of a module.
    • Used the Angular CLI to create the guards.
    • Added diagrams to illustrate the guard process.
    • Updated from the params array to the paramMap get method.
    • Removed the I from the interface names to match with TypeScript naming conventions.
    • Replaced Object.assign with the newer spread operator.
    • Changed from let to const wherever possible.

Module 11: Lazy Loading

  • Modified the Course Intro slide to include information on the added clip. (Clip 1)
  • Added a clip on how Angular builds and serves files to better understand how lazy loading works. (Clip 2)
  • Modified the slides to replace the SmartArt with standard Pluralsight templates. (Clip 3, 6, 7, 8)
  • Added a slide to summarize the benefits of lazy loading. (Clip 4).
  • Re-recorded the demos/slides to match the current sample code using the Angular CLI and Angular v7. (Clip 3, 4, 5, 6, 7, 8, 9)
    • At development time, the files for the application are now bundled similar to a production build, so the Network tab no longer displays each individual JavaScript file. It instead lists the bundles.
    • Updated from HttpModule to HttpClientModule.
    • Removed the Product List Filter pipe because using a pipe to filter is no longer recommended.
    • Removed the providers array from the feature modules and instead use the new providedIn property of the Injectable decorator to register services.
    • The folder path used in the loadChildren property now uses ‘./’ for relative routes.
    • Registered the service using the providedIn property of the Injectable decorator instead of a module.
  • Added a demo slide. (Clip 7)

Module 12: Final Words

  • Updated from HttpModule to HttpClientModule on the slides. (Clip 2)
  • Modified the course references. (Clip 3)

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs