AngularJS の "controller as" 構文を理解する

はじめに

AngularJS では、コントローラーを定義するための新しい構文 "controller as" が導入されました。その目的についての質問。この記事は、この構文の背後にある理論的根拠とその利点を明確にすることを目的としています。

Controller as 構文

「controller as」構文を使用すると、コントローラーをインスタンス化し、現在の変数に割り当てることができます。範囲。例:

controller('InvoiceController as invoice')

このコードは、Angular に InvoiceController のインスタンスを作成し、それを現在のスコープ内の請求書変数に格納するように指示します。

コントローラーから $scope を削除

「controller as」構文との顕著な違いの 1 つは、コントローラー定義から $scope パラメーターが削除されることです。これにより、よりクリーンで簡潔なコントローラーが可能になります:

// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

// With controller as
function InvoiceController() {
  // Do something with this.qty
}

ビューでのエイリアスの割り当て

コントローラーから $scope を削除するとコードが簡素化されますが、ビューでエイリアスを指定する必要があります:

// With $scope


// With controller as

controller as 構文の目的

「controller as」構文は主に次の理由で導入されました。

• $scope の削除: 開発者の中には、$scope 構文がプロパティのソースを難読化すると信じて、その構文を避けることを好む人もいます。
• プロパティの起源の明確性: ビュー内でエイリアスを使用すると、どのプロパティがどのコントローラーに属するかが明確になります。これは、コントローラーをネストする場合に特に便利です。
• ドット ルールの問題の回避: "controller as" 構文は、プロパティへのアクセスを困難にする可能性がある AngularJS の "ドット ルール" の問題を回避するのに役立ちます。親コントローラーから。これにより、コントローラーのプロパティへの明確かつ階層的なアクセスが可能になります。