資訊專欄INFORMATION COLUMN
摘要：在這篇文章里，我將介紹如何使用去編寫的。一個(gè)新的子將被創(chuàng)建并作為變量注入到的構(gòu)造函數(shù)當(dāng)中。當(dāng)使用一個(gè)構(gòu)造函數(shù)就可以很好地解決問題，因?yàn)楹瘮?shù)提升起到了很重要的作用。自定義接口類型接著就可以在構(gòu)造器使用參數(shù)獲得強(qiáng)類型和智能支持了。
原文鏈接 : How to write AngularJS controller using TypeScript?
原文作者 : Siddharth Pandey
譯者 : 李林璞（web前端領(lǐng)域）
譯者注：翻譯如有疏漏，歡迎指出！感謝！轉(zhuǎn)載請(qǐng)保留此頭部。
AngularJS 有許多強(qiáng)大的特性，其中之一便是 Controller。在這篇文章里，我將介紹如何使用 TypeScript 去編寫 AngularJS 的 Controller。
Controller 通常用來增強(qiáng) AngularJS 作用域（Scope）。當(dāng)一個(gè) Controller 通過 ng-controller 指令連接到 DOM 上的時(shí)候，Angular 將使用指定的 Conroller 函數(shù)初始化一個(gè)新的 Controller 對(duì)象。一個(gè)新的子 scope 將被創(chuàng)建并作為 $scope 變量注入到 Controller 的構(gòu)造函數(shù)當(dāng)中。
有兩個(gè)選項(xiàng)將 Controller 連接到視圖當(dāng)中，一種是 Controller 作為語法，另外一種是使用 $scope。如果使用 Controller 語法，Controller 實(shí)例將被分配一個(gè)在新作用域上的屬性。
要想知道類型定義，看看這個(gè)令人吃驚的倉(cāng)庫(kù)，它收集了幾乎所有流行的 JavaScript 庫(kù)。這些類型定義可以讓我們得到任何編譯時(shí)錯(cuò)誤和 IDE 的智能支持。我使用 Visual Studio 和 Visual Code，它們都對(duì) TypeScript 有很好的支持。
正如上面提到的，AngularJS 只要在被請(qǐng)求的時(shí)候都將創(chuàng)建一個(gè)Controller 實(shí)例。所以，一個(gè) Controller 可以使用 TypeScript 里的類去定義，就像我們所知道的，一個(gè)類是可以被實(shí)例化的。讓我們來使用在視圖里 Controller 作為語法的方法來定義一個(gè) Dashboard Controller。下面的代碼沒有使用 $scope 服務(wù)。
interface IDashboardVm {
news: { title: string, description: string };
messageCount: number;
people: Array;
title: string;
getMessageCount: () => ng.IPromise;
getPeople: () => ng.IPromise>;
}
class DashboardController implements IDashboardVm {
static $inject: Array = ["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 = [];
hubsSummary: Array = [];
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 的強(qiáng)類型特征，最好創(chuàng)建一個(gè)包含所有和視圖相關(guān)成員和行為的接口。這就可以使為一個(gè) Controller 定義實(shí)現(xiàn)變得容易，而且這個(gè)接口如果需要就可以做成一個(gè)抽象方法在其他地方使用了。所以，上面代碼里我創(chuàng)建了一個(gè)名為 IDashboardVm 的接口。
接著，名為 DashboardController 的 Controller 實(shí)現(xiàn)了這個(gè)接口并給每個(gè)成員定義了默認(rèn)狀態(tài)?？催@個(gè)類的靜態(tài)變量 $inject，它告訴了 AngularJS DI 在初始化這個(gè) Controller 之前注入哪些依賴。然后構(gòu)造器在需要的依賴的相同順序定義了參數(shù)當(dāng)它們被注入到那些參數(shù)的時(shí)候。
類所提到的依賴都是相當(dāng)直接了當(dāng)?shù)?，假設(shè) dataservice 是一個(gè)自定義的 AngularJS 服務(wù)，它封裝了所有對(duì)服務(wù)器發(fā)起的 HTTP 請(qǐng)求。根據(jù)接口里的每個(gè)定義，接下來我們要為這些行為定義實(shí)現(xiàn)，內(nèi)部調(diào)用 dataservice 方法。它使用了 promises 去返回待會(huì)兒要分配到 Controller 成員上去控制狀態(tài)的響應(yīng)。
真正重要的是要注意使用 Angular 的模塊 API 注冊(cè)這個(gè) Controller 的位置。上面的代碼里，首先定義了類然后完成其注冊(cè)。如果這個(gè)順序交換的話，Angular 就將找不到我們這個(gè) Controller 的實(shí)現(xiàn)了。當(dāng)使用一個(gè) JavaScript 構(gòu)造函數(shù)就可以很好地解決問題，因?yàn)楹瘮?shù)提升起到了很重要的作用。
下面是這個(gè) Controller 如何在 Angular-UI UI-Router 中使用的代碼片段，但如果你想使用 Angular 內(nèi)置路由模塊的話概念是一樣的。注意，這只展示了使用 controllerAs 語法進(jìn)行配置的部分。
config: {
url: "/",
templateUrl: "app/dashboard/dashboard.html",
controller: "DashboardController",
controllerAs: "vm",
title: "dashboard",
}
如果你想使用 $scope 服務(wù)的話，那么就可以像下面的代碼片段那樣擴(kuò)展上面的接口。這將確保所有 IScope 有的成員可以通過接口訪問到。使用這個(gè)方法還需要改變一下 Controller 類的實(shí)現(xiàn)，因?yàn)楝F(xiàn)在它需要 $scope 服務(wù)的依賴了。自定義接口類型接著就可以在構(gòu)造器使用 $scope 參數(shù)獲得強(qiáng)類型和智能支持了。
interface IDashboardVm extends angular.IScope {
news: { title: string, description: string };
messageCount: number;
people: Array;
title: string;
getMessageCount: () => ng.IPromise;
getPeople: () => ng.IPromise>;
}
如果你想學(xué)到更多有關(guān)如何整合 AngularJS 和 TypeScript 的知識(shí)，可以看看我的 AngularJS 文章。如果你想學(xué)習(xí)其他一些特別的東西可以聯(lián)系我，我會(huì)嘗試寫相關(guān)文章的。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87815.html
摘要：在這篇文章中，我將告訴你如何用編寫自定義指令。中的自定義指令讓我們來創(chuàng)建一個(gè)只為任何的塊，小部件或者人名在右邊添加標(biāo)題，子標(biāo)題和文本的指令。另外，設(shè)置了指令的使用級(jí)別給元素和屬性，分別使用和表示。 原文鏈接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey譯者 : 李林璞...
摘要：擁抱異步編程縱觀發(fā)展史也可以說成開發(fā)的發(fā)展史，你會(huì)發(fā)現(xiàn)異步徹底改變了這場(chǎng)游戲。可以這么說，異步編程已成為開發(fā)的根基。這也是你應(yīng)盡早在上投入大量時(shí)間的一處核心知識(shí)點(diǎn)，這其中包含和等重要概念。這也是最突出的一項(xiàng)貢獻(xiàn)。 原文地址：Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...
摘要：所以，單向數(shù)據(jù)流的意思是指在變更檢測(cè)期間屬性綁定變更的架構(gòu)。相反，輸出綁定過程并沒有在變更檢測(cè)期間內(nèi)運(yùn)行，所以它沒有把單向數(shù)據(jù)流轉(zhuǎn)變?yōu)殡p向數(shù)據(jù)流。說的單向數(shù)據(jù)流說的是服務(wù)層，而不是視圖層嗷。 原文鏈接： Do you really know what unidirectional data flow means in?Angular 關(guān)于單向數(shù)據(jù)流，還可以參考這篇文章，且文中還有 y...
摘要：雖然這些東西都是非常棒的，但是它們都不是實(shí)現(xiàn)延遲加載所必需的東西。我們通過的配置對(duì)象中的屬性就可以實(shí)現(xiàn)延遲加載。單元測(cè)試的技巧把改成是全局依賴并不意味著你應(yīng)該從控制器中刪除它。因?yàn)樵趩卧獪y(cè)試中，你只會(huì)加載這一個(gè)控制器而非整個(gè)應(yīng)用模塊。 原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁(yè)應(yīng)用擴(kuò)大，...
摘要：本書的這一部分將為隨后的章節(jié)打下基礎(chǔ)，會(huì)涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會(huì)使用未經(jīng)壓縮的，開發(fā)友好的版本，在的上。作用域也可以針對(duì)特定的視圖來擴(kuò)展數(shù)據(jù)和特定的功能。 上一篇：【譯】《精通使用AngularJS開發(fā)Web App》（一） 下一篇：【譯】《精通使用AngularJS開發(fā)Web App》（三） 原版書名：Mastering Web Application D...
閱讀 3311·2021-09-09 11:39
閱讀 1240·2021-09-09 09:33
閱讀 1139·2019-08-30 15:43
閱讀 557·2019-08-29 14:08
閱讀 1742·2019-08-26 13:49
閱讀 2390·2019-08-26 10:09
閱讀 1556·2019-08-23 17:13
閱讀 2294·2019-08-23 12:57
