[译] 如何使用 TypeScript 编写 AngularJS 的 Controller?
AngularJS 有许多强大的特性,其中之一便是 Controller。在这篇文章里,我将介绍如何使用 TypeScript 去编写 AngularJS 的 Controller。 Controller 通常用来增强 AngularJS 作用域(Scope)。当一个 Controller 通过 有两个选项将 Controller 连接到视图当中,一种是 Controller 作为语法,另外一种是使用 要想知道类型定义,看看这个令人吃惊的仓库,它收集了几乎所有流行的 JavaScript 库。这些类型定义可以让我们得到任何编译时错误和 IDE 的智能支持。我使用 Visual Studio 和 Visual Code,它们都对 TypeScript 有很好的支持。 正如上面提到的,AngularJS 只要在被请求的时候都将创建一个Controller 实例。所以,一个 Controller 可以使用 TypeScript 里的类去定义,就像我们所知道的,一个类是可以被实例化的。让我们来使用在视图里 Controller 作为语法的方法来定义一个 Dashboard Controller。下面的代码没有使用 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 定义实现变得容易,而且这个接口如果需要就可以做成一个抽象方法在其他地方使用了。所以,上面代码里我创建了一个名为 接着,名为 类所提到的依赖都是相当直接了当的,假设 真正重要的是要注意使用 Angular 的模块 API 注册这个 Controller 的位置。上面的代码里,首先定义了类然后完成其注册。如果这个顺序交换的话,Angular 就将找不到我们这个 Controller 的实现了。当使用一个 JavaScript 构造函数就可以很好地解决问题,因为函数提升起到了很重要的作用。 下面是这个 Controller 如何在 Angular-UI UI-Router 中使用的代码片段,但如果你想使用 Angular 内置路由模块的话概念是一样的。注意,这只展示了使用 config: { url: '/',templateUrl: 'app/dashboard/dashboard.html',controller: 'DashboardController',controllerAs: 'vm',title: 'dashboard',} 如果你想使用 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 文章。如果你想学习其他一些特别的东西可以联系我,我会尝试写相关文章的。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |