AngularJS
TypeScript와 함께 AngularJS 사용

통사론

• $ scope : ng.IScope - 이것은 특정 변수에 대한 유형을 정의하기 위해 타이프 스크립트에서 사용하는 방법입니다.

Typescript의 각도 조절기

AngularJS 문서에 정의 된대로

컨트롤러가 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);
        }
    }
}

결과 자바 스크립트는 다음과 같습니다.

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는 controller as Syntax 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로 사용하면 다음 과 같습니다.

// 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>

자바 스크립트에서 "클래스"를 인스턴스화하면 다음과 같이 할 수 있습니다.

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

그래서, 지금 우리가 사용할 수있는 jsObj 모든 메서드 또는 속성에 액세스 할 인스턴스를 jsClass .

각도에서, 우리는 같은 유형의 thing.we 인스턴스화를위한 구문으로 컨트롤러를 사용합니다.

번들 / 축소 사용

컨트롤러의 생성자 함수에 $ scope를 삽입하는 방법은 각도 의존성 주입 의 기본 옵션을 보여주고 사용하는 방법이지만 축소 할 수 없기 때문에 생산 준비가되지 않았습니다. 왜냐하면 minification 시스템이 변수 이름을 바꾸고 anguar의 의존성 주입이 무엇을 주입해야 하는지를 알기 위해 매개 변수 이름을 사용하기 때문입니다. 예를 들어 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);
        }
    }
}

왜 컨트롤러 As 구문?

컨트롤러 기능

컨트롤러 함수는 JavaScript 생성자 함수 일뿐입니다. 도면을로드 할 때 따라서, function context ( this ) 제어기 오브젝트로 설정된다.

사례 1 :

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

$scope 아닌 controller object 만들어집니다. 뷰는 컨트롤러 객체에 정의 된 함수에 액세스 할 수 없습니다.

예 :

<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 하고 두 페이지가 {{name}} 바인딩 된 두 개의 다른 HTML 요소가 있다면 어떤 컨트롤러에서 가져온 것인지를 식별하기 어렵습니다.

• $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 사용하면 다음과 같은 $ 범위 중 하나 이상의 방법에 액세스해야하는 경우 $watch , $digest , $emit , $http 등
• $scope 노출되는 속성 및 / 또는 메서드를 제한하고 필요에 따라 $scope 명시 적으로 전달합니다.