Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

October 18, 2016

Angular 2: Getting Started Course Update

This post identifies the changes to the “Angular 2: Getting Started” Pluralsight course from its first release on April 1st, 2016 to its update October 18th, 2016.

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. The changes made to each module of the course are outlined below.

If you have already watched the course and want to minimize which modules to re-watch, I’d suggest modules 2, 10, 11, and 12. That would provide the basics on Angular modules (NgModule) and the new router.

Module 1: Introduction

  • Introduced Angular modules.
  • Updated Course Outline.

Module 2: First Things First

  • Demoed how to get a more current version of npm.
  • Revised setup steps including the application’s root Angular module.
  • Updated discussion of AngularCli.
  • Updated demos for setting up Angular 2.
  • Enhanced discussion in “About Modules” regarding the difference between ES modules and Angular modules.

Module 3: Introduction to Components

  • Updated demos for new import statements (import from @angular/… instead of angular2/…)
  • A first cut of the app.component.ts is now included as part of the starter files. This changes some of the initial steps when building the app.component.ts file.
  • Added a callout to point out the use of the back tick (not quotes) for defining the inline template.
  • Bootstrapping process now includes the application’s root Angular module.
  • Additional checklist for resolving issues when coding along.

Module 4: Templates, Interpolation, and Directives

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added steps to update the application’s root Angular module (AppModule).
  • Added information on how an Angular module defines the boundary or context within which the component resolves its directives and dependencies.
  • Added a demonstration of a common Angular error and how to fix it.
  • Updated the ngFor syntax to match the released syntax using the let keyword instead of #.

Module 5: Data Binding & Pipes

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added information on adding FormsModule to an Angular module so the template can use ngModel for two-way binding.

Module 6: More on Components

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Updated the code for the pipe transform to match the new transform signature.
  • Added a step to add the custom pipe to an Angular module.
  • Added a clip on using component-relative paths by setting module Ids.

Module 7: Building Nested Components

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added a step to add the nested component to an Angular module.

Module 8: Services and Dependency Injection

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Mentioned how service can be registered in an Angular module.

Module 9: Retrieving Data Using Http

  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Enhanced discussion of Observables.
  • Enhanced the comparison between Promises and Observables.
  • Removed the setup clip since these setup steps are no longer valid.
  • Added a step to add Http to an Angular module.
  • Separated out the exception handling to its own clip.

Module 10: Navigation and Routing Basics

  • Divided this course module into two modules: 10 and 11.
  • Major modifications throughout to change to the current router.
  • Expanded on the details for how routing works.
  • Enhanced the discussion of Html 5 vs hash style routes.
  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added steps to add the remaining components to an Angular module.

Module 11: Navigation and Routing Additional Techniques

  • This new module is the second half of the prior module.
  • Major modifications throughout to change to the current router.
  • Updated demos for new import statements (import from @angular/… instead of angular2/…).
  • Added a clip on route guards.

Module 12: Angular Modules

  • This new module is all about Angular modules. It covers:
    • The definition and purpose of an Angular module.
    • Understanding the Angular module metadata and its many rules.
    • Refactoring the sample application and creating a feature module.
    • Minimizing repetition by creating a shared module.
    • Reexamining the root application module (AppModule).
    • A look at building separate routing modules.
    • And summarizing options for your Angular module architecture.

Module 13: Angular 2 Setup Revisited

  • Updated the demos to the Angular 2 release setup files.
  • Added discussion of the systemjs.config.js file.
  • Added discussion of the bootstrapping process differences for the Just in Time (JiT) compiler vs the Ahead of Time (AoT) compiler.
  • Added discussion of the Angular CLI.

Module 14: Final Words

  • Minor wording changes.

Enjoy!

