AngularJS で「controller as」構文を使用する理由

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

はじめに

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

Controller as 構文

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

<code class="javascript">controller('InvoiceController as invoice')</code>

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

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

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

<code class="javascript">// With $scope
function InvoiceController($scope) {
  // Do something with $scope.qty
}

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

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

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

<code class="html">// With $scope
<input type="number" ng-model="qty" />

// With controller as
<input type="number" ng-model="invoice.qty" /></code>

controller as 構文の目的

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

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

以上がAngularJS で「controller as」構文を使用する理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。