Angular2(beta12)の使い方について簡潔に説明します
細かい部分は省くので、公式サイト等を参考にしてください
あと、β版ということで情報が正しくなくなる可能性もありますがご了承ください

インストール

npm install angular2@2.0.0-beta.12

beta版のためか依存しているパッケージがインストールされないので同様に下記もインストール

npm install es6-shim@0.35.0 reflect-metadata@0.1.2 rxjs@5.0.0-beta.2 zone.js@0.6.6

コンパイル用のパッケージとかは必要に応じてインストールしてください

一応、下記リポジトリにQuickStartを作ってあるのでお試しください
手軽に試したい場合は、Plunkerもオススメです

https://github.com/kanatapple/angular2-webpack-quick-start

使い方

アプリケーションの起動

ES6のモジュール読み込みでbootstrapとルートコンポーネントを読み込み
bootstrap関数にルートコンポーネントを渡します

// main.ts
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App, [])
  .catch(err => console.error(err));

// app.ts
import {Component} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello World</h2>
    </div>
  `
})
export class App {
}

// HTML
<body>
  <my-app>
    loading...
  </my-app>
</body>

@ComponentはDecorators構文といってclassなどに付加情報を設定するものです
上記ではselectorとtemplateという情報を付与しています

selectorはquerySelectorなどに渡すCSS セレクタと同じものです
CSS セレクタにマッチするタグの中にアプリケーションが展開されます
例えば、selector: 'body'とするとbodyタグの中に展開されることになります

templateはHTMLテンプレートです
この内容がCSS セレクタにマッチしたタグの中に展開されます
templateUrlとすると外部のテンプレートを設定することも可能です

動作サンプル

バインディング

単方向バインディング

モデルからビューへの反映です

<h2>{{title}}</h2>

上記のようにすると、クラスに定義されたtitleプロパティの内容が反映されます

双方向バインディング

<input type="text" [(ngModel)]="title">

上記のようにすると、inputタグ等で入力した値がクラスに定義されたプロパティに反映されます

動作サンプル

inputタグに入力した値がモデルに反映され、h2タグの中身も変わることが確認できると思います

イベントバインディング

下記のようにすると、clickなどのイベント発火時に関数を呼び出すことができます

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="onClick()">Click Me</button>
    </div>
  `
})
export class App {
  private title: string = 'Hello World';
  
  private onClick(): void {
    alert('Clicked!!');
  }
}

動作サンプル

他にもタグの属性値にバインディングすることもできますが
公式サイトを参考にするとすぐに理解できると思いますので見てみてください

子コンポーネント

コンポーネントが子コンポーネントを扱うにはComponent Decoratorでdirectivesを設定し
templateに子コンポーネントで定義したCSS セレクタ(タグ)を追加します

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Parent Component</h2>
      <child-component></child-component>
    </div>
  `,
  directives: [ChildComponent]
})

動作サンプル

制御構文

ngIf、ngFor、ngSwitchなどがあります(ngSwitchの説明は省略)

動作サンプル

ngIf

タグに*ngIf="条件式"と記述すると、条件を満たす時にタグが出力されます
条件を満たさない時はタグ自体が出力されません
条件式の記述方法はJavaScriptと同様です

ngFor

<ul>
  <li *ngFor="#alphabet of alphabets; #idx = index">[{{idx}}]{{alphabet}}</li>
</ul>

上記のように、タグに*ngFor="#変数名 of Iterableな変数"と記述すると繰り返しタグが出力されます
#変数名はLocal Template Variablesというもので、そのタグ、もしくは、子要素で使える変数です
また#変数名 = indexと記述すると、現在のインデックスが取得できます

DI(Dependency Injection)

いわゆる「依存性の注入」ってやつです
私がAngular2で一番良くできていると思っているのがこれです

注入される側

HelloServiceというクラスのインスタンスが注入されるとします
下記のように普通にクラスを定義します

export class HelloService {
  public hello(): string {
    return 'Hello Angular2!!';
  }
}

注入する側

Component Decoratorのprovidersに注入するクラス(Provider)を指定し
classのconstructorの引数で受け取るようにします

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{hello}}</h2>
    </div>
  `,
  providers: [HelloService]
})
export class App {
  private hello: string;
  
  constructor(private helloService: HelloService) {
    this.hello = helloService.hello();
  }
}

上記のようにすると、Appクラスがインスタンス化される時に
自動的にHelloServiceが注入されるようになります

動作サンプル

インジェクトチェーン

この注入の仕組みですが、JavaScriptのprototypeチェーンに似ています
自身のprovidersにProviderがなければ、親のコンポーネントを探しに、親のコンポーネントになければ、さらに上に・・という感じに
そしてこのインジェクトチェーンの頂点はbootstrap関数の第２引数です
つまり、ここで指定されたProviderはどのコンポーネントでも使用できるということになります

bootstrap(App, [HelloService]);

上記で説明した以外にもDIについてはいろいろあるのですが
下記の記事が非常にわかりやすいので参考にしてみてください

http://qiita.com/laco0416/items/61eed550d1f6070b36ab

@Input

親のコンポーネントから子コンポーネントに値を渡したい時があると思います
そんな時に使うのが@Inputです
@Inputはコンポーネントに属性を定義するAPIです

export class ChildComponent {
  @Input() id: string;
  @Input('userName') name: string;
}

上記のように@Inputで定義したものが属性として扱えます
属性名と内部の名前を変えたい場合は@Input('属性名')とすると変えることが可能です

親コンポーネントで下記のようにします

@Component({
  selector: 'my-app',
  template: `
    <div>
      <child-component id="0" userName="Alice"></child-component>
      <child-component id="1" [userName]="name"></child-component>
    </div>
  `,
  directives: [ChildComponent]
})
export class App {
  private name: string = 'Bob';
}

一番目のように値を直接指定して子コンポーネントに渡すこともできますし
二番目のように内部の変数の値を子コンポーネントに渡すことも可能です

また、子コンポーネントに値が渡ってくるタイミングですが
constructorではなくAngular2のライフサイクルのngOnChangesのタイミングなのでご注意を ※2016/04/15 ngOnInitと書いてましたが、ngOnChangesでした

動作サンプル

まとめ

長々と書いてきましたが、これだけおさえておけばAngular2を使う時に悩むことはないと思います
@Outputという便利な機能がありますが、今回は省略しました
私はAngular1系をあまり触ってこなかったんですが、Angular2は非常によくできてるFWだと思います
是非お試しください！！

function

Angular2の使い方

インストール

使い方

アプリケーションの起動

バインディング

単方向バインディング

双方向バインディング

イベントバインディング

子コンポーネント

制御構文

ngIf

ngFor

DI(Dependency Injection)

注入される側

注入する側

インジェクトチェーン

@Input

まとめ