Angular 2 Crash Course

A collection of free & paid Angular 2 resources

PSA: Skip to the TL;DR for list of resources

So, due to forces of nature beyond our control (specifically Hurricane Matthew),

the Angular 2 Workshop we were registered for this Thursday & Friday, October 6th & 7th with both John Papa and Dan Wahlin was cancelled. Thankfully for us South Floridians, Hurricane Matthew narrowly avoided a direct hit with us southernmost residents and the tri-county area of Dade, Broward & Palm Beach was mostly unaffected.

That said, we were incredibly lucky, and many residents in the central and northern regions of our state are not nearly as lucky. Areas near and around Daytona Beach, FL I believe suffered the brunt of it and our best wishes are with the most affected communities.

That’s not even saying anything in regards to the rest of the Carribean like Cuba, Haiti & Jamaica who suffered through the grand majority of Matthew’s wrath and will be in recovery mode for quite a while. I wish I knew a good charity, because this is where I would link and recommend some. If someone cares to enlighten me, I will update this post.

Workshop Or Not:

Our biggest issue and concern with missing out on this conference is really that we were 100% planning on using Angular 2 as the front end framework for our Project Armadillo. I also even have a couple of small WebAPI apps fleshed out with no front end in anticipation, awaiting our 2nd such workshop with John & Dan (we saw them during Fall 2015 DevIntersection) before getting started and really digging into the framework.

The aforementioned cancellation due to Hurricane Matthew has now put us at quite a crossroads with a bit of a decision to make. To a certain degree, absolutely nothing has changed and we could still use Angular 2. An alternative (which appeals less to me, but more to my coding partner) is to simply use the ASP.NET Core Razor View Engine and avoid messing with more new frameworks, technologies as well as moving parts.

We were extremely excited (especially with Angular 2 Final’s recent release) to get Dan & John’s crash course, and more importantly, have access to these two of the community’s foremost experts on our entire technology stack. This made us confident that even with my partner’s minimal Angular exposure we would be able to quickly get it together.

Now this all isn’t going to happen, and it does no one any good to cry over spilled milk…So the crash course is up to us. What follows is my “Getting Started w/ Angular 2 Crash Course”, or my compilation of resources, walkthroughs, blog posts & some paid content like Pluralsight Videos, Code School and anything else I could find to help get started with Angular 2’s Final release.

TL;DR

Getting Started w/ Angular 2 Crash Course

Ultimate compilation

The Basics/Getting Started

  • As web developers, we will assume some familiarity with JavaScript
  • Angular 2 has gone the way of many frameworks and chosen to leverage TypeScript, encouraging you to use it to build your ng2 apps.
  • First order of business is familiarizing yourself with TypeScript, which I will not detail too much here, but the main documentation @ http://www.typescriptlang.org/docs/tutorial.html is very good and thorough
  • Get your feet wet and use the TypeScript Playground to see how some TypeScript will transpile down into ES5 JavaScript.
  • If you know some TypeScript and are familiar with web constructs, start below

Introducing Angular 2

  • Again here we’ll start at the Official Angular 2 Site
  • The link above is to the Angular 2 quickstart
    • This guide takes you through Creating your project, your first component, bootstrapping your application, installing all your dependencies and getting up and running
  • This is an awesome start, but for a deeper understanding of the concepts and the framework as a whole, check these out:

Pluralsight

Code School

Egghead.io

Blogs/Resources

Putting it all together

Phew, That was longer than expected.

Nonetheless, I feel like you can never have too many good examples or posts showing different styles of implementations of Angular 2. For our part, we will likely read Victor Savkin’s listed post above and then cherry-pick some of the resources in the “resource list”-style blog posts to round out our knowledge.

From there, we move into the “Putting it All Together” section and go through some of the code samples and best practices. If you’ve taken the time to understand all the Angular 2 concepts thus far you will be well on your way. Part of putting it all together also means starting to put together your own modules/components and just jumping in to get your feet wet.

I am a strong proponent of clean coding and best practices, but I have also found that the greatest value and the most deeply ingrained learning takes place when you are implementing your own solutions.

Immediately after getting what I think I need from the Putting it All Together section–next step is we plan to use Angular 2 to build a simple front end dashboard for an ASP.NET Core API project running with the NancyFx framework. Using RxJS & Observables + Http in Angular 2 (as per some of the resources above) I’m hoping to provide a rich SPA showing some key performance indicators in real time, polling data from 2 disparate web-based systems.

Looking for something specific? Search.

comments powered by Disqus