What's New in Angular 2

When I first read about the new Angular 2 syntax a year ago, I was a bit confused because things looked different than I was used to — but when I revisited Angular 2 a few months ago, it had evolved to the point where I was quickly impressed.

So today, in honor of our new Angular 2 course, Accelerating Through Angular 2, I’m going to share what excites me the most about this updated JavaScript framework.

Components Over Controllers

Many new frameworks take advantage of the ability to create custom HTML tags. However, in order to have a custom element like with a template in Angular 1, we often had to learn about controllers, restrict, controllerAs, and directives all at once. This was unfortunate, given how important custom directives are to the architecture of Angular apps. There was just a lot of ceremony (a lot of code) you needed to write and understand to get to the essence of what you were trying to do (which could be done in less code).

In Accelerating Through Angular 2, we start by teaching components instead of controllers. Learning a framework should start with one of the most important building blocks, which, in the case of Angular 2 apps, is components. It makes the framework easier to learn and use.

TypeScript

Just as the Ruby language made learning Ruby on Rails a pleasure to learn and write, I feel the same way about TypeScript and Angular 2. In case you’re not familiar, TypeScript is Microsoft’s extension of JavaScript that allows the use of all ES2015 features and adds powerful type checking and object-oriented features. Not all browsers are compatible with ES2015 yet, though, so we can’t use these features in our JavaScript code — but we can use a language (like TypeScript) that compiles into JavaScript code our browsers can all understand.

Using ES2015 features (like import, export, backtick, for…of loops, and fat arrow) and TypeScript features (like class decorators and type declarations) makes Angular 2 even more fun to program. (Tip: If you aren’t familiar with these ES2015 concepts, I highly recommend you check out our ES2015 course.)

Improved Data Binding

What made Ruby on Rails so cutting-edge were all the new conventions (or defaults) it shipped with. I love when a framework invents a new syntax for coding, and I see a similar method with property and event binding in Angular 2. In Angular 1, to bind an image we had to remember the right ng directive.

In Angular 2, all you have to remember is square brackets.

So whatever the DOM element property you need to bind to, you just wrap it in square brackets and you’re done — no curly braces and no need to look up the proper ng directive.

It’s also the same deal with event binding. In Angular 1, we wrote:

But now, instead of having to think about using a custom attribute, I just wrap the DOM event (minus the “on”) in parentheses:

I know both of these examples are a subtle difference, but each makes me feel like I can leverage my knowledge of HTML DOM events and DOM properties to write Angular 2 code, rather than having to consult with Angular documentation to find the right ng command.

In Conclusion

Whether you’re brand new to Angular or an Angular 1 veteran, we worked hard to make sure our new Angular 2 course is the best way to get you up and running with Angular 2. We hope you have as much fun playing it as we did making it!

Learn more Angular facts and tips here.