Angular Controller as Syntax と vm 変数の調査

Angular Controller as Syntax と vm 変数の調査

開発者が「'controller as' 構文とは何で、コントローラー作成の$scopeオブジェクト アプローチとどのように異なるのか」と尋ねるのをよく耳にします。この投稿では、構文としてのコントローラーについて学び、それをコントローラー作成の$scopeオブジェクトアプローチと比較します。

5min read

開発者が「'controller as' 構文とは何で、コントローラー作成の$scopeオブジェクト アプローチとどのように異なるのか」と尋ねるのをよく耳にします。この投稿では、構文としてのコントローラーについて学び、それをコントローラー作成の$scopeオブジェクトアプローチと比較します。

AngularJS 1.2 では、"controller as" 構文が導入され、コントローラー コードの作成がより読みやすくなりました。以下では、両方のアプローチを実際に見てみましょう。

$scopeオブジェクトを使用したコントローラーの作成

通常、以下のリストに示すように、$scopeオブジェクトを使用してコントローラーを作成します。

myApp.controller("AddController", function ($scope) {
    $scope.number1;
    $scope.number2;
    $scope.result;
    $scope.add = function () {
        $scope.result = $scope.number1 + $scope.number2;
    }
});

上記では、相互に通信する$scopeオブジェクトコントローラーとビューを使用して、3つの変数と1つの動作を持つAddControllerを作成しています。$scope オブジェクトは、データと動作をビューに渡すために使用されます。ビューとコントローラーを接着します。

基本的に、$scopeオブジェクトは次のタスクを実行します。

  1. コントローラーからビューにデータを渡す
  2. コントローラーからビューに動作を渡す
  3. コントローラーとビューを接着します
  4. ビューが変更されると$scopeオブジェクトが変更され、$scopeオブジェクトのプロパティが変更されるとビューが変更されます

$scopeオブジェクトにプロパティをアタッチして、データと動作をビューに渡します。コントローラーで$scopeオブジェクトを使用する前に、それを依存関係としてコントローラー関数に渡す必要があります。

"Controller as" 構文の使用 & vm

上記のコントローラーは、コントローラーを構文として使用し、vm変数を以下のリストに示すように書き直すことができます。

myApp.controller("AddVMController", function () {
    var vm = this;
    vm.number1 = undefined;
    vm.number2=undefined;
    vm.result =undefined;
    vm.add = function () {
        vm.result = vm.number1 + vm.number2;
    }
});

基本的には、これを変数vmに代入し、それにプロパティと動作をアタッチします。 このビューでは、構文としてcontrollerを使用してAddVmControllerにアクセスできます。これを以下のリストに示しています。

<div ng-controller="AddVMController as vm">
            <input ng-model="vm.number1" type="number" />
            <input ng-model="vm.number2" type="number" />
            <button class="btn btn-default" ng-click="vm.add()">Add</button>
            <h3>{{vm.result}}</h3>
  </div>

もちろん、コントローラの「vm」以外の名前を構文として使用することもできます。内部的には、AngularJSは$scopeオブジェクトを作成し、プロパティと動作をアタッチします。ただし、コントローラーを構文として使用すると、コントローラーのコードは非常にクリーンになり、ビューにはエイリアス名のみが表示されます。

以下は、コントローラーを構文として使用するためのいくつかの手順です。

  1. オブジェクトなしでコントローラーを作成します$scope。
  2. これをローカル変数に代入します。私はvmとして変数名を好みました、あなたはあなたの選択の任意の名前を選ぶことができます。
  3. データと動作を vm 変数にアタッチします。
  4. ビューで、コントローラーを構文として使用してコントローラーにエイリアスを指定します。
  5. エイリアスには任意の名前を付けることができます。私はネストされたコントローラで作業していない限り、vmを使用することを好みます。

コントローラーを作成する際に、$scopeオブジェクトアプローチまたはコントローラーを構文として使用することの直接的な利点も欠点もありません。これは純粋に選択の問題ですが、コントローラーを構文として使用すると、コントローラーの JavaScript コードが読みやすくなり、このコンテキストに関連する問題を防ぐことができます。

$scopeオブジェクトアプローチのネストされたコントローラー

次のリストに示すように、2 つのコントローラーがあります。

myApp.controller("ParentController", function ($scope) {
    $scope.name = "DJ";
    $scope.age = 32;
});
myApp.controller("ChildController", function ($scope) {
    $scope.age = 22;
    $scope.country = "India";
});

プロパティ "age" は両方のコントローラー内にあり、ビュー上では、これらの 2 つのコントローラーを以下のリストに示すようにネストできます。

<div ng-controller="ParentController">
    <h2>Name :{{name}}</h2>
    <h3>Age:{{age}}</h3>

    <div ng-controller="ChildController">
        <h2>Parent Name :{{name}}</h2>
        <h3>Parent Age:{{$parent.age}}</h3>
        <h3>Child Age:{{age}}</h3>
        <h3>Country:{{country}}</h3>
    </div>
</div>

ご覧のとおり、親コントローラーの age プロパティにアクセスするために、$parent.age を使用しています。ここでは、文脈の分離はあまり明確ではありません。しかし、コントローラーを構文として使用すると、ネストされたコントローラーをより洗練された方法で操作できます。次のリストに示すように、コントローラーがあるとします。

myApp.controller("ParentVMController", function () {
    var vm = this;
    vm.name = "DJ";
    vm.age = 32;
});
myApp.controller("ChildVMController", function () {
    var vm = this;
    vm.age = 22;
    vm.country = "India";
 
});

ビューでは、これら 2 つのコントローラーは、次のリストに示すようにネストできます。

<div ng-controller="ParentVMController as parent">
    <h2>Name :{{parent.name}}</h2>
    <h3>Age:{{parent.age}}</h3>

    <div ng-controller="ChildVMController as child">
        <h2>Parent Name :{{parent.name}}</h2>
        <h3>Parent Age:{{parent.age}}</h3>
        <h3>Child Age:{{child.age}}</h3>
        <h3>Country:{{child.country}}</h3>
    </div>
</div>

コントローラの構文では、より読みやすいコードがあり、$parent構文を使用する代わりに、親コントローラのエイリアス名を使用して親プロパティにアクセスできます。

この投稿を締めくくるのは、コントローラーを構文として使用するか、$scopeオブジェクトとして使用するかは純粋にあなたの選択であると言って締めくくります。どちらにも大きな利点も欠点もありませんが、単に、コンテキストで制御できる構文としてのコントローラーは、ビュー上のネストされたコントローラーの明確な分離を考えると、操作が少し簡単になります。

この投稿がお役に立てば幸いです–読んでくれてありがとう、そしてハッピーコーディング!

操作方法
デモを予約