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.
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.
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.
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.