Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

November 6, 2018

Angular Reactive Forms Course Update (for v7)

Filed under: Angular @ 11:18 pm

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

History

The first release of the “Angular Reactive Forms” course was in January of 2017. It supported Angular 2.0 and did not use the Angular CLI, which was not yet released at that time.

On November 6, 2018, this course was updated to Angular v7.

The key changes include:

  • Update to Angular v7.
  • Update to the Angular CLI.
  • Update to Bootstrap v4 and Font Awesome (since Bootstrap no longer provides icons).
  • Update to the HttpClient module, which was new in Angular v4.3.
  • Update to RxJS v6, which includes new import statements and pipeable operators.
  • Modified to use the new providedIn property of the Injectable decorator to register services.

The detailed changes to this course include:

Module 1: Introduction

  • Changed from “Angular 2” to just “Angular” on the slides and in the narration. (Clip 1, 3, 4)
  • Changed from “Angular 1” to “AngularJS” on the slides. (Clip 2)
  • Updated the screenshot of the GitHub repository. (Clip 3)
  • Upgraded from Bootstrap 3 to Bootstrap 4 and Font Awesome which changed the visual appearance of the pages. (Clip 4)
  • Added delete functionality for the tags. (Clip 4)

Module 2:Template-driven vs. Reactive Forms

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages. (Clip 2)
  • Added callouts to clarify state. (Clip 2)
  • Added examples to clarify the form building blocks. (Clip 2)
  • Added callouts to clarify the directives. (Clip 3)
  • Upgraded to Bootstrap 4 which changed the styles in the HTML, specifically how validation error styles are handled. (Clip 4)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 5, 6, 7, 8)
  • Split clip 5 into 2 clips for a more reasonable clip length.
  • Added a demo slide. (Clip 6, 7)
  • Added information regarding the new Bootstrap 4 is-invalid and invalid-feedback style classes. (Clip 6)
  • Changed SmartArt to Pluralsight standard slide design. (Clip 8)

Module 3: Building a Reactive Form

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1, 4)
  • Re-recorded the demos to match the current sample code. (Clip 3, 4, 6, 7, 8)
  • Minor updates to the slides for Bootstrap 4 styles. (Clip 5)
  • Split clip 5 into 2 clips for a more reasonable clip length.
  • Added a demo slide. (Clip 6)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages and style classes in the Html. (Clip 6, 7, 8)
  • Minor update to the slides to remove style classes. (Clip 9)

Module 4: Validation

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1)
  • Re-recorded the demos to match the current sample code. (Clip 2, 3, 4, 5, 6, 7)
  • Changed the email pattern validator to the new email validator. (Clip 2, 6)
  • Updated the screen shot in the slides due to changes in Bootstrap 4. (Clip 3, 4, 6)
  • Reformatted the code in the slides to make it easier to read. (Clip 4, 5, 7)
  • Changed the default value of the rating from a string to null since it is a numeric value. (Clip 4)
  • In the demo, included a look at the built in min and max validators. (Clip 4)

Module 5: Reacting to Changes

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1)
  • Modified the slide to remove the SmartArt and add callouts. (Clip 2)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages. (Clip 2, 3)
  • Re-recorded the demos to match the current sample code. (Clip 2, 3, 4, 5)
  • Changed SmartArt slide to Pluralsight standard slide design. (Clip 3)
  • Changed the email pattern validator to the new email validator. (Clip 4)
  • Added a detailed callout to show the mapping of the errors collection to the error messages structure. (Clip 4)
  • Updated the demo to use the RxJS version 6 import statement. (Clip 5)
  • Updated the demo to use the RxJS pipeable operator. (Clip 5)
  • Updated the code in the slides due to changes in RxJS and Bootstrap 4. (Clip 6)

Module 6: Dynamically Duplicate Input Elements

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages. (Clip 1)
  • Updated the screen shot in the slides due to changes in Bootstrap 4. (Clip 3)
  • Re-recorded the demos to match the current sample code. (Clip 3, 4, 5, 6, 7, 8. 9)

Module 7: Reactive Form in Context

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1, 2)
  • Updated the screenshot of the GitHub repository. (Clip 2)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages. (Clip 2, 5)
  • Re-recorded the demos to match the current sample code. (Clip 2, 4, 5, 6. 7, 8)
  • Removed the Product List Filter pipe component from the slides because using a pipe to build a filter is no longer recommended. (Clip 3)
  • Changed HttpModule to HttpClientModule in the slides as this was changed in Angular v4.3. (Clip 3)
  • Removed the services from the ProductModule in the slides since services are no longer defined in a module. (Clip 3)
  • Modified the route configuration to follow more common standards with a base “products” route and paramMap in place of params. (Clip 4, 5. 6, 7)
  • Added the edit guard in its own file, modified it to use the providedIn syntax (new in Angular v6) and removed the registration from the Angular module. (Clip 6, 7)

Module 8: Create, Read, Update and Delete (CRUD) Using Http

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1, 4)
  • Removed the Product List Filter pipe component from the slides because using a pipe to build a filter is no longer recommended. (Clip 2)
  • Removed the discussion of the step to register the service since now registration is part of the decorator (‘providedIn’). (Clip 2, 3)
  • Updated from HttpModule to HttpClientModule and from Http to HttpClient as per changes in Angular v4.3. (Clip 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14)
  • Updated RxJS to version 6 imports and pipeable operators. (Clip 3, 5, 6, 7, 9, 11, 12, 13, 14 )
  • Re-recorded the demos to match the current sample code. (Clip 3, 4, 6, 7, 9, 11, 13)
  • Updated the information on installing the in memory web API since we are no longer using system.js. (Clip 4)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages. (Clip 5, 8, 10, 12)
  • Split clip 6 into 2 clips for a more reasonable clip length. (Clip 6, 7)
  • Replaced the Object.assign with the newer spread operator. (Clip 8, 9, 11)

Module 9: Final Words

  • Changed from “Angular 2” to just “Angular” in the narration. (Clip 1)
  • Changed from “Angular 1” to “AngularJS” on the slides. (Clip 2)
  • Upgraded to Bootstrap 4 which changed the visual appearance of the pages. (Clip 2)
  • Added references to Intermediate Angular courses for more information. (Clip 3)

Enjoy!

RSS feed for comments on this post. TrackBack URI

Leave a comment

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