Things to notice

Line 5 : We load up the es6-shim.js from the dist folder to work with ES6 in current browsers.

Line 10 : We created a new component named my-app. We will talk about components soon.

Line 13 : ES6 comes with Modules and Module Loaders. This makes on demand importing very easy. If you have used Requirejs or the Commonjs module system while working with Nodejs, this will look very familiar.

Line 14 : We refer Angular 2.0

Line 15 : We refer Runtime assertions library

Line 16 : We load a file named app.es6 that we will be creating next. This file will consist the definition for <myapp></myapp>.

Line 20 : We kick off the app.

Next, create a new file named app.es6. The es6 extension indicates that you are loading a file with EcmaScript 6 syntax. (This is more for your text editor to show syntax highlighting. You can js extension as well if you feel that too much is changing).

import {Component, Template, bootstrap} from ‘angular2/angular2’;

// Annotation section
@Component({
  selector: 'my-app'
})
@Template({
  inline: '<h1>Hello {{ name }}</h1>'
})

// Component controller
class MyAppComponent {
  constructor() {
    this.name = 'World!';
  }
}

bootstrap(MyAppComponent);


Getting back, As per the docs, Angular 2 works with a concept of components. And a component consist of 2 parts

  1. The Annotation Section – This consist of the meta data (component selector, template) for that component
  2. The Component Controller Section – This is a ES6 Class, from which the template would be reading the properties that are interpolated ({{…}}) inside it .

So, (referring to app.es6)

Line 5 : Identify the selector on page that would be the base for our component

Line 8 : The template to be injected. Notice {{ name }}

Line 14 : Declare the values to be used in the template. In our case it is World!

And finally on line 19, we bootstrap the component. As per my understanding, this is similar to exporting the main object from this file (analogous to module.exports) but instantiating it before exporting.

That is all we need to build a Hello World app using Angular 2.0.

Launch and test the App

You can use any static server to launch the app. If you have python already installed, you can run

Windows *nix
python m http.server python m SimpleHTTPServer

from inside the hello2ng2 folder or you can use a node module named http-server to do the same. You can install the same using the below command

npm install httpserver g

And then you can launch the static server by running

httpserver

from inside the hello2ng2 folder. And then navigate to http://localhost:8080/app/ you should see

Screen Shot 2015-03-23 at 11.37.56

Where to now?

I’ve scarcely touched the most superficial layer of Angular 2 yet you ought to have a thought of what it’s similar to create in it at this point and how it varies from Angular 1. I feel like numerous aides don’t stress the “application advancement” viewpoint enough or they do excessively.

There are quite a lot of things going on with Angular 2.0 and I think it would take another 3 – 4 months to get a fair idea on where Angular 2.0 is headed to.

You can track the progress here and Angular 2.0 milestones here.

You can also checkout the resources page, which has a few but helpful links on Angular 2.0.