ben tedder : code things

Getting started with Angular (2+)

Let's dive right in. Angular 1.5 is great, Angular 2/4/whatever (referred from here on out as Angular) is generally better. But it's not simple to transition between the two. I'll try to break down how I've gone about learning the new stuff.

The biggest challenge I've found with Angular is figuring out what you're learning/stuck on at any point in time. Angular comes with a lot of new concepts and tooling (not exhaustive, nor in any particular order):

  1. New angular syntax
  2. Typescript
  3. Heavy dependence on RxJS
  4. Angular CLI
  5. Routing

I'm going to cover each one of these, and maybe what I've learned. As usual, this is mostly for my benefit, if it helps you, great!

1. New Angular Syntax

The new syntax (specifically html syntax) of Angular tripped me up a little at first, but now it's pretty second nature, and I would argue makes a lot more sense than the versions 1.5 and before

a. There's no longer a need to reference vm or $ctrl or any other kind of scope reference in the view. This is great.

b. [my-attr]="users" makes figuring out that an attribute is being purposefully targeted with a value much easier when scrolling through your views.

c. [(ng-model)]="user" is the weirdest new syntax, but kind of takes care of itself when you realize your model isn't binding to the UI. :)

d. (click)="doThis($event)". I really like this, as you can use parentheses to target any action, or register new actions on a DOM element.

2. Typescript

It's taking me a while to get used to Typescript, but I'm getting there. I didn't start off as a developer working in strongly typed languages, so some of my personal learning curve may come from just understanding the value that is provided by having strongly typed code. Initially it really slowed me down. I'm about halfway between it slowing me down and helping me out. I still find myself in cycles of types not matching, which frustrates me, but I can visualize the day when having this actually speeds up development by making you more confident and pre-think what your code is going to do.

3. RxJS

RxJS so far has proved to be interesting. I would highly recommend the Egghead.io tutorials on RxJS (actually on any technology). It's a new way of thinking about how your code flows through your app, but it's actually not that complex if you break out how it's actually written. It's baked heavily into concepts like the new Http client in Angular, so it's worth learning.

4. Angular CLI

Every tutorial on the web points at using the CLI, which is great. And it does a lot for you. But I've already hit issues though when it comes to "renaming" my app, and then expecting my generator to keep up. It doesn't quite keep up, and it lovingly abstracts so much of the bundling goodness that I feel kind of guilty using it. Setting up webpack was kind of a chore for Angular 1.5, but it was doable. I still haven't sat down and looked through the source of the CLI to see what it's doing, but with all that's left to learn in Angular I'm kind of OK having the CLI tool take care of it for me now. Maybe I'll dig in later.

5. Routing

In Angular 1.5 and before I always used UI Router (as most people did). Now with routing baked in, it's pretty nice to have it all together. Guards, activated routes, lazy loading modules, it's all pretty cool.

This was kind of a lame post I realize, but just documenting my process because a) I haven't blogged in FOREVER, and b) I want to see how far I've come in a few weeks/months in my understanding of and love/hate of new Angular.