原文链接 : How to write AngularJS controller using TypeScript?
原文作者 : Siddharth Pandey
译者 : 李林璞（web前端范畴）
译者注：翻译若有疏漏，迎接指出！谢谢！转载请保存此头部。

AngularJS 有很多壮大的特性，其中之一就是 Controller。在这篇文章里，我将引见怎样运用 TypeScript 去编写 AngularJS 的 Controller。

Controller 一般用来加强 AngularJS 作用域（Scope）。当一个 Controller 经由过程 ng-controller 指令连接到 DOM 上的时刻，Angular 将运用指定的 Conroller 函数初始化一个新的 Controller 对象。一个新的子 scope 将被建立并作为 $scope 变量注入到 Controller 的组织函数当中。

有两个选项将 Controller 连接到视图当中，一种是 Controller 作为语法，别的一种是运用 $scope。假如运用 Controller 语法，Controller 实例将被分派一个在新作用域上的属性。

要想晓得范例定义，看看这个令人吃惊的堆栈，它收集了险些一切盛行的 JavaScript 库。这些范例定义能够让我们取得任何编译时毛病和 IDE 的智能支撑。我运用 Visual Studio 和 Visual Code，它们都对 TypeScript 有很好的支撑。

正如上面提到的，AngularJS 只需在被要求的时刻都将建立一个Controller 实例。所以，一个 Controller 能够运用 TypeScript 里的类去定义，就像我们所晓得的，一个类是能够被实例化的。让我们来运用在视图里 Controller 作为语法的要领来定义一个 Dashboard Controller。下面的代码没有运用 $scope 效劳。

interface IDashboardVm {
    news: { title: string, description: string };
    messageCount: number;
    people: Array<any>;
    title: string;
    getMessageCount: () => ng.IPromise<number>;
    getPeople: () => ng.IPromise<Array<any>>;
}

class DashboardController implements IDashboardVm {
    static $inject: Array<string> = ['dataservice'];
    constructor(private dataservice: app.core.IDataService) {
        this.getMessageCount();
        this.getPeople();
    }

    news = {
        title: 'News',
        description: 'Internal server team is excited about AngularJS, TypeScript & JavaScript'
    };
    messageCount: number = 0;
    people: Array<any> = [];
    hubsSummary: Array<any> = [];
    title: string = 'Dashboard';

    getMessageCount() {
        return this.dataservice.getMessageCount().then((data) => {
            this.messageCount = data;
            return this.messageCount;
        });
    }

    getPeople() {
        return this.dataservice.getPeople().then((data) => {
            this.people = data;
            return this.people;
        });
    }
}

angular.module('app.dashboard').controller('DashboardController', DashboardController);

应用 TypeScript 的强范例特性，最好建立一个包括一切和视图相干成员和行动的接口。这就能够使为一个 Controller 定义完成变得轻易，而且这个接口假如须要就能够做成一个笼统要领在其他处所运用了。所以，上面代码里我建立了一个名为 IDashboardVm 的接口。

接着，名为 DashboardController 的 Controller 完成了这个接口并给每一个成员定义了默许状况。看这个类的静态变量 $inject，它通知了 AngularJS DI 在初始化这个 Controller 之前注入哪些依靠。然后组织器在须要的依靠的雷同递次定义了参数当它们被注入到那些参数的时刻。

类所提到的依靠都是相称直接了当的，假定 dataservice 是一个自定义的 AngularJS 效劳，它封装了一切对效劳器提议的 HTTP 要求。依据接口里的每一个定义，接下来我们要为这些行动定义完成，内部挪用 dataservice 要领。它运用了 promises 去返回待会儿要分派到 Controller 成员上去掌握状况的相应。

真正主要的是要注重运用 Angular 的模块 API 注册这个 Controller 的位置。上面的代码里，起首定义了类然后完成其注册。假如这个递次交流的话，Angular 就将找不到我们这个 Controller 的完成了。当运用一个 JavaScript 组织函数就能够很好地解决问题，由于函数提拔起到了很主要的作用。

下面是这个 Controller 怎样在 Angular-UI UI-Router 中运用的代码片断，但假如你想运用 Angular 内置路由模块的话观点是一样的。注重，这只展现了运用 controllerAs 语法举行设置的部份。

config: {
    url: '/',
    templateUrl: 'app/dashboard/dashboard.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    title: 'dashboard',
}

假如你想运用 $scope 效劳的话，那末就能够像下面的代码片断那样扩大上面的接口。这将确保一切 IScope 有的成员能够经由过程接口访问到。运用这个要领还须要转变一下 Controller 类的完成，由于如今它须要 $scope 效劳的依靠了。自定义接口范例接着就能够在组织器运用 $scope 参数取得强范例和智能支撑了。

interface IDashboardVm extends angular.IScope {
    news: { title: string, description: string };
    messageCount: number;
    people: Array<any>;
    title: string;
    getMessageCount: () => ng.IPromise<number>;
    getPeople: () => ng.IPromise<Array<any>>;
}

假如你想学到更多有关怎样整合 AngularJS 和 TypeScript 的学问，能够看看我的 AngularJS 文章。假如你想进修其他一些迥殊的东西能够联络我，我会尝试写相干文章的。