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.