AngularJS の「controller as」構文はコードの構成と読みやすさをどのように改善しますか?

AngularJs の "controller as" 構文: 明確化と説明

AngularJS では、コントローラーの構成を簡素化し改善することを目的とした、"controller as" と呼ばれる新しい構文が導入されました。

説明

「controller as」構文を使用すると、コントローラーをインスタンス化し、スコープ内のカスタム エイリアスを割り当てることができます。例:

InvoiceController as invoice

これは、Angular が InvoiceController のインスタンスを作成し、それを現在のスコープ内の請求書変数に保存することを意味します。

利点:

1. よりクリーンなコントローラー コード: 「controller as」を使用すると、コントローラーの $scope パラメーターを削除でき、コードがより簡潔で読みやすくなります。
2. 明示的なプロパティ参照: 指定したエイリアス (請求書など) により、特定のプロパティの由来が明確になり、コードの明瞭さが向上します。
3. スコープ指定されたプロパティ:コントローラー インスタンスに割り当てられたプロパティはコントローラー自体にスコープされますが、$scope に割り当てられたプロパティは階層全体で利用できます。
4. ドット ルールの簡略化: エイリアスを使用する (例: invoice) ) を使用すると、コントローラー階層全体でプロパティへのアクセスを制限する「ドット ルール」に関する潜在的な問題を回避できます。

例

以前は、モデルを入力にバインドするには、次のようにしました。 use:

<input type="number" ng-model="qty" />

そしてコントローラー内:

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty
})

「コントローラーとして」では、代わりに次を使用します:

<input type="number" ng-model="invoice.qty" />

コントローラー内:

....controller('InvoiceController', function() {
       // do something with this.qty
})

構文の目的

「controller as」の主な目的は、以下によってコードの可読性と構成を強化することです。

• $scope パラメータの削除コントローラから。
• ビュー内のプロパティのソースを明確に示します。
• コントローラ階層全体でのプロパティの管理を容易にします。

以上がAngularJS の「controller as」構文はコードの構成と読みやすさをどのように改善しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。