Time to start playing with Angular 2.0

Lastly, I found myself involved in the development of a Single Page Application based on Angular 1.3. So I became more interested in modern Frontend development. Since AngularJS 2 became beta some weeks ago I think it is the best time to start getting familiar with that exciting technology.

Angular 2 is the next version of Google’s massively popular MV* framework for building complex applications in the browser (and beyond).

Typescript, Dart or ES6

You may have heard that Angular 2 apps can be built with ES6, Dart, or TypeScript. All three languages are not fully supported in browsers now, but ES6 will be probably in few years. Let’s look at ES6 first.

ES6 offers classes, standardized module definition, arrow expressions(lambdas). It is next version of modern JavaScript.

But TypeScript has even more, beyond ES6 improvements: types, type-casting, interfaces, generics, and annotations. The TypeScript code analyzer helps to see syntax errors even before you run the program, code refactoring works as well.

Being socialized in Java I’m happy to see classes, Interfaces, Types, and Decorators (Annotations in Java) also in TypeScript :) TypeScript is a superset of ES6 and ES6 is a superset of ES5

Of course there is no free lunch with all of these languages and they have to be translated/transpiled to ES5 when running in a browser. ES6 is usually transpiled via Babel or Google’s Traceur. TypeScript comes with the Built-in JS Compiler.

And if you not sure which IDE to use for Frontend Development and TypeScript, I was impressed by Visual Studio Code under Linux, but also other prominent have good Typescript support.

Dart

Ok, what about Dart lang? Dart is nice, but new JavaScript features supersede it. Therefore don’t know why using it if you don’t work for google? So when no other preferences exist, it looks like TypeScript is predestined for Angular 2. I’ve started with it and do not regret it so far.

How to start

To get the first impression of Angular 2.0 go through the official 5 Min Quickstart. Going through it will give you the first idea of Angular 2.

After that continue with Typescript and “Tour of Heroes” tutorial. However, you might get bored going from one to another documentation examples, and if you are an experienced developer you maybe prefer to learn new stuff by getting hands-on the code…

Working Example

In case you prefer to go straits to the code I have prepared commented code of the Heroes Tutorial. Using that you can save some time by navigating through the code.

Also, I’ve included additional modules that are covered by documentation to give one example of Directives. But of course, you’re welcome to extend and improve.