Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

Archive for Angular CLI

July 11, 2018

Angular: Getting Started Course Update (for v6)

Filed under: Angular,Angular CLI @ 5:19 pm

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!

August 10, 2017

Angular: Getting Started Course Update (for v4.3)

Filed under: Angular,Angular CLI @ 1:59 pm
Tags: ,

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 4.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 4.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.

If you have already watched the course and want to minimize which modules to re-watch, I’d suggest modules 2, 6, 9 and 13. That would provide a look at the key changes.

The changes to this course include:

Module 1: Introduction

  • Changed all references from “Angular 2” to just “Angular”
  • Changed the course introduction to include the new CLI module (module 13)

Module 2: First Things First

  • Changed all references from “Angular 2” to just “Angular”
  • Updated the screen shot for the latest npm version
  • Updated the discussion of the Angular CLI
  • Updated the discussion of the sample starter files
  • Updated the discussion of the folder structure to match that generated by the Angular CLI
  • Added information on the package.json file and how it works
  • Updated the demo of the installation process
  • Updated the demo of running the application
  • Removed the clip that covered module loading with SystemJS
  • Split one of the clips into two to keep the same number of clips (required by the Pluralsight patching process).

Module 3: Introduction to Components

  • Changed all references from “Angular 2” to just “Angular”
  • Changed the selector in all examples to match that generated by the CLI
  • Updated the demos to reflect the new folder structure and CLI generated code
  • Changed the discussion of the bootstrap process to focus on hosting the app and creating the root App module
  • Added more information on using the developer tools and debugging using the source maps

Module 4: Templates, Interpolation, and Directives

  • Changed all references from “Angular 2” to just “Angular”
  • Changed the selector in all examples to match that generated by the CLI
  • Changed all templateUrl paths to relative paths
  • Removed the “Loading App” message from the demos since the CLI does not generate it
  • Updated all demos that include display of the application folder structure
  • Added a demo of the quick fix feature of VS Code to automatically add import statements

Module 5: Data Binding & Pipes

  • Changed all references from “Angular 2” to just “Angular”
  • Changed all templateUrl paths to relative paths
  • Updated the demos to reflect the new folder structure

Module 6: More on Components

  • Changed all references from “Angular 2” to just “Angular” 
  • Changed all templateUrl paths to relative paths
  • Updated the demos to reflect the new folder structure
  • Removed the demo of hiding the .js and .map files since they are no longer generated in the same folder as the .ts files
  • Replaced the custom pipe example with a new example that better fits with best practices
  • Removed the clip on relative paths and module Id. When using Webpack, relative paths are available without the need to add a module Id
  • Added a clip on how to filter the products using code in the class. This clip introduces property getters and setters

Module 7: Building Nested Components

  • Changed all references from “Angular 2” to just “Angular”
  • Changed all templateUrl paths to relative paths
  • Updated the demos to reflect the new folder structure
  • Changed the selector for the star component from ‘ai-star’ to ‘pm-star’ to ensure the app will pass linting rules.
  • Changed the order of the steps in the demo of the @Output decorator to improve the flow of the demo.

Module 8: Services and Dependency Injection

  • Changed all references from “Angular 2” to just “Angular”
  • Changed all templateUrl paths to relative paths
  • Updated the demos to reflect the new folder structure

Module 9: Retrieving Data Using Http

  • Changed all references from “Angular 2” to just “Angular”
  • Updated the demos to reflect the new folder structure
  • Updated the demo to illustrate the asynchronous nature of the data retrieval
  • Updated Http to HttpClient and HttpModule to HttpClientModule as per Angular 4.3

Module 10: Navigation and Routing Basics

  • Changed all references from “Angular 2” to just “Angular”
  • Added a new Clip 2 in between the existing clips 1 and 2 that uses the CLI to create the Product Detail component, discusses how to handle undefined values, and adds the Welcome component (These new components are required to demonstrate routing)
  • Changed the "product/:id" route to "products/:id" to better match with best practices
  • Updated all slides and demos that include display of the application folder structure, show relative paths, show changed selectors, reflect prior code changes, or could use the VS Code quick fix

Module 11: Navigation and Routing Additional Techniques

  • Changed all references from “Angular 2” to just “Angular”
  • Changed the "product/:id" route to "products/:id" to better match with best practices
  • Updated all slides and demos that include display of the application folder structure, show relative paths, show changed selectors, reflect prior code changes, or could use the VS Code quick fix
  • Modified the demo to use the CLI to create the guard service
  • Added a slide with a reference to the "Angular Routing" course

Module 12: Angular Modules

  • Changed all references from “Angular 2” to just “Angular”
  • Updated all slides and demos that include display of the application folder structure, show relative paths, show changed selectors, reflect prior code changes, or could use the VS Code quick fix
  • Changed the creation of the feature and shared modules to use the Angular CLI
  • Enhanced the discussion of ordering modules in the imports array and its effects on route configuration

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

  • New module completely replacing the original module and now covers the Angular CLI
  • (Was “Angular 2 Setup Revisited”, which went through the SystemJS files)

Module 14: Final Words

  • Changed all references from “Angular 2” to just “Angular”
  • Updated all slides that include display of the application folder structure, show relative paths, show changed selectors, reflect prior code changes, or could use the VS Code quick fix
  • Added a slide on the CLI in the summary
  • “Learning More” now includes more Angular courses from the Pluralsight library

Plus I brought in a professional to clean up the audio for the entire course!

    Enjoy!

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