Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

Archive for Angular Course Updates

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)
November 8, 2018

Angular: Getting Started Course Update (for v7)

This post identifies the latest changes to the “Angular: Getting Started” Pluralsight course.

History

Angular 2 first appeared around June of 2015 as alpha.27. The first beta release of Angular 2 was December 12, 2015, a great time to start on an Angular 2 getting started course. The first release of the “Angular: Getting Started” course was on April 1st, 2016. The code examples for the course were valid through Angular beta.15. From that time until release, Angular underwent numerous changes … some, such as the new router and the introduction of Angular modules, were significant.

Angular 2.0.0 was released on September 14th, 2016, so that was a great time to update the “Angular: Getting Started” course. That update was released October 19, 2016 and completely replaced the entire course. The original course was deprecated and the update was given a new link in the Pluralsight library.

Angular v4.0 was released on March 23, 2017 and included many great compiler and performance improvements, but not many feature changes that affected this course. However, the Angular CLI was also released around this time and began to be a viable and very productive alternative for generating Angular code.

Angular v4.3 was released on July 14th, 2017 and introduced a new HttpClient module. This seemed like a great time then to update this course *and* include content on using the Angular CLI. This update was provided as a patch to the existing course and was published to the Pluralsight library on August 10, 2017.

Angular v6 was released on May 3, 2018. There was very little changed in Angular, but RxJS changed significantly as did Bootstrap. So time for another update to this course. This update was provided as a patch to the existing course and was published to the Pluralsight library on July 11, 2018.

Angular v7 was released on October 18, 2018. There was very little changed in Angular, but the CLI was enhanced and includes user prompts.

The key changes include:

  • Update to Angular v7.
  • Update to the Angular CLI to include user prompts.

The detailed changes to this course include:

Module 2: First Things First

  • Replaced screens showing the package.json to show the v7 packages. (Clip 6, 7)

Module 13: Building, Testing, and Deploying with the CLI

  • Replaced screens showing the package.json to show the v7 packages. (Clip 2, 3, 4)
  • Modified the demo of the CLI to include the user prompts. (Clip 3)

Enjoy!

November 6, 2018

Angular Reactive Forms Course Update (for v7)

Filed under: Angular,Angular Course Updates @ 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!

July 11, 2018

Angular: Getting Started Course Update (for v6)

This post identifies the latest changes to the “Angular: Getting Started” Pluralsight course.

History

Angular 2 first appeared around June of 2015 as alpha.27. The first beta release of Angular 2 was December 12, 2015, a great time to start on an Angular 2 getting started course. The first release of the “Angular 2: Getting Started” course was on April 1st, 2016. The code examples for the course were valid through Angular beta.15. From that time until release, Angular underwent numerous changes … some, such as the new router and the introduction of Angular modules, were significant.

Angular 2.0.0 was released on September 14th, 2016, so that was a great time to update the “Angular 2: Getting Started” course. That update was released October 19, 2016 and completely replaced the entire course. The original course was deprecated and the update was given a new link in the Pluralsight library.

Angular v4.0 was released on March 23, 2017 and included many great compiler and performance improvements, but not many feature changes that affected this course. However, the Angular CLI was also released around this time and began to be a viable and very productive alternative for generating Angular code.

Angular v4.3 was released on July 14th, 2017 and introduced a new HttpClient module. This seemed like a great time then to update this course *and* include content on using the Angular CLI. This update was provided as a patch to the existing course and was published to the Pluralsight library on August 10, 2017.

Angular v6 was released on May 3, 2018. There was very little changed in Angular, but RxJS changed significantly as did Bootstrap. So time for another update to this course. This update was provided as a patch to the existing course and was published to the Pluralsight library on July 11, 2018.

The key changes include:

  • Update to Bootstrap v4 and Font Awesome (since Bootstrap no longer provides icons).
  • Update to the Angular CLI v6, which slightly changed the folder structure.
  • 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.
  • Modified to use the new currency pipe parameters.
  • Added additional required setup steps for those that don’t use my starter files.

The detailed changes to this course include:

