AngularJS
角度2+への移行

前書き

あなたのAngularJSアプリをコンポーネント指向の構造に変換する

新しいAngularフレームワークでは、 コンポーネントはユーザーインターフェイスを構成する主なビルディングブロックです。したがって、AngularJSアプリケーションを新しいAngularに移行するのに役立つ最初のステップの1つは、それをよりコンポーネント指向の構造にリファクタリングすることです。

バージョン1.5以降の旧AngularJSにもコンポーネントが導入されました。 AngularJSアプリでコンポーネントを使用すると、構造が新しいAngular 2+に近づくだけでなく、モジュラー化され、維持しやすくなります。

さらに進める前に、 コンポーネントの利点と使用法についてよく説明されているAngularJSの公式ドキュメントページを参照することをお勧めします。

むしろ古いng-controller指向のコードを新しいcomponent指向のスタイルに変換する方法についてのヒントを述べたいと思います。

あなたのアプリをコンポーネントに分解し始める

すべてのコンポーネント指向アプリケーションは、通常、他のサブコンポーネントを含む1つまたはいくつかのコンポーネントを持っています。だから、単にあなたのアプリ（またはそれの大きな部分）を含むだけの最初のコンポーネントを作成しないでください。

私たちは名前のコントローラに割り当てられたコードの一部、持っていると仮定しUserListController私たちが名前を付けた、と我々はそれの部品を作りたいUserListComponent 。

現在のHTML：

<div ng-controller="UserListController as listctrl">
    <ul>
        <li ng-repeat="user in myUserList">
            {{ user }}
        </li>
    </ul>
</div>

現在のJavaScript：

app.controller("UserListController", function($scope, SomeService) {

    $scope.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

新しいHTML：

<user-list></user-list>

新しいJavaScript：

app.component("UserList", {
    templateUrl: 'user-list.html',
    controller: UserListController
});

function UserListController(SomeService) {

    this.myUserList = ['Shin', 'Helias', 'Kalhac'];

    this.someFunction = function() {
        // ...
    }

    // ...
}

$scopeをコントローラ関数に注入しなくても、 $scope.myUserList代わりにthis.myUserListを宣言していることにthis.myUserList $scope.myUserList 。

新しいテンプレートファイル user-list.component.html ：

<ul>
    <li ng-repeat="user in $ctrl.myUserList">
        {{ user }}
    </li>
</ul>

私たちは今、変数を参照しているかに注意してくださいmyUserList使用して、コントローラに属し、 $ctrl.myUserList代わりにHTMLから$scope.myUserList 。

これは、ドキュメントを読んだ後におそらく理解したように、テンプレートの$ctrlがコントローラ関数を参照するようになったからです。

コントローラとルートはどうですか？

あなたのコントローラがng-controller代わりにルーティングシステムを使ってテンプレートにバインドされている場合は、次のようなものがあれば：

$stateProvider
  .state('users', {
    url: '/users',
    templateUrl: 'user-list.html',
    controller: 'UserListController'
  })
  // ..

州の宣言を次のように変更することができます：

$stateProvider
    .state('users', {
      url: '/',
      template: '<user-list></user-list>'
    })
    // ..

次は何ですか？

アプリケーションを含むコンポーネント（アプリケーション全体またはビューの一部など）があるので、コンポーネントを複数の入れ子コンポーネントに分割し、その一部を新しいサブコンポーネントにラップすることで開始する必要があります、 等々。

あなたは次のようなComponentの機能を使い始めるべきです

• 入力と出力のバインディング

• $onInit() 、 $onChanges()などのライフサイクルフック

コンポーネントのドキュメントを読んだ後は、これらのコンポーネントの機能をすべて使用する方法をすでに知っているはずですが、実際の単純なアプリケーションの具体例が必要な場合は、 これを確認できます。

また、コンポーネントのコントローラの内部に多くのロジックコードを保持する関数がある場合、そのロジックをサービスに移すことを検討することをお勧めします 。

結論

コンポーネントベースのアプローチを採用することで、AngularJSを一歩近づけて新しいAngularフレームワークに移行させることができますが、より多くのモジュラー化を実現できます。

もちろん、新しいAngular 2+の方向に進んでいくためには他にもたくさんのステップがあります。これについては、次の例で説明します。

WebpackとES6モジュールの紹介

Webpackのようなモジュールローダーを使用することで、 ES6で利用可能な組み込みモジュールシステム（ TypeScriptと同様に）を利用することができます。次に、 インポートとエクスポートの機能を使用して、アプリケーションのさまざまな部分でどのコードを共有できるかを指定できます。

アプリケーションをプロダクションに持っていくと、モジュールローダによって、バッテリを含めた生産バンドルへのパッケージ化が容易になります。