ささっとAngular2を動かしてみる - AngularJS Advent Calendar 2015

何はともあれ、ささっとAngular2を動かしてみたい！というときのためのYEOMANジェネレータを使ってAngular2を動かしてみる。このエントリーは「AngularJS Advent Calendar 2015」12月5日の記事です。

node.jsのインストール

もうフロントエンド開発では常識ですね。マシン買ったら何も考えずにnodebrew使ってnode.js入れましょう。ちなみにWindowsの場合ですが若干面倒なこともありますのでこちらは必読です：

github.com

generator-angular2のインストールと実行

今のところYEOMANジェネレータでAngular2は４つ。まだアルファ版ですからそんなもんです、先走りすぎても仕事じゃね。

$ npm i -g generator-angular2

さていつものようにディレクトリ作ってyoします。

$ yo angular2

これが終わったらアプリケーションを起動します。

$ npm start

起動する画面は文字列を表示しているだけです。

中身

まず起動されるブートストラップはindex.jsでそこからディレクティブangular-2.jsを呼び出しています：

(index.js)
import {Component, View, bootstrap} from 'angular2/angular2';
import {Angular2} from 'angular-2';

@Component({
  selector: 'main'
})

@View({
  directives: [Angular2],
  template: `
    <angular-2></angular-2>
  `
})

class Main {

}

bootstrap(Main);

(angular-2.js)
import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2';

@Component({
  selector: 'angular-2'
})

@View({
  templateUrl: 'angular-2.html'
})

export class Angular2 {

  constructor() {
    console.info('Angular2 Component Mounted Successfully');
  }

}

最後に

このくらいのソースだとAngular1で慣れてる人は直感的に何がどうなってるかすぐに理解出来ると思います。まだアルファ版なのでゆっくりゆっくりで。