Playing with Angular 2 and TypeScript

Now, let’s play around with the files we already have! Navigate to the app/dunebook2/ts/hello-world directory or create new one if you haven't yet. Then, open app.ts and replace its content with the following snippet:

// dunebook2/ts/hello-world/app.ts

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector: 'app',
  templateUrl: './app.html'
})
class App {
  target: string;
  constructor() {
    this.target = 'world';
  }
}

bootstrap(App);

Let’s take a look at the code line by line:

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

Initially, we import the @Component decorator from the angular2/core module and the bootstrap function from angular2/platform/browser. Later, we use @Component to decorate the App class. To the @Component decorator, we pass almost the same object literal that we used in the ECMAScript 5 version of the application, and this way, we define the CSS selector for the component.

As a next step, we define the view of the component. However, note that in this case, we use templateUrl instead of simply inlining the component’s template.

Open app.html and replace the file’s content with <h1>Hello {{target}}!</h1>. The content of app.html should be the same as the inlined template we used previously. Since we can use a template by both inlining it (with template) and setting its URL (templateUrl), the component’s API is quite similar to the AngularJS 1.x directives API.

In the last line of the snippet, we bootstrap the application by providing the root component.