https://angular.io/docs/ts/latest/quickstart.html のドキュメントを、自分の必要なところだけ、気分で読んだときのメモです。まったく正確ではありませんのでご承知おきを…。

Learn

次のステップでアプリケーションが作れるっぽい。

開発環境を整える
AngularのRoot componentを作成する
Root componentを表示するためにmain.tsを作成する
ホストとなるWeb page(index.html)を作成する

Development environment

開発環境を整えるためには、次のステップが必要。

nodeとnpmをインストールする
TypeScriptコンパイラのために、tsconfig.jsonを追加する
不足しているTypeScriptの定義ファイルを同定するためにtypings.jsonを追加する
package.jsonを追加する
npmパッケージとtypingsファイルをインストールする

nodeとnpmのインストール

https://nodejs.org/en/download/ ここからnode.jsをダウンロードしてインストール。

あと、プロジェクトフォルダも作っておく。

mkdir angular2-quickstart
cd    angular2-quickstart

tsconfig.json、typings.json、package.jsonの追加

プロジェクトフォルダにtsconfig.jsonファイルを作成して、コピペ。これはTypeScriptコンパイラに対する、コンパイルの手順を示す。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

同様に、typings.jsonを追加する。

typings.json


{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#5c182b9af717f73146399c2485f70f1e2ac0ff2b"
  }
}

多くのJavaScriptライブラリは、TypeScriptコンパイラが認識できない拡張をしている。そのような拡張をTypeScriptコンパイラに認識させるためのファイル、つまり、d.tsファイルを用意する必要があり、そのためにtypings.jsonを作成する。

また、package.jsonを追加する。

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.15",
    "systemjs": "0.19.26",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.10"
  },
    "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.7.12"
  }
}

scriptsセクションに、とても役立つコマンドを書いておいた。たとえば、npm run tscを実行するとTypeScriptのコンパイルが1回実行され、npm run tsc:wを実行すると、ファイルを監視し、ファイルの更新を待ったうえでTypeScriptのコンパイルが実行される。

あとは、npm installを実行するだけ。

Our First Angular Component

とりあえず、超シンプルなアプリケーションを作ってみる。ルートディレクトリから離れて、appサブフォルダを作成し、それをカレントディレクトリにする。

mkdir app
cd app

次に、コンポーネントファイルを追加する。

app/app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

AppComponentはアプリケーションのルートである

どのAngularアプリケーションでも、最低1つのルートコンポーネントを持つ。経験上、その名前をAppComponentとすると良い。

コンポーネントは基本的なAngularアプリケーションのブロックである。また、コンポーネントは、画面の一要素であるビュー(テンプレートと関連している)を、コントロールする。

Quickstartでは、たった1つのコンポーネントのみ有する。しかし、そのコンポーネントは、他のどのコンポーネントでも必要不可欠な要素を持つ。

1または2以上のimport文
@Component宣言。これはAngularにどのテンプレートを使うか、またどのようにコンポーネントを生成するかを伝えるものである
Comonent class。これはテンプレートのふるまいを規定する。

Import

Angularアプリケーションは、目的に応じたいくつものモジュールによって成り立つ。Angularそれ自身もモジュールであり、我々のアプリケーション制作に用いるライブラリの集合体である。

もし、なんらかのモジュールが必要になった時は、そのモジュールをインポートすれば良い。ということで、我々はコンポーネントを作成したいので、コンポーネントのライブラリモジュールをを読み込むことにする。

app/app.components.ts

import {Component} from 'angular2/core';

@Component宣言

Componentはデコレータ(デコレータ関数)であって、メタデータを指定することができる。このメタデータは、Angularに対し、そのコンポーネントをどのように生成し、どのように使うのかを教えるものである。

我々は、@記号をつけた関数を実行することで、コンポーネントに対して、メタデータを含めた関数を適用することができる。

app/app.component.ts(metadata)

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

ここで、selectorはコンポーネントの表現の代理とするHTMLの要素を指定するもので、templateはコンポーネントと結びつくテンプレートを示す。

Component class

Quickstartでは、特に何かするわけでもないので、とりあえずは何もしないAppComponentという名前のクラスとして規定する。

app/app.component.ts(class)

export class AppComponent { }

Show it with main.ts

Angularにロードすべきルートコンポーネントを教えるものである。

app/main.ts

app/main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

アプリケーションを起動するためには、2つのものをインポートしなければならない。bootstrap関数と、ルートコンポーネントであるAppComponentである。

なお、bootstrapがangular2/platform/browserからインポートするもので、angular2/coreからではないかといえば、bootstrapはアプリケーションを起動する1つの方法でしかなく、Angular2の核となる機能ではないからである。

Add the index.html

プロジェクトのルートフォルダ(appフォルダ)に、index.htmlを作成する。index.htmlには、注目すべき3つの区分がある。

JavaScriptライブラリ
SystemJSの設定
bodyタグ内のmy-appタグ

JavaScript

まず、IEでES2015のライブラリを実行するためのpolyfillsをインポートする(polyfillsは、レガシーブラウザでモダンブラウザの機能を提供するもの)。次に、Angular2のpolyfillsをインポートして、SystemJS、RxJSライブラリをインポートする。

RxJSはQuickstartでは使わないが、大抵のアプリケーションでは使われるので、とりあえず追加しておく。

そして、最後にAngular2をインポートする。

SystemJS

Quickstartでは、アプリケーションやライブラリモジュールのロードにSystemJSを用いる(SystemJSがローダのベストチョイスとなるだろう)。

index.html(SystemConfiguration)

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

このうち、packagesノードには、appフォルダから何らかのモジュールをリクエストしたときに、何をすべきかをSystemJSに伝えるものである。

System.importのコールで、SystemJSにmain.jsファイルをインポートすることを伝える。

Angularがmain.tsのbootstrap関数を呼び出したら、AppComponentのメタデータからmy-app要素を探し、そこにコンポーネントをロードする。

Add some style

styles.cssにスタイルを書くと良いだろう。

Compile and run!

TypeScriptファイルをコンパイルし、index.htmlをロードするためのサーバを実行するために、ターミナルから次のコマンドを実行する。

npm start

少し待てば、ブラウザが起動し、「My First Angular 2 App」と表示されるだろう。

Final structure

最終的には、プロジェクトフォルダは次のようになっているだろう。

angular2-quickstart
   [app]
      app.component.ts
      main.ts
   [node_modules]
   [typings]
   index.html
   package.json
   styles.css
   tsconfig.json
   typings.json

まとめ

最初のアプリケーションは単なる「Hello, world」のAngular2版である。次のステップに進むために、Tour of Heroesアプリケーションのチュートリアルに進んでみよう。

とは思うのだけど…。

Tour of Heroesはそれなりの規模のアプリケーションなので、一度、https://angular.io/ のサンプルのソースを観察するほうが良います。

まずはここで一区切りして、https://angular.io/ のサンプルを見てみようと思います。

5 Min Quickstartを読んだ時の備忘録