AngularJS => TypeScriptでAngularJSを使用する

構文

$ scope：ng.IScope - これは、特定の変数の型を定義するためにtypescriptにある方法です。

Typescriptの角度制御器

コントローラがng-controllerディレクティブを介してDOMに接続されると、Angularは指定されたControllerのコンストラクタ関数を使用して、新しいControllerオブジェクトをインスタンス化します。新しい子スコープが作成され、コントローラのコンストラクタ関数への注入可能なパラメータとして$ scopeとして利用可能になります。

コントローラは、typescriptクラスを使用して非常に簡単に作成できます。

module App.Controllers {
    class Address {
        line1: string;
        line2: string;
        city: string;
        state: string;
    }
    export class SampleController {
        firstName: string;
        lastName: string;
        age: number;
        address: Address;
        setUpWatches($scope: ng.IScope): void {
            $scope.$watch(() => this.firstName, (n, o) => {
                //n is string and so is o
            });
        };
        constructor($scope: ng.IScope) {
            this.setUpWatches($scope);
        }
    }
}

結果のJavascriptは

var App;
(function (App) {
    var Controllers;
    (function (Controllers) {
        var Address = (function () {
            function Address() {
            }
            return Address;
        }());
        var SampleController = (function () {
            function SampleController($scope) {
                this.setUpWatches($scope);
            }
            SampleController.prototype.setUpWatches = function ($scope) {
                var _this = this;
                $scope.$watch(function () { return _this.firstName; }, function (n, o) {
                    //n is string and so is o
                });
            };
            ;
            return SampleController;
        }());
        Controllers.SampleController = SampleController;
    })(Controllers = App.Controllers || (App.Controllers = {}));
})(App || (App = {}));
//# sourceMappingURL=ExampleController.js.map

コントローラクラスを作成した後、クラスを使用してコントローラに関する角度jsモジュールを簡単に行うことができます

app
 .module('app')
 .controller('exampleController', App.Controller.SampleController)

ControllerAs構文でのコントローラの使用

作成したコントローラは、コントローラを構文controller as使用して、インスタンス化して使用することができます。これは、変数を$scopeではなくコントローラクラスに直接配置しているためです。

controller as someName使用controller as someNameことは、 $scope自体からコントローラを分離することです。したがって、$ scopeをコントローラの依存として注入する必要はありません。

伝統的な方法：

// we are using $scope object.
app.controller('MyCtrl', function ($scope) {
  $scope.name = 'John';
});

<div ng-controller="MyCtrl">
  {{name}}
</div>

さて、 controller as Syntax controller as ：

// we are using the "this" Object instead of "$scope"
app.controller('MyCtrl', function() {
  this.name = 'John';
});

<div ng-controller="MyCtrl as info">
  {{info.name}}
</div>

JavaScriptで「クラス」をインスタンス化する場合は、次のようにします。

var jsClass = function () {
  this.name = 'John';
}
var jsObj = new jsClass();

だから、今、私たちは使用することができますjsObj任意のメソッドやプロパティにアクセスするためにインスタンスをjsClass 。

角度では、同じタイプのthing.weをインスタンス化の構文として使用します。

バンドル/ミニ化の使用

$スコープがコントローラのコンストラクタ関数に注入される方法は、角度依存性注入の基本オプションを実証して使用する方法ですが、縮小できないため、生産準備ができていません。これは、小型化システムが変数名を変更し、アンガの依存関係注入がパラメータ名を使用して何が注入されるべきかを知るためです。したがって、ExampleControllerのコンストラクタ関数は次のコードに縮小されています。

function n(n){this.setUpWatches(n)

$scopeがn変更されました。
これを克服するために、$ inject配列（ string[] ）を追加することができます。その角度のDIは、どの位置にコントローラのコンストラクタ関数を注入するかを知っています。
だから上記のタイスクリプトは

module App.Controllers {
    class Address {
        line1: string;
        line2: string;
        city: string;
        state: string;
    }
    export class SampleController {
        firstName: string;
        lastName: string;
        age: number;
        address: Address;
        setUpWatches($scope: ng.IScope): void {
            $scope.$watch(() => this.firstName, (n, o) => {
                //n is string and so is o
            });
        };
        static $inject : string[] = ['$scope'];
        constructor($scope: ng.IScope) {
            this.setUpWatches($scope);
        }
    }
}

なぜControllerAs構文ですか？

コントローラ機能

コントローラ関数はJavaScriptのコンストラクタ関数だけではありません。したがって、ビューがfunction contextロードすると（ this ）コントローラオブジェクトに設定されます。

ケース1：

this.constFunction = function() { ... }

これは$scopeではなくcontroller object内に作成され$scope 。ビューはコントローラオブジェクトで定義された関数にアクセスできません。

例：

<a href="#123" ng-click="constFunction()"></a> // It will not work

ケース2：

$scope.scopeFunction = function() { ... }

$scope object作成され、 controller objectには作成されません。ビューは$scopeオブジェクトで定義された関数にのみアクセスできます。

例：

<a href="#123" ng-click="scopeFunction()"></a> // It will work

なぜControllerAsですか？

ControllerAs構文は、オブジェクトが操作されている場所をより明確にしますoneCtrl.nameとanotherCtrl.nameを使用すると、異なる目的のために複数の異なるコントローラによって割り当てられたnameを識別するのがはるかに簡単になりますが、両方が同じ$scope.nameを使用し、ページ上の2つの異なるHTML要素が{{name}}バインドされている場合、どのコントローラからのものかを特定することは困難です。
$scopeを隠し、 intermediary object介してコントローラからビューにメンバーを公開しintermediary object 。これをthis.*に設定することで、コントローラからビューに公開したいものだけを公開することができます。
```
  <div ng-controller="FirstCtrl">
      {{ name }}
      <div ng-controller="SecondCtrl">
          {{ name }}
          <div ng-controller="ThirdCtrl">
              {{ name }}
          </div>
      </div>
  </div>
```

ここでは、上記の{{ name }}は使用するのが非常に紛らわしく、どのコントローラーに関連するのかわかりません。

<div ng-controller="FirstCtrl as first">
    {{ first.name }}
    <div ng-controller="SecondCtrl as second">
        {{ second.name }}
        <div ng-controller="ThirdCtrl as third">
            {{ third.name }}
        </div>
    </div>
</div>

なぜ$スコープですか？

使用$scope 、次のような$スコープの1つまたは複数のメソッドにアクセスする必要がある場合$watch 、 $digest 、 $emit 、 $httpなどを
どのプロパティやメソッドが$scopeに公開されているかを制限し、必要に応じて$scope明示的に渡します。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

AngularJS
TypeScriptでAngularJSを使用する

サーチ…

構文