Module 1: Introduction

  • Resized image to full screen. (Clip 1)
  • Replaced Discussion slide with current screen shot. (Clip 3)
  • Added a callout around the URL for the github repo. (Clip 3) Some viewers were finding older versions of the code that other developers had created instead of finding the DeborahK github repo with the correct files. https://github.com/DeborahK/Angular-GettingStarted
  • Upgraded from Bootstrap 3 to Bootstrap 4 and Font Awesome which changed the visual appearance of the pages. (Clip 4)

Module 2: First Things First

  • Removed the word “recently” when referring to ES 2015. (Clip 2)
  • Updated the image of the VS Code web site. (Clip 3)
  • Updated the image, callout, and narration for installing npm. (Clip 4)
  • Removed the option to use the quick start files from the Angular team as that option has been deprecated. (Clip 5)
  • Updated the github screen shot. (Clip 5)
  • Updated the folder structure screen shot. (Clip 5)
  • Replaced the installation demo to include a check of the npm version and for the new v6 files that appear in the Explorer window. (Clip 6)
  • Replaced the demo due to the new v6 files and reordered the steps for clarity. (Clip 7)

Module 3: Introduction to Components

  • Replaced the first part of the demo due to the new v6 files. (Clip 6)
  • Replaced the demo due to the new v6 files and changed debugging layout. (Clip 8)
  • Removed the information about the providers array, since it is no longer generated by the CLI. (Clip 8)
  • Corrected old link to the course discussion page in the slides. (Clip 9)
  • Hid the cursor that popped up in the slides at the end of the clip. (Clip 9)

Module 4: Templates, Interpolation, and Directives

  • Updated screen shots in the slides to new Bootstrap 4 and Font Awesome display. (Clip 2)
  • Added demo steps to install Bootstrap 4 and Font Awesome and import their styles. (Clip 2)
  • Replaced demo due to new v6 files. (Clip 2, 3)
  • Replaced demo due to new v6 files and improved quick fix. (Clip 4)
  • Replaced demo due to Bootstrap 4 style classes. (Clip 5)
  • Replaced DOM images on the slides with current DOM structure. (Clip 6)
  • Replaced demo due to Bootstrap 4 style classes both in the code and in the browser. (Clip 6)
  • Replaced browser portion of the demo due to Bootstrap 4 styles. (Clip 7)
  • Adjusted the timing of the step numbers on the “Component as a Directive” slide. (Clip 8)

Module 5: Data Binding & Pipes

  • Removed the recommendation of property binding over interpolation since that is no longer the recommendation. (Clip 2)
  • Replaced demo due to Bootstrap 4 style classes. (Clip 2, 3, 4)
  • Updated slide to new currency pipe syntax. (Clip 5)
  • Replaced demo due to new currency pipe syntax. (Clip 5)
  • Updated slide to Bootstrap 4 style classes in the DOM. (Clip 6)
  • Updated slide to new currency pipe syntax. (Clip 6)

Module 6: More on Components

  • Replaced demos due to Bootstrap 4 style classes. (Clip 2, 3, 4, 5, 6)
  • Updated demos due to new currency pipe syntax. (Clip 5, 6)

Module 7: Building Nested Components

  • Updated slide due to Bootstrap 4 style classes. (Clip 1)
  • Updated slide due to Bootstrap 4 style classes and font awesome icons. (Clip 2)
  • Updated demo due to new currency pipe syntax. (Clip 2)
  • Replaced demo due to font awesome icons. (Clip 2)
  • Replaced demo due to new currency pipe syntax and font awesome icons. (Clip 3, 4, 5)
  • Replaced demo due to Bootstrap 4 style classes. (Clip 3, 4, 5)
  • Added a “Learning More” slide. (Clip 6)

Module 8: Services and Dependency Injection

  • Removed the discussion of the Injectable decorator being optional since it is now often needed for the new ‘providedIn’ feature of v6. (Clip 3)
  • Replaced this entire clip to cover the injection hierarchy, the new ‘providedIn’ feature of v6, and when to use the root application injector vs a component injector. (Clip 4)
  • Updated the slide to remove the underscore (“_”) from the private variable name since that is no longer a common practice. (Clip 5)
  • Replaced demo due to removal of the underscore (“_”). (Clip 5)
  • Replaced demo due to Bootstrap 4 style classes. (Clip 5)
  • Updated the slide to cover the new ‘providedIn’ feature of v6 in the checklist. (Clip 6)

