AngularJS2.0のことを思い出したのでちょっとやってみました。まだbetaなのでチュートリアルの内容も変わるかもしれません。とりあえず現時点でのメモです。思ったことを書いていくだけのスタイルです。

チュートリアルは大きく2部構成になっていて、「5 Min Quickstart」と「Tutorial: Tour of Heroes」に別れています。言語は、TypeScript, JavaScript, DARTが選べますが、今回はTypeScriptを利用することにしました。

5 MIN QUICKSTART

5 Min Quickstart - ts

開発環境の準備から文字を出力するところまでです。TypeScriptとの連携部分などを学べます。

file structure

package.json

{ “name”: “angular2-quickstart”, “version”: “1.0.0”, “scripts”: { “tsc”: “tsc”, “tsc:w”: “tsc -w”, “lite”: “lite-server”, “start”: “concurrent \“npm run tsc:w\” \“npm run lite\” ” }, “license”: “ISC”, “dependencies”: { “angular2”: “2.0.0-beta.0”, “systemjs”: “0.19.6”, “es6-promise”: “^3.0.2”, “es6-shim”: “^0.33.3”, “reflect-metadata”: “0.1.2”, “rxjs”: “5.0.0-beta.0”, “zone.js”: “0.5.10” }, “devDependencies”: { “concurrently”: “^1.0.0”, “lite-server”: “^1.3.1”, “typescript”: “^1.7.3” } }

tsconfig.json

{ “compilerOptions”: { “target”: “ES5”, “module”: “system”, “moduleResolution”: “node”, “sourceMap”: true, “emitDecoratorMetadata”: true, “experimentalDecorators”: true, “removeComments”: false, “noImplicitAny”: false }, “exclude”: [ “node_modules” ] }

app/app.component.ts

import {Component} from ‘angular2/core’;

@Component({ selector: ‘my-app’, template: ’

My First Angular 2 App

コンポーネント

コンポーネントはビュー・テンプレートを管理するクラスです。実際のアプリを作っていく際にはAppComponentをプロパティやロジックで拡張していきますが、このQUICKSTARTではそこまではやりません。ほとんどのファイルはコンポーネントとして一つexportします。今回の例では、AppComponentをexportします。

exportすることでファイルはモジュールになります（AngularJSはモジュールの組み合わせで成り立っています）。拡張子を除いたファイル名は普通モジュール名になります。今回の例では app.componentがモジュール名です。

モジュールは他のモジュールに依存します。他のモジュールをインポートする際はこのように書きます。

import {AppComponent} from ‘./app.component’

クラスはメタデータを与えることで、Anglarのコンポーネントになります。Angularはどのようにビューを作ってアプルケーションの他の部分と連携するのかをメタデータから知る必要があります。

AngularのメタデータはComponent関数で定義されています。angular2/coreをインポートすることでそれにアクセスすることができます。

import {Component} from ‘angular2/core’;

TypeScriptでは@Componentを使ってそれをクラスに適用します。

@Component({ selector: ‘my-app’, template: ’

My First Angular 2 App

’ })

@Componentをすることで、これがAngularのコンポーネントということをAngularに伝えます。@Component関数はselectorとtemplateという二つのフィールドを持っています。

• selector: CSSのセレクター
• template: ビューをレンダーするためのHTML

boot.ts

app/boot.ts

import {bootstrap} from ‘angular2/platform/browser’ import {AppComponent} from ‘./app.component’

bootstrap(AppComponent);

AppComponentをブラウザで開くことをAngularに伝えます。

<!-- 1. Load libraries -->
<script src="node\_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node\_modules/systemjs/dist/system.src.js"></script>
<script src="node\_modules/rxjs/bundles/Rx.js"></script>
<script src="node\_modules/angular2/bundles/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

angular2-polyfills.jsとRx.jsはAngular 2には必須です。Systemを設定してboot fileを読み込ませます。<my-app>タグのところにアプリが表示されます。

5 Min Quickstartの下部にはどうしてそれが必要なのかがいろいろ書いてあって興味深い。充実したQUICKSTART。

TUTORIAL

Tutorial: Tour of Heroes - ts

ちょっと長くなりそうなので別記事にする。