Time to start playing with Angular 2.0

Lastly i was involved in the development of a SPA1 website that 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 exiting 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 build 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 on 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 well2.

Side Note: As Java Developer i'm happy to see classes, Interfaces, Types and Decorators (akka Annotations)

TypeScript is superset of ES6 and ES6 is superset of ES5

Ok what about dart? Dart is nice, but new JavaScript features supersede it...
Therefor 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 to for Angular 2. I've started with it and do not regret so far.

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.

How to start

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

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

Working Example

In case you prefer 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 your'we welcome to extend and improve.

And what next

  • Extend
  • Add more example modules
  • Add tests
  • Add build configuration (bigger topic)
  • Your point here

  1. Single Page Application

  2. Regarding TypeScript IDE: I was impressed by Visual Studio Code under Linux, but also other prominent IDEs like Atom or WebStorm should have good Typescript support.