Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。先月行われたGoogle IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。

今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。

Firebaseのリアルタイムデータベース

Firebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。 APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入することができます。

また、ネットワークが途中で切れた場合は自動的に再接続を行い、復帰後に改めてデータが同期されます。同時100コネクション、1GBのデータ、10GBの転送量までは無料で使うことができるので、まず試してみるといったことができます。

今回はこの無料プランとAngular2を使って進めていきます。

Angular CLIで環境構築

Angular2の環境構築が初めての方でも簡単に導入できるように、Angular2ではCLIが公開されています。これを利用して環境を構築していきます。（※別途、Node.jsのインストールが必要です）

angular-cli

まずはnpmを使って、angular-cliをインストールします。

npm install -g angular-cli

インストールが成功していれば、ng versionでバージョンが表示されます。

angular-cli: 1.0.0-beta.5
node: 5.6.0
os: darwin x64

続いて、ng newコマンドを用いてプロジェクトを作成します。newの後には任意のプロジェクト名を入力してください。（angularやfirebaseという名称を用いるとパッケージ名が重複してしまうため、関連ライブラリのインストールに失敗するのでご注意ください）

ng new sample
cd sample

今回はng new sampleでプロジェクトを作成します。

sampleというフォルダができるのでcd sampleで移動し、この状態で ng serve コマンドを実行するとサンプルのアプリケーションがビルドされ、http://localhost:4200/にブラウザでアクセスするとsample works!と表示されます。

これで開発環境の準備が整いました。

AngularFire導入

本題のAngularFireを導入していきます。

angularfire2

npm install angularfire2 firebase@2.4.2 --save

※ 6月14日現在の最新版は、firebase 2.4.2に対応しています。

続いて、firebase用の型定義ファイルをインストールします。 typingsがインストールされていない場合は npm i -g typingsを実行してインストールをしてください。

typings install dt~firebase --save --global

※ 注意

typings 1系と0系では、コマンドやインストールされるファイルの構成が異なります。現在のバージョンのangular-cliでは0系でインストールされますが、npmでインストールされる最新版は1系になります。本稿では1系がインストールされている状態で解説を行います。0系の場合は以下のtypingsに追記する作業は必要ありません。

src/typings.d.tsにインストールされたfirebaseの型定義ファイル群を追記します。

/// <reference path="../typings/browser.d.ts" />
/// <reference path="../typings/index.d.ts" />
declare var module: { id: string };

angular-cli-build.jsを開き、vendorNpmFilesに'angularfire2/**/*.js' 'firebase/lib/*.js' を追記します。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'angularfire2/**/*.js', // <- 追加
      'firebase/lib/*.js'      // <- 追加
    ]
  });
};

続いて、/src/system-config.tsに以下のようにfirebase,angularfire2の記述を追記します。

/** Map relative paths to URLs. */
const map: any = {
  'firebase': 'vendor/firebase/lib/firebase-web.js',
  'angularfire2': 'vendor/angularfire2'
};

/** User packages configuration. */
const packages: any = {
  angularfire2: {
    defaultExtension: 'js',
    main: 'angularfire2.js'
  }
}

これでAngular2でFirebaseを使う準備が整いました。

Firebaseの登録

続いて、Firebaseの登録と設定を行っていきましょう。

firebase

FirebaseはGoogleアカウントで登録することができます。登録が完了すると、プロジェクトを作るためのボタンが表示されます。

「新規プロジェクトを作成」ボタンをクリックして、アプリケーションを作成しましょう。

アプリケーションが作成できたら「Database」ページを開きます。 以下のように、まだデータベースには何も入っていません。まずはこの画面から初期データを登録してみましょう。

このようにデータを作成しました。

{
  items: {
    0: {
      value: 'item0001'
    },
    2: {
      value: 'item0002'
    },
    2: {
      value: 'item0003'
    }
  }
}

Firebase上では、すべてオブジェクトの形式でデータが構成されるようにしておきます。

続いて、「ルール」のタブをクリックしてルールを設定します。 ルールはデータベースへの値に対してのアクセス権の設定を行うことができます。JSONの形式でデータを定義していきます。

詳しいルールの記載は、以下のページに説明があります。 https://html5exp-sample.firebaseio.com/

