The Basicsは、 https://angular.io/ の一番最初に書かれているサンプルプログラムのことです。

アプリケーションを実行すると、ブラウザ上には1つのテキストフィールドが表示され、そこに文字を入力すると、「Hello (入力した値)!」という文字列を出力するものです。実際に下記URLで動作を確認できます。

Angular2のDocsで提供されている5 Min Quickstartの記載が理解できれば、The Basics自体はそんなに難しいアプリケーションではありません。

なお、上記ドキュメントを読むときに、以前書いた「5 Min Quickstartを読んだ時の備忘録」が、もしかしたらなんらかの理解の助けになるかもしれません。

HelloWorldコンポーネント

HelloWorldコンポーネントは、テンプレート(view)のhello_world.htmlと、それと結びくコンポーネントのhello_world.tsによって成り立ちます。

app/hello_world.html

<label>Name:</label>
<input type="text" [(ngModel)]="yourName" placeholder="Enter a name here">
<hr>
<h1 [hidden]="!yourName">Hello {{yourName}}!</h1>

app/hello_world.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'hello-world',
  templateUrl: 'app/hello_world.html'
})

export class HelloWorld {
  yourName: string = '';
}

上がテンプレート、下がコンポーネントです。テンプレートには[ngModel]="yourName"とか、[hidden]="!yourName"とか、Hello {{yourName}}とか書かれてあって、また、クラスにもyourName: stringと書かれてあり、どうやら「yourName」という変数がありそうだ、ということが分かるかもしれません。

しかし、yourNameに実際に値を入れるようなコードはコンポーネントには書かれていないようにも見えるのですが、このあたりがAngular1からの(そして最近のJS Library等に見られる)双方向バインディングの機能を使っているところで、テキストフィールドに入れた値がyourNameという変数に直接代入されて、それを別所から参照できる仕組みになっているわけです。

コンポーネントの@Component節を見れば、hello-worldの要素のところにコンポーネントを展開するんだなあ、とか、テンプレートのパスがapp/hello_world.htmlなんだなあということがわかります。

main.ts

次に、main.tsを作成します。

app/main.ts

import {bootstrap}  from 'angular2/platform/browser';
import {HelloWorld} from './hello_world';

bootstrap(HelloWorld);

5 Min Quickstartと同じですね。bootstrapとHelloWorldをインポートして、HelloWorldをbootstrap関数で実行しているだけです。

index.html

これも、5 Min Quickstartと同じです。main.tsをロードするために、いろんなJavaScriptLibrariesを読み込んで、body要素内にhello-world要素を含めればOKです。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills (from CDN), in this exact order -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.26/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <hello-world>Loading...</hello-world>
  </body>
</html>

5 Min Quickstartと違うところ

コンポーネントに

export class HelloWorld {
  yourName: string = '';
}

と書いてあるのが、5 Min Quickstartと違うところで、これがないとアプリケーション実行時に怒られます。先ほど書いたとおり、yourNameがこのクラスのメンバ変数だよ、っていうことを示しているのですね。

でも、この記載によって、コンポーネントはどの変数を保持し、それがどの型なのかというのが明確になるので、勝手に変な変数が作られてしまう、という事故が起きなくなります。これはAngularの機能ではなくTypeScriptの機能なのですが、こういうところにTypeScriptを使う利益があるのだと考えられます。

Angular2のThe Basicsについて

HelloWorldコンポーネント

main.ts

index.html

5 Min Quickstartと違うところ