AngularJS の次期バージョンとして開発されているのが Angular 2 です。 AngularJS で発覚した問題を解決するためにフルスクラッチで作られています。まだ正式にはリリースされていないですが Alpha 版を試すことができます。

Angular 2 自体は TypeScript で開発されていますが、今回は Babel と Browserify を使ってコンパイルすることにします。

必要な知識

  • npm
  • browserify
  • babel
  • babelify

インストール

必要なライブラリとツールを npm で入れていきます。

$ npm install -g browserify
$ npm install -D babelify
$ npm install -S angular2 babel-core reflect-metadata

Hello, World!

コードは ECMAScript 6+α で書きます。

import 'babel-core/polyfill'
import 'reflect-metadata';
import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: 'test-app'
})
@View({
    template: `
        <div>{{ message }}</div>
    `
})
class Application {

    constructor() {
        this.message = 'Hello, World!';
    }

}

bootstrap(Application);

AngularJS とは、かなり印象が違います。基本的に class 構文を使い、メタ情報は Decorator で与えるようです。

babel-core/polyfill と reflect-metadata がポリフィルです。 angular2/angular2 が Angular 2 の本体で Component などをインポートしています。

@Component と @View でコンポーネントを作ります。 Applicaiton クラスがコントローラで、このオブジェクトに値を設定するとテンプレートから値を使うことができます。この例だと message プロパティを定義しているので template の中の {{ message }} にその値が入ります。

bootstrap を実行するとコンポーネントが有効になるようです。

これを呼び出す HTML が以下になります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <test-app></test-app>
    <script src="bundle.js"></script>
</body>
</html>

@Component で指定した test-app という要素を定義しています。

bundle.js は先程の JavaScript をコンパイルしたものです。コンパイルには browserify を使います。

$ browserify -o bundle.js -t [ babelify --stage 1 ] app.js

Decorator 構文を使うために babelify に --stage 1 という引数を渡しているのがポイントです。 コンパイルしたら HTML を開いて Hello, World! と画面に表示されることを確認できます。

まとめ

  • Angular 2 は AngularJS の次期バージョン
  • npm install angular2 でインストールできる