前のページ

次のページ

ブートストラッピング

import 'package:angular2/platform/browser.dart';

bootstrap(AppComponent, [MyService, provide(...)]);

AppComponentをルート・コンポネントとしてこのアプリをブートストラップする

テンプレート構文

<input [value]="firstName">

プロパティ値valueを式firstNameの結果にバインドする

<div [attr.role]="myAriaRole">

属性のrole（これはWAI-ARIAで定義されている属性です）を式myAriaRoleの結果にバインドする

<div [class.extra-sparkle]="isDelightful">

この要素上のextra-sparkleCSSクラスの存在を式 isDelightfulの真偽値にバインドする

<div [style.width.px]="mySize">

styleプロパティのwidthを式mySizeの結果にピクセルでバインドする。単位はオプショナル

<button (click)="readRainbow($event)">

このbutton要素（及びその子供たち）上でclickイベントがトリガされたとき、メソッド readRainbowを呼び、そのeventオブジェクトを渡す

<div title="Hello {{ponyName}}">

プロパティを内挿された文字列例えば"Hello Seabiscuit"にバインドする。<div [title]="'Hello' + ponyName">と等価

<p>Hello {{ponyName}}</p>

テキストのコンテントを内挿された文字列例えば"Hello Seabiscuit"にバインドする

<my-cmp [(title)]="name">

双方向データ・バインディングをセットする。<my-cmp [title]="name" (titleChange)="name=$event">と等価

<video #movieplayer ...> <button (click)="movieplayer.play()"> </video>

現行テンプレート内で、あるデータ・バインディングとイベント・バインディングの式内に、video要素インスタンスへのアクセスを提供するローカル変数のmovieplayerを生成する

<p *myUnless="myExpression">...</p>

* シンボルは現行要素を組み込みテンプレートに変える。<template [myUnless]="myExpression"><p>...</p></template>と等価

<p>Card No.: {{cardNumber | myCardNumberFormatter}}</p>

式 cardNumberの現行値を myCardNumberFormatterというパイプ経由で変換する

<p>Employer: {{employer?.companyName}}</p>

安全ナビゲーション演算子の(?.)はemployserフィールドがオプショナルで未定義だということを意味し、この式の残りは無視される

組み込みディレクティブ

pubspecのなかでplatform_directivesを使って利用可能

<section *ngIf="showSection">

showSection式に基づいてDOMツリーの一部を削除または再生成する

<li *ngFor="let item of list">

このli要素とその中身をテンプレートに変え、それをリスト内の各アイテムのためのビューのインスタンス化に使用する

<div [ngSwitch]="conditionExpression"> <template [ngSwitchWhen]="case1Exp">...</template> <template ngSwitchWhen="case2LiteralString">...</template> <template ngSwitchDefault>...</template> </div>

conditionExpressionの現行値に基づいて埋め込まれているテンプレートたちの一つを選択することでdivの中身を条件的に交換する

<div [ngClass]="{active: isActive, disabled: isDisabled}">

この要素上のCSSクラスたちの存在を関連付けられたマップ値の真偽値にバインドする。右側の式は{class-name: true/false}マップを返さねばならない

入力フォーム

pubspecのなかでplatform_directivesを使って利用可能

<input [(ngModel)]="userName">

フォーム・コントロールのための双方向バインディング、解析、及び有効性チェックを提供

クラス・メタデータ（アノテーション）

import 'package:angular2/core.dart';

@Component(...) class MyComponent() {}

あるクラスがコンポネントであることを宣言し、そのコンポネントに関するメタデータを提供

@Directive(...) class MyDirective() {}

あるクラスがディレクティブであることを宣言し、そのディレクティブに関するメタデータを提供

@Pipe(...) class MyPipe() {}

あるクラスがパイプであることを宣言し、そのパイプに関するメタデータを提供

@Injectable() class MyService() {}

依存物インジェクタがこのクラスのインスタンスを生成しているとき、あるクラスがコンストラクタに注入すべき依存物たちを持っていることを宣言する

ディレクティブ設定

@Directive(property1: value1, ...)

selector: '.cool-button:not(a)'

あるテンプレート内のこのディレクティブを特定するCSSセレクタを指定する。対応しているセレクタは[attribute], .class, 及び :not()

親子関係のセレクタたちには対応していない

providers: [MyService, provide(...)]

このディレクティブとその子供たちのための依存物注入のプロバイダたちのリスト

コンポネント設定

@Component extends @Directive,従って@Directive設定はコンポネントにも同じく適用される

viewProviders: [MyService, provide(...)]

このコンポネントのビューにスコープ付けされた依存物注入プロバイダたちのリスト

template: 'Hello {{name}}' templateUrl: 'my-component.html'

このコンポネントのビューのインラインのテンプレートまたは外部テンプレートのURL

styles: ['.primary {color: red}'] styleUrls: ['my-component.css']

このコンポネントのビューのスタイリングのためのインラインのCSSスタイルまたは外部スタイルシートのURL

directives: [MyDirective, MyComponent]

このコンポネントのテンプレートの中で使われているディレクティブたちのリスト

pipes: [MyPipe, OtherPipe]

このコンポネントの中で使われているパイプたちのリスト

ディレクティブとコンポネントのためのクラス・フィールド・デコレータ

import 'package:angular2/core.dart';

@Input() myProperty;

プロパティ・バインディング(例: <my-cmp [myProperty]="someExpression">)を介して更新可能な入力プロパティを宣言する

@Output() myEvent = new EventEmitter();