Module 9: Retrieving Data Using Http

  • Updated slide to remove reference to ES 2016. (Clip 2)
  • Rearranged the slides for a better flow. (Clip 2)
  • Added two slides on composing operators with the pipe method. (Clip 2)
  • Split clip 3 into two separate clips.
  • Updated the slides to remove the underscore (“_”), add ‘providedIn’, and update the RxJS operators to RxJS v6. (Clip 3, 5)
  • Replaced demo due to removal of the underscore (“_”), added ‘providedIn’, and the update of the RxJS operators to RxJS v6. (Clip 4, 5, 7)
  • Added instructions to the demo for setting the path to the data JSON file in the angular.json file. (Clip 4)
  • Added display of the console to show the syntax error resulting from our code changes. (Clip 4, 5)
  • Split clip 6 into two separate clips.
  • Added a demo slide. (Clip 7)
  • Updated the slide and replaced the discussion of observable subscription, removing the comparison to promises. (Clip 6)
  • Moved the Learning More slide to before the summary. (Clip 8)

Module 10: Navigation and Routing Basics

  • Replaced the demos for the current version of the Angular CLI and Bootstrap 4 style classes. (Clip 2)
  • Replaced the screen shots due to Bootstrap 4 style classes. (Clip 3, 6)
  • Split Clip 4 into two separate clips.
  • Added a demo slide. (Clip 5)
  • Replaced the demo due to removed providers array. (Clip 5)
  • Replaced the demo due to Bootstrap 4 style classes and removed providers array. (Clip 6, 7)
  • Enhanced the callouts to show the connection between the routerLink directive’s array elements and the route configuration. (Clip 6)
  • Enhanced the callouts to show the shortcut syntax for the routerLink directive. (Clip 7)

Module 11: Navigation and Routing Additional Techniques

  • Replaced the screen shots due to Bootstrap 4 style classes. (Clip 2, 4)
  • Split clip 2 into two separate clips.
  • Updated slide to remove underscores (“_”) in the variable names. (Clip 2, 4, 7)
  • Added a demo slide. (Clip 3, 6)
  • Replaced the demo due to removed providers array, changes to the currency pipe, removal of the underscores (“_”), and the Bootstrap 4 style classes. (Clip 3, 4)
  • Split clip 5 into two separate clips.
  • Updated the slide to display code consistent with what the CLI generates, including a revised file name. (Clip 5)
  • Replaced the demo using the current Angular CLI `generate guard` feature. (Clip 6)

Module 12: Angular Modules

  • Removed the services from the module diagrams and narration. (Clip 1, 8, 9, 12)
  • Replaced the demo due to removed providers array. (Clip 2)
  • Added information to the slide recommending using the `provideIn` instead of the providers array and removed the last “truth”. (Clip 7)
  • Added a demo slide. (Clip 9)
  • Removed extra narration discussing incorrect automatically generated import statements since they are now generated correctly. (Clip 9)
  • Replaced the demo due to improvements to the importing process, removed providers array, and Bootstrap 4 style classes. (Clip 9)
  • Replaced the demo due to the revised Angular CLI features. (Clip 10)
  • Replaced the demo to match the prior demos in this module. (Clip 11)

Module 13: Building, Testing, and Deploying with the CLI

  • Replaced the demo due to the modified output of the Angular CLI features. (Clip 2, 3, 4, 5, 6, 7)
  • Enhanced the size of the command prompt window to make it easier to see. (Clip 2)
  • Replaced the demo due to the changes to the file structures of the code generated by the current Angular CLI. (Clip 3)
  • Reordered the narration due to the change in order and layout of the files generated by the current Angular CLI. (Clip 3)
  • Removed narration references to “blueprints” since that term is no longer used with regard to Angular CLI schematics. (Clip 5, 8)

Module 14: Final Words

  • Resized image to full screen. (Clip 2)
  • Removed the services from the module diagrams and narration. (Clip 3)
  • Added more courses to the Learning More slide. (Clip 3)

Enjoy!

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