45 Comments

  1.   Alex — October 18, 2016 @ 8:52 pm    Reply

    Awesome!!

    •   deborahk — November 3, 2016 @ 3:21 pm    Reply

      Thanks!

  2.   Rich Brown — October 22, 2016 @ 4:59 am    Reply

    The best Angular 2 course currently available. Thank you very much.

    •   deborahk — November 3, 2016 @ 3:21 pm    Reply

      Thank you!

  3.   ioana — October 28, 2016 @ 12:51 pm    Reply

    any idea why i still see the old videos? i logged out and in again, cleared cache…

  4.   Doug — October 30, 2016 @ 3:39 pm    Reply

    Hi Deborah,

    Thank you for updating the course. You did a superb job. Your illustrated diagrams are the best. I have review many Angular 2 video courses on both plural sight and Safari Books Online. I think your is the best Angular 2 Intro course. Very Clear and Complete. 5+ stars out of 5.

    Thx
    Doug

    •   deborahk — November 3, 2016 @ 3:23 pm    Reply

      Thank you so much!

  5.   abbid siddiqui — November 1, 2016 @ 5:55 am    Reply

    Hi Deborah

    Probably you are the best person to help me on this query.

    I have setup a project using VS2015 (MVC and codefirst) and my plan is to do the front-end in angular2 for my learning purposes. The only hindrance to this is that I am still unable to setup angular in my VS2015 project. You have set it up with VSCode and npm setup which probably won’t help me out.

    Can you please refer me some link to set up angular 2 on Visual Studio 2015, I saw some online templates but they are also not complete. I’ll be very very thankful to you for that.

    Regards

    Abbid

  6.   amol — November 4, 2016 @ 5:17 am    Reply

    Hi,
    How to bind data from html when clicked onto particular icon.

    •   deborahk — November 17, 2016 @ 7:22 pm    Reply

      Can you expand on your question? I’m not sure I understand.

  7.   Daniel Luke — November 4, 2016 @ 4:27 pm    Reply

    Hi Deborah,

    I have watched hundreds of online videos across many different online learning platforms (almost all of them, actually). The way you organize, and present your material is without peer. The care and planning you have put into your work really shines through. The only thing wrong with your courses is that there aren’t enough of them.

    I do want to offer a criticism, not of your work, but of the online learning environment in general. I have found that there is a tremendous redundancy at the lower levels of a particular topic (especially if it is one that is popular). I simply don’t see excellent courses across a continuum of learning from beginner to master. Now there are pathways, but they are invariably cobbled together in an ad hoc fashion in most instances. (There are, thankfully, a few exceptions to this, most notably CodeSchool’s Javascript Roadtrip which, in my opinion sets a standard for the entire industry).

    One of my major critiques of Pluralsight is that there is never any collaboration between instructors. Everyone begins from scratch with the same dopey example application, and that is never enough to satisfy the learner who is seeking to gain more advanced skills in order to gain employment. One solution to this problem might be for course creators to license their content so others can build upon introductory or “getting started” lessons. This would benefit everyone, I should think: the new course creator would already have a foundation from which to start. And the learner would benefit more greatly by being able to build upon knowledge already acquired. Unfortunately, no one in the industry does this.

    Your Angular 2 course would be perfect jumping off point for someone to build a course on Express, Node, Firebase, and I’m sure a great deal more.

    •   deborahk — November 17, 2016 @ 7:34 pm    Reply

      Thank you so much for the kind words about my course and your thoughtful suggestions. It would be great if this information was provided to Pluralsight so your suggestions could be considered. Could you repeat your suggestions in an email to support@Pluralsight.com?

      Thanks!

  8.   Arash — November 8, 2016 @ 5:04 am    Reply

    Hello Deborah!

    I had some questions about using Angular 2 in an non-spa application; more specifically a .Net MVC project.
    The questions I have, are expressed cleary in the one of Shawn Wildermuths blog posts: https://wildermuth.com/2016/07/31/Is-Angular2-Too-Full-of-Ceremony
    How can I benefit from NgModule when it come to building a non-spa application with Angular 2?
    How would I be able to use shared services in this scenario, without having to write looots of angular 2 code. Are there any examples/ways to achieve this?

    Thank you for your help, and keep up the good work!

  9.   deborahk — November 17, 2016 @ 8:19 pm    Reply

    First, Shawn’s post was written *before* Angular 2 was done in September. So some of his issues are due to the incomplete nature of the framework at that point.

    Second, I’m not sure Angular makes much sense in cases where there is *no* spa. I read Shawn’s post to say he didn’t like large monolithic spas, but preferred what is often called a set of mini spas.

    Hope this helps.

Trackbacks/Pingbacks

  1. Angular 2: Getting Started Course Update -Deborah’s Developer MindScape | Webammer

RSS feed for comments on this post. TrackBack URI

Leave a comment

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