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

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