イベント・バインディング(例: <my-cmp (myEvent)="doSomething()">)で加入できるイベントをファイアする出力プロパティを宣言する

@HostBinding('[class.valid]') isValid;

ホスト要素のプロパティ（ここではCSS class valid）をディレクティブ/コンポネントのプロパティ(isValid)にバインドする

@HostListener('click', ['$event']) onClick(e) {...}

ホスト要素のイベント (click) にディレクティブ/コンポネントのメソッド(onClick)で加入する。オプショナルに引数($event)を渡す

@ContentChild(myPredicate) myChildComponent;

このコンポネントのクエリ(myPredicate)の最初の結果をこのクラスのプロパティ(myChildComponent)にバインドする

@ContentChildren(myPredicate) myChildComponents;

このコンポネントのコンテント・クエリ(myPredicate)の結果をこのクラスのプロパティ(myChildComponents)にバインドする

@ViewChild(myPredicate) myChildComponent;

このコンポネントのビュー・クエリ(myPredicate)の最初の結果をこのクラスのプロパティ(myChildComponent)にバインドする。ディレクティブには使用できない

@ViewChildren(myPredicate) myChildComponents;

このコンポネントのビュー・クエ結果をリ(myPredicate)のこのクラスのプロパティ(myChildComponents)にバインドする。ディレクティブには使用できない

ディレクティブとコンポネントの変化検出とライフサイクル・フック

（クラス・メソッドとして実装されている）

MyAppComponent(MyService myService, ...) { ... }

他のどのライフサイクル・フックの前に呼ばれる。依存物注入のために使用するが、ここでのseriousな作業は一切避けること

ngOnChanges(changeRecord) { ... }

入力プロパティへの各変化のあとで、そしてコンテントまたはチャイルドのビューを処理する前に呼ばれる

ngOnInit() { ... }

コンストラクタ、入力プロパティたちの初期化、及び ngOnChangesの最初の呼び出しの後で呼ばれる

ngDoCheck() { ... }

コンポネントまたはディレクティブの入力プロパティがチェックされる毎に呼び出される。変化検出をカスタム・チェック実行で拡張するにはこれを使用する

ngAfterContentInit() { ... }

ngOnInitのあとこのコンポネントまたはディレクティブのコンテントが初期化されたときに呼ばれる

ngAfterContentChecked() { ... }

このコンポネントまたはディレクティブのコンテントのチェックのあと毎回呼び出される

ngAfterViewInit() { ... }

このコンポネントのビューが初期化された際ngAfterContentInitの後で呼び出される。コンポネントのみに適用される

ngAfterViewChecked() { ... }

該コンポネントのビューの各チェック後に呼び出される。コンポネントのみに適用される

ngOnDestroy() { ... }

該インスタンスが破壊される前に一回呼び出される

依存物注入の設定

import 'package:angular2/core.dart';

provide(MyService, useClass: MyMockService)

MyServiceのためのプロバイダにMyMockServiceクラスをセットまたはオーバライドする

Provide(MyService, useFactory: myFactory)

MyServiceのためのプロバイダにmyFactoryファクトリ関数をセットまたはオーバライドする

provide(MyValue, useValue: 41)

MyValueのためのプロバイダに値41をセットまたはオーバライドする

ルーティングとナビゲーション

import 'package:angular2/router.dart';

@RouteConfig(const [ const Route( path: '/:myParam', component: MyComponent, name: 'MyCmp' ), ])

デコレートされたコンポネントのルートを設定する。staticなルート、パラメタ化されたルート、及びワイルドカードのルートにも対応

<router-outlet></router-outlet>

アクティブなルートのコンポネントをロードする場所をマークする

<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">

ルート名とオプショナルなパラメタたちで構成されるルート・インストラクションに基づき別のビューへのリンクを生成。ルートのルートへナビゲートするには / プレフィックスを使い、子供のルートには./プレフィックスを使う

@CanActivate(() => ...)class MyComponent() {}

このルータがこのコンポネントを活性化すべきかを判断するのに最初に呼ばねばならない関数を定義するコンポネント・デコレータ。ブール値かfutureオブジェクトを返さなければならない

routerOnActivate(nextInstruction, prevInstruction) { ... }

あるコンポネントにナビゲートしたあとで、このルータはこのコンポネントのrouterOnActivateメソッドを呼び出す（もし定義されていれば）

routerCanReuse(nextInstruction, prevInstruction) { ... }

該インスタンスを再利用するかまたは破壊して新しいインスタンスを生成するかを判断するのにルータはこのコンポネントの routerCanReuseメソッドを呼び出す（もし定義されていれば）。 ブール値かfutureオブジェクトを返さなければならない

routerOnReuse(nextInstruction, prevInstruction) { ... }

ルータがコンポネントのインスタンスを再利用するときは、このコンポネントの routerOnReuseメソッドたちを呼ぶ（もし定義されていれば）

routerCanDeactivate(nextInstruction, prevInstruction) { ... }

このルータはナビゲーションの後で削除される各コンポネントの routerCanDeactivateメソッドを呼たちぶ（もし定義されていれば）。もし総てのそのようなメソッドたちの総てがtrueまたは成功裏に完了するfutureを返したときのみナビゲーションは進行する

routerOnDeactivate(nextInstruction, prevInstruction) { ... }

ルート変更の結果そのディレクティブが削除される前に呼ばれる。このfutureが完了するまでこのディレクティブの削除を保留するfutureを返しても良い

前のページ

次のページ