Angular 2: upgrading from 1.x

Last updated at 2019-11-12Posted at 2015-12-22

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

#参考

#Strategy
既存のAngular JS 1アプリを移行する手段としては、

全部えいやっと書き換える
少しずつ書き換えていく

少しずつ書き換えていくやり方もいくつかあるようで、Typescriptに置き換え、ng-forwardや、Angular JS 1.5でのComponentを使ってAngular JS 1にて、Angular 2っぽく記述していき、Adapterを利用しAngular 2で動くようにして、最終的にAdapterがなくても動くように書き換えていく。

#どんな感じか

index.ts

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"の代わりとします。

index.html

<!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 公式チュートリアルを見れば書いてあります。結構なボリュームです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up