AngularJS
Использование AngularJS с TypeScript

Синтаксис

• $ scope: ng.IScope - это путь в машинописном файле для определения типа для конкретной переменной.

Угловые контроллеры в машинописном машиностроении

Как определено в документации AngularJS

Когда контроллер подключается к DOM через директиву ng-controller, Angular будет создавать экземпляр нового объекта Controller, используя указанную конструкторскую функцию контроллера. Новая дочерняя область будет создана и доступна как параметр для инъекции функции-конструктора контроллера как $ scope.

Контроллеры могут быть легко сделаны с использованием классов типов.

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 - отделить контроллер от самой $scope Таким образом, нет необходимости вводить $ scope в качестве зависимости в контроллере.

Традиционный способ:

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

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

Теперь с 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 .

В угловом мы делаем тот же тип вещи. Мы используем контроллер как синтаксис для создания экземпляра.

Использование Bundling / Minification

Способ ввода $ scope в функции конструктора контроллера - это способ продемонстрировать и использовать базовый вариант инъекции угловой зависимости, но не готов к производству, поскольку он не может быть минимизирован. Это потому, что система минимизации изменяет имена переменных и инъекции зависимостей 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);
        }
    }
}

Почему ControllerAs синтаксис?

Функция контроллера

Функция контроллера - это всего лишь функция конструктора JavaScript. Следовательно, когда представление загружает function context ( this ), устанавливается объект контроллера.

Случай 1 :

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

Он создается в 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 делает его более ясным, когда манипулируют oneCtrl.name anotherCtrl.name oneCtrl.name и anotherCtrl.name значительно упрощают идентификацию того, что у вас есть name назначенное несколькими разными контроллерами для разных целей, но если оба используются одинаковым $scope.name и имеют два разных HTML-элемента на странице, которые оба связаны с {{name}} тогда трудно определить, какой из них является контроллером.

• Скрытие области $scope и отображение элементов с контроллера на представление через 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?

• Используйте $scope когда вам нужно получить доступ к одному или нескольким методам $ scope, таким как $watch , $digest , $emit , $http и т. Д.
• ограничивать, какие свойства и / или методы подвергаются переменной $scope , а затем явно передавать их в $scope мере необходимости.