ここではサンプルということで、読み書きともに誰からでもできるように設定しておきましょう。

{
  "rules": {
    "items": {
      ".read": "true",
      ".write": "true"
    }
  }
}

これによってデータベースのitems以下は、読み書きともに誰でも許可されるようになりました。では、これで登録したデータが読み取れるか試してみましょう。/src/main.tsを開きます。

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { SampleAppComponent, environment } from './app/';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2'; // <- add

if (environment.production) {
  enableProdMode();
}

bootstrap(SampleAppComponent,[
  FIREBASE_PROVIDERS, // <- add
  defaultFirebase('https://<your-firebase-app>.firebaseio.com/') // <- add
]);

main.ts にangularfire2のファイルをimportし、bootstrap関数の第２引数にFIREBASE_PROVIDERSと defaultFirebase('https://.firebaseio.com/') を配列で渡しておきます。

こうすることによって、今後Angular2のコンポーネント内でFirebaseに必要な設定とプロバイダが提供されるようになります。

続いて、画面にデータを表示するためのコンポーネントに変更を加えます。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2'; //<- add

@Component({
  moduleId: module.id,
  selector: 'sample-app',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.css']
})
export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
		this.items = af.database.list('/items');
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
  </li>
</ul>

*ngFor="let item of items | async" のasyncはAsyncPipeと呼ばれるAngular2にはじめから組み込まれているPipeのひとつです。これはitemsのObservableをsubscribeしたときの引数を自動的に取得して表示してくれるPipeです。詳しい使い方や解説は以下のページにありますので、こちらをご一読ください。

Async Pipe

ng serve コマンドを改めて実行すると、Firebaseで登録されたデータが表示されるようになります。

データの追加

次にブラウザからデータを追加する処理を実装していきましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

FirebaseListObservableにデータをpushするだけで配列データにデータを追加することができます。

データの更新

今度はリストのデータを更新してみましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
	  this.items.update(key,{value:value});
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
    <input [(ngModel)]="item.value" (keyup)="updateItem(item.$key,item.value)"/>
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

this.items.update(key,{value:value});のように更新したいデータの$keyと値を渡すことで更新ができます。 Firebaseのオブジェクトには$keyというプロパティがあり、各データのKey名を取得することができます。 pushで追加されたデータは、一意なKeyが自動で振られるようになっています。

データの削除

続いて、リストのデータを削除してみましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
	  this.items.update(key,{value:value});
  }
  deleteItem(key:string) {
	  this.items.remove(key);
  }
  deleteAll() {
	  this.items.remove();
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
    <input [(ngModel)]="item.value" (keyup)="updateItem(item.$key,item.value)"/>
    
    <button (click)="removeItem(item.$key)">削除</button>
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

<button (click)="removeAll()">全削除</button>

更新と同様にthis.items.remove(key);と削除したいデータのKeyを渡すことで、そのデータのみを削除することができます。

this.items.remove();とKeyを渡さずにremoveするとリスト全体が削除されるので注意してください。

このように非常に簡単にデータの読み書きが実装できてしまいます。

オブジェクトデータの取り扱い

続いて、今度はリストデータでなく単一のオブジェクトのデータを扱ってみましょう。Firebaseの管理画面でDatabaseのデータに以下のようなconstantsを追加しました。

{
  constants: {
    title: "My first firebase app"
  },
  items: {
    ...
  }
}

ルール設定ページにいき、constantsは読み込み専用に設定しておきます。

{
  "rules": {
    "constants": {
      ".read": "true",
      ".write": "false"
    },
    "items": {
      ".read": "true",
      ".write": "true"
    }
  }
}

src/app/sample.component.tsを、以下のように修正します。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; //<- add

@Component({
  moduleId: module.id,
  selector: 'sample-app',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.css']
})
export class SampleAppComponent {
  constants: FirebaseObjectObservable<any>;
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.constants = af.database.object('/constants');
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
    this.items.update(key,{value:value});
  }
  deleteItem(key:string) {
    this.items.remove(key);
  }
  deleteAll() {
    this.items.remove();
  }
}

そして、ビューのタイトル部分をconstantsから取得して表示させるようにします。

