Angular 2のBetaが出ましたね。そろそろ使い始めてもいいのかな。
Angular 2はAngular JSに比べ、書きやすく、また動作が速くなっているようです。
みなさんはすでにAngular JSで何かしらのアプリケーションを動かしてますか？すべてをAngular 2で書き直していきますか？ngUpgradeというものを使えば、Angular JSでの資産をAngular 2でも利用できるかも。
AnuglarチームはAngular 1からAngular 2へのマイグレーションを楽できるよう考えてくれているみたいです。
ということで、今回はngUpgradeについて書きたいと思います。
#前提
- Angular 2のバージョンは2.0.0-beta.0
- Angular JSのバージョンは1.4.8
#参考
- Angular 2公式
- Angular JS公式
- Upgrading from 1.x 公式チュートリアル
- ngUpgrade repository
- Angular 1 to Angular 2 Upgrade Strategy document
- thoughtram Blog
- ngForward
- Angular 1.5 and beyond (Angular Connect)
#Strategy
既存のAngular JS 1アプリを移行する手段としては、
- 全部えいやっと書き換える
- 少しずつ書き換えていく
少しずつ書き換えていくやり方もいくつかあるようで、Typescriptに置き換え、ng-forwardや、Angular JS 1.5でのComponentを使ってAngular JS 1にて、Angular 2っぽく記述していき、Adapterを利用しAngular 2で動くようにして、最終的にAdapterがなくても動くように書き換えていく。
#どんな感じか
import "angular";
import "reflect-metadata";
import {Component} from "angular2/core";
import {UpgradeAdapter} from "angular2/upgrade";
var adapter: UpgradeAdapter = new UpgradeAdapter();
//本来ならちゃんとd.tsを利用しなければいけないところでしょうか
declare var angular:any;
var app = angular.module("myApp", []);
@Component({
selector: "ng2",
template: `
<div>
Angular 2 component
</div>
`
})
class Ng2 {
}
app.directive("ng2",
adapter.downgradeNg2Component(Ng2));
adapter.bootstrap(document.body, ['myApp']);
UpgradeAdapterを利用します。ComponentをDirectiveに接続していきます。
adapter.bootstrap()を利用して、Angular JSでのng-app="myApp"の代わりとします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<ng2></ng2>
<script src="./bundle.js"></script>
</body>
</html>
<body ng-app="myApp">とかのng-app属性は取り除きます。
#最後に
Service等々も少しづつ置き換えていく感じなのかな。
具体的な完全移行の流れはUpgrading from 1.x 公式チュートリアルを見れば書いてあります。結構なボリュームです。