TypeScript+AngularでHelloWorldを表示する。 - プログラマーの調べ物

index.htmlはこんな感じ。

<!DOCTYPE html>
<html>

<head>
    <!-- The typescript compiler trancepiles source code into JavaScript right in the browser. -->
    <script src="//unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.21"></script>
    <script src="https://unpkg.com/typescript@2.0.0"></script>
    <script src="https://unpkg.com/systemjs@0.19.37/dist/system.src.js"></script>
    <script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: {
                emitDecoratorMetadata: true
            },
            map: {
                'rxjs': 'https://unpkg.com/rxjs@5.0.0-beta.12',
                '@angular/core': 'https://unpkg.com/@angular/core@2.0.0',
                '@angular/common': 'https://unpkg.com/@angular/common@2.0.0',
                '@angular/compiler': 'https://unpkg.com/@angular/compiler@2.0.0',
                '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@2.0.0',
                '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@2.0.0'
            },
            packages: {
                '@angular/core': {
                    main: 'index.js'
                },
                '@angular/common': {
                    main: 'index.js'
                },
                '@angular/compiler': {
                    main: 'index.js'
                },
                '@angular/platform-browser': {
                    main: 'index.js'
                },
                '@angular/platform-browser-dynamic': {
                    main: 'index.js'
                }
            }
        });
        System.import('main.ts');
    </script>
</head>

<body>
    <!-- When the application launched, the <hello-world> tag will be replaced with the 
         content of the template from the @Component annotation. -->
    <hello-world></hello-world>
</body>

</html>

以下の部分では、TypsScriptのソースコードをJavaScriptに変換しています。

<script src="//unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.21"></script>
<script src="https://unpkg.com/typescript@2.0.0"></script>

SystemJSは動的にアプリケーションコードを読み込むライブラリです。

System.import('main.ts');

ここではSystemJSにmainモジュールを読み込むように指定しています。

main.tsは以下のとおりです。

import {Component} from '@angular/core';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// Component
@Component({
  selector: 'hello-world',
  //templateでは、コンポーネントでレンダリングするHTMLを指定します
  template: '<h1>Hello {{ name }}!</h1>'
})
class HelloWorldComponent {
  //テンプレートとのデータバインディングに使用します
  name: string;

  constructor() {
    this.name = 'Angular';
  }
}

// Module
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ HelloWorldComponent ],
  bootstrap:    [ HelloWorldComponent ]
})
export class AppModule { }

// App bootstrap
platformBrowserDynamic().bootstrapModule(AppModule);

@Componentのselectorでは、hello-worldタグを見つけて、templateを組み込むようにしています。

これで、

npm install http-server -g でhttp-serverをインストールし、

http-serverというコマンドを実行します。

すると、localhost:8080で

Hello Angular!

が表示されます。