<h1>{{(constants | async)?.title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    <input [(ngModel)]="item.value" (keyup)="updateItem(item.$key,item.value)"/>

    <button (click)="deleteItem(item.$key)">削除</button>
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

<button (click)="deleteAll()">全削除</button>

こうすることで、オブジェクトのデータを読み込んで画面に表示させることができました。

オブジェクトの更新

オブジェクトの更新をする際は、リストと同様にupdate関数を用いて変更を行うことができます。その時にはルールで書き込みが許可されている必要があります。

this.constants.update({title:"new title"});

オブジェクトの削除

オブジェクトの削除を行う際にはremove関数を用いますが、以下のようにremoveするとconstantsごと削除されます。

this.constants.remove(); // constantsごと削除

１つのプロパティのみを削除したい場合は、以下のように削除したいプロパティまで取得した上でremove関数を実行します。

af.database.object('/constants/title').remove(); //titleだけ削除

まとめ

このようにAngular2とFirebaseを使うことで、簡単にリアルタイムにデータのやり取りを行うことができるようになります。

今回はサンプルということで誰でも読み書きできる形にしていますが、ユーザー認証をFirebaseで作ったり、既にあるログイン情報を利用して認証させたりできるので、新規でも追加でも導入しやすくなっています。

次回はその認証機能を用いてログインすると書き込みができるようにしていきたいと思います。

この記事では、実際に移行を行う上でのプロセスを具体的に示していきます。

編集部注: この記事は、2016年3月21日に開催された「ng-japan 2016」のセッション「Angular1.4で作られた自社マイクロサービスを2へマイグレーション」についての、講演者自身によるレポートです。講演内容に加えて、講演者自身による解説や追記によって、よりわかりやすく詳細な記事に仕上げていただきました。

セッションの講演資料と動画はこちらになります。

講演資料

講演動画（4:19:52付近から始まります）

Angular1から2へ移行する前に

Angular2への移行を始める前に、Angular1の構成やソースコードを整理する必要があります。公式サイトに「UPGRADING FROM 1.X」という1からアップグレードする手順の解説があります。その手順に加え、実際のアプリケーションの構成を考慮すると以下のような流れになります。

• 事前準備
• ng-upgrade
• コンポーネント(ディレクティブ)の移植
• サービスの移植
• ページコンポーネントの移植
• フィルターの移植
• ルーターの移植
• ng1ライブラリの置き換え
• ng-upgradeの除去

※ セッションでは上記の「サービスの移植」までの前段のみを取り上げています。

事前準備

Angular2では1とは異なる点が多く、そのままではすぐにアップグレードすることはできません。そこでまずは1で近い構成にする事前準備が必要になります。

AngularJS Style Guideに従った構成になっていること

johnpapa/angular-styleguide Angular 1 Style Guide

上記スタイルガイドのRule of 1及びFolders-by-Feature Structure、Modularityの３点には最低限合わせておきましょう。

Angular2ではコンポーネントが中心になり、ファイルの構成もこのスタイルガイドと近い構成になっていきます。あらかじめコンポーネントごとにファイルを分けて置くことで、基本的な設計もコンポーネント指向に近づけておきます。

「その使い方はもう古いかも？AngularJS老化チェック」という記事の内容が現在のコードに当てはまらないかどうかをチェックしておきましょう。当てはまったものはスタイルガイドに沿ってリファクタリングを行いましょう。

モジュールローダー（モジュールバンドラー）（Browserify/Webpackなど）を使っていること

Angular2は必要なスクリプトを読み込んでいって作ることもできますが、モジュールローダー（モジュールバンドラー）前提で話が進んでいくことがあり、導入されていないと理解が難しい状況になります。何も導入していなければBrowserifyかWebpackをおすすめします。公式サイトではSystemJSを用いていますが、Browserify/Webpackを使う場合、必ずしもSystemJSを使う必要はありません。

• Browserify
• Webpack
• SystemJS

TypeScriptへ移行

Angular2入門のページではBabelやTypeScriptなどの利用を、とありますが、マイグレーション時においてはTypeScriptへの移行を先にすることを強くお勧めします。

例えば先ほどの「UPGRADING FROM 1.X」のページですが、JavaScript用のドキュメントは準備中となっています（2016年4月現在）。

このような状況からみて、今後の新しい機能についてもTypeScript優先で情報提供されることがあることでしょう。また、既にAngular2に取り組んでいる先人たちのノウハウ（StackOverflowなど）もTypeScriptをベースにしているものが多いので、これを機にTypeScriptを使うと良いでしょう。型などを用いることで移行時の不具合を見つける手助けにもなります。

コンポーネントディレクティブの使用

Angular1.5からコンポーネント機能が提供されました。Angular2の基本はコンポーネントで構成されます。そのため、既存のアプリケーションをコンポーネント化していくことで移行がスムーズになります。対応ブラウザに問題がなければまずはAngular1.5にアップグレードし、ディレクティブや共通部分をコンポーネント化しましょう。

Angular Developer Guide / Component

ここまでを一通り行い、Angular2への移行の準備が整います。

この時点で難しいと思われる方もいるかもしれません。しかしながら、Angular2でも準備と同様の環境が求められます。Angular2はパフォーマンス改善やコンポーネント指向など魅力的な変更があるのでぜひとも移行していきたいところなのです。いずれにしても、今後も大きなフロントエンド開発においてはこのようなモダン構成が求められることでしょうから、そうした練習としてAngular2を採用するのも良いでしょう。

Angular2の導入

Angular2の方へ入っていきたいと思います。最低限必要なものとして以下のものが必要になります。（2016/4/24時点）

• angular2@2.0.0-beta.15
• systemjs@0.19.26
• refrect-metadata@0.1.2
• rxjs@5.0.0-beta.2
• zone.js@0.6.10
• es6-shim@0.35.0

npm installでまとめて導入できます。

npm install angular2@2.0.0-beta.15 systemjs@0.19.26 refrect-metadata@0.1.2 rxjs@5.0.0-beta.2 zone.js@0.6.10 es6-shim@0.35.0

まずAngularの起動方法を変更します。

<body ng-app="app">...</body>

これは以下のようにangular.bootstrap関数を用いて定義するようにします。この際HTMLにng-appは不要です。

angular.bootstrap(document.body,['app'],{strictDi:true});

さらにこの部分をng-upgradeと呼ばれているangular2/upgradeのUpgradeAdapterというものを用いてAngularを起動していきます。

import {UpgradeAdapter} from 'angular2/upgrade';
export const Adapter = new UpgradeAdapter();

import {Adapter} from './adapter.ts';
Adapter.bootstrap(document.body,['app'],{strictDi:true});

このようにupgradeの中にあるUpgradeAdapterを経由して実行をします。今後1と2を混在させた状態でアプリケーションを動かすためのハブのような役割をこのAdapterが行ってくれます。今後いろいろな場面でAdapterを呼び出して使うことになるので、あらかじめ別のファイルにしておいて外部から参照できるようにしておきましょう。

続いてangular2-polyfill.jsを読み込みます。後々Observableを使う時に必要になるので、忘れないように入れておきましょう。

import 'angular2/bundles/angular2-polyfills';

// for old browsers
import 'es6-shim/es6-shim.min.js';
import 'angular2/es6/dev/src/testing/shims_for_IE';

ここでユニットテストなどでPhantomJSなどで実行しているとエラーが出ます。es6-shimを入れることで回避することができます。

karma-es6-shim

TypeScriptにもes6の型定義ファイルが必要になるので、es6-shimの型定義ファイルを入れておきましょう。

typings install es6-shim --save --ambient

以上で移行の前段はできました。ここからはAngular1で作ったものを徐々に2へと置き換えて行く作業になります。

コンポーネントを置き換え

まずは他にあまり依存しない、Directiveのrestrict:’E’で実装されていたものをAngular2へ移行していきます。大きなところからやりたくなりますが、移行は末端から順番にやるようにしましょう。

以下はAngular1のコンポーネントを使って書かれたローディングの例です。

const template = require('./loading.html');
class LoadingCtrl {
    constructor(private LoadingService) {}
}
angular.module(‘app')
    .component('globalLoading',{
        controller: LoadingCtrl,
        transclude: true,
        template: template
    });
export default LoadingCtrl;

class LoadingService {
    count:number = 0;
    loading:boolean = false;
    constructor() {}
    start() {
        ++this.count;
        this.loading = true;
    }
    stop() {
        --this.count;
        if (this.count === 0) {
            this.loading = false;
        }
    }
}
angular.module(‘app')
    .service('LoadingService',LoadingService);

<div ng-show="LoadingService.loading" class="loading">
    <div class="loading-text" ng-transclude></div>
</div>

このローディングコンポーネントをAngular2に置き換えていきます。 まずはコンポーネント部分を置き換えていきましょう。

import {Adapter} from '../../core/adapter';
import {Component} from 'angular2/core';
import {LoadingService} from './LoadingService';
const template = require('./loading.html');

@Component({
    selector: 'global-loading',
    template: template
})
export class LoadingCtrl {
    constructor(private LoadingService:LoadingService) {}
}
angular.module('app').directive('globalLoading',<angular.IDirectiveFactory>Adapter.downgradeNg2Component(LoadingCtrl));

Angular2の基本はコンポーネントになっているので、出来る限りコンポーネントに置き換えておきましょう。

Angular2で書かれたコンポーネントは1環境では呼び出すことができません。そこでディレクティブにAdapter.downgradeNg2Component()を用いて登録することで、Angular1環境下においても使うことができるようになります。

続いて、サービス部分の移植です。

import {Adapter} from '../../core/adapter';
import {Injectable} from 'angular2/core';

@Injectable()
export class LoadingService {
    count:number = 0;
    loading:boolean = false;
    constructor() {}
    start() {
        ++this.count;
        this.loading = true;
    }
    stop() {
        --this.count;
        if (this.count === 0) {
            this.loading = false;
        }
    }
}
angular.module('app').factory('LoadingService',Adapter.downgradeNg2Provider(LoadingService));
Adapter.addProvider(LoadingService);

@Injectable()をつけてInject(DI)可能であることを示します。 コンポーネント同様に、Angular2記法のServiceをAngular1からもDIできるようにAdapter.downgradeNg2Provider()を使ってダウングレードして登録しておきます。

加えて、Adapter.addProvider()で作ったサービスをProviderに登録する必要があります。これはUpgradeAdapterを使っている場合で、Angular2のコンポーネントからDIさせるために必要になります。

これを行わないと以下のようなエラーとなります。

EXCEPTION: Error: [$injector:unpr] Unknown provider: LoadingServiceProvider <- LoadingService <- LoadingInterceptor <- $http <- $templateFactory <- $view <- $state

同様にHTMLもAngular2記法に置き換えを行います。

ディレクティブではng-transcludeを使っていましたが、Angular2ではng-contentになっているのは注意が必要です。

また、細かいところですが、angular.constantsもなくなっているので、constでオブジェクトを作っておき、それをimportして使うように置き換えましょう。

ServiceのAngular2移行

さて次に、ServiceをAngular2化していきます。 基本はLoadingのときと同じですが、通信周りには変更があります。

Ajax通信を行う際は$httpを使って通信を行っていました。Angular2ではHttpでAjax通信を行うことができます。$httpはPromiseを返していましたが、HttpはObservableを返すという違いがあります。

以下はAngular2記法に置き換えたいわゆるモデルです。作りは先程のローディングの場合と殆ど変わりませんが、HttpはObservableを返すので、処理の変更箇所を減らすためにPromiseで返すようにしています。

import {Adapter} from '../../core/adapter';
import {Injectable} from 'angular2/core';
import {CONSTANTS} from '../../core/constants';
import {Http, Response} from 'angular2/http';
@Injectable()
export class AccountModel {
    constructor(protected http:Http) {}
    get() {
        return this.http.get(`${CONSTANTS.API_PATH}account`).toPromise();
    }    
}
angular.module('app').factory('AccountModel', Adapter.downgradeNg2Provider(AccountModel));
Adapter.addProvider(AccountModel);

Httpの返すObservableについてはRxJSのドキュメントを参照してください。

Reactive-Extensions/RxJS

最後にあらかじめコンポーネントにしておいたページでフォームの部分を移植してみます。 まずテンプレートをAngular2記法に置き換えます。

テンプレートの記法は以下の参考リンクを上から順番に見ていくと良いでしょう。

• *ngIfのようなシンタックスについて – TemplateSyntax
• Angular1ではこう書いてたけど2だとどうなるの？というとき – ANGULAR 1 TO 2 QUICK REFERENCE
• 慣れてきて一覧でみたい時 – ANGULAR CHEAT SHEET

formの移植

続いてformの制御部分を移植します。メールアドレスの入力フォームで、バリデーションが通らないと更新ボタンが押せない（disabled）になるというよくあるものです。

<form ng-submit="$ctrl.save()">
    <label class="layout-block">メールアドレス変更</label>
    <div class="form-item">
        <div class="form-input form-fill">
            <input ng-model="$ctrl.newEmail" type=“email" name="email" placeholder="新しいメールアドレス" required>
            <span class="form-error">
                <span ng-if="!form.email.$error.email">メールアドレスを正しく入力してください</span>
                <span ng-if="!form.email.$error.required">必ず入力してください</span>
            </span>
        </div>
    </div>
    <button ng-disabled="!emailform.$valid" class="btn btn-default btn-revert">メールアドレスを変更する</button>
</form>

formの制御のために[ngFormModel]="name"を使います。（これ以外にも複数方法があります）また、inputタグにはngControl="name"を使って名前を付けます。

下記のように書きかえます。

<form [ngFormModel]="form" (submit)="save();">
	<div class="form-input">
		<input [(ngModel)]="user['lastname-phonetic']" ngControl="lastphonetic" type="text" value="" placeholder="セイ">
		<span class="form-error" *ngIf="form.controls.lastphonetic.errors">
			<span class="form-error-message">
				<div [hidden]="!form.controls.lastphonetic.errors.required">セイは必須項目です</div>
				<div [hidden]="form.controls.lastphonetic.errors.required && form.controls.lastphonetic.errors.invalidPhonetic">全角カタカナで入力してください</div>
			</span>
		</span>
	</div>
	<button [disabled]="!form.valid" class="btn btn-default btn-revert">更新</button>
</form>

フォームのエラー状況によって振り分けしたい部分は[ngFormModel]でつけた名前.controls.inputにつけたngCotrol名.errors.エラー名でエラーが発生しているかどうかを確認することができるようになりますが、スクリプトも修正が必要です。

import {FORM_DIRECTIVES,Control,ControlGroup,Validators} from 'angular2/common';

@Component({
    selector: 'profile-form',
    templateUrl: 'webroot/components/profile/profile.html',
    directives: [FORM_DIRECTIVES]
})

this.form = new ControlGroup({
	lastphonetic: new Control('',Validators.compose([
		Validators.required,
		ValidateService.phonetic
	]))
});

コンポーネント内でform関連のディレクティブを使うときには@Componentのdirectivesに配列で使うディレクティブを指定します。

先ほどngModelFormにつけた名前と同じ名称にnew ControlGroup()します。 そしてngControlにつけた名前と同じ名称でnew Control()します。 第一引数がデフォルトの値、第二引数にバリデーション関数を指定します。 複数指定する場合はValidators.componse([])を１つの場合はValidators.requiredなどを指定します。

Validatorsにはあらかじめ定義されているバリデーターがあります。

static required(control: modelModule.Control): {
	[key: string]: boolean;
};
static minLength(minLength: number): Function;
static maxLength(maxLength: number): Function;
static pattern(pattern: string): Function;
static nullValidator(c: any): {
	[key: string]: boolean;
};

Angular1ではtype=”email”でメールアドレスのチェックが行われていましたが、Angular2では上記のチェック以外は行われない点は注意してください。

今回はメールアドレスなので、カスタムバリデータを作成します。

export const ValidateService = {
	email(control:Control) {
		if (!/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i.test(control.value)) {
			return {email: true};
		}
	}
}

returnする名称はエラーが発生した時に form.controls.lastphonetic.errors.emailで取得することができる値です。

バリデーションの正規表現についてはAngular1で使用されていたものと同じです。

Angular directive/input.js

セッションでは時間の関係で移行手順の途中までしかお話できませんでした。 移行作業は作られたアプリケーションによって異なりますが、公式サイトの手順だけではハマりどころも発生することでしょう。

今後移行手順に関してはさらに整理され情報も出てくると思いますので、事前準備をしっかりと行い、ng-upgradeを用いて少しずつ移行を進めていきましょう。