[譯] 如何使用 TypeScript 編寫 AngularJS 的 Controller？

alphahans 發布于2019-08-21 14:14 / 1722人閱讀

摘要：在這篇文章里，我將介紹如何使用去編寫的。一個新的子將被創建并作為變量注入到的構造函數當中。當使用一個構造函數就可以很好地解決問題，因為函數提升起到了很重要的作用。自定義接口類型接著就可以在構造器使用參數獲得強類型和智能支持了。

原文鏈接 : 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;
    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 的強類型特征，最好創建一個包含所有和視圖相關成員和行為的接口。這就可以使為一個 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;
    title: string;
    getMessageCount: () => ng.IPromise;
    getPeople: () => ng.IPromise>;
}

如果你想學到更多有關如何整合 AngularJS 和 TypeScript 的知識，可以看看我的 AngularJS 文章。如果你想學習其他一些特別的東西可以聯系我，我會嘗試寫相關文章的。

云服務器 GPU云服務器使用php編寫的網站如何編寫高性能的javascript angularjs的cdn 購買的域名如何使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87815.html

[譯] 如何使用 TypeScript 編寫自定義 AngularJS 指令？

摘要：在這篇文章中，我將告訴你如何用編寫自定義指令。中的自定義指令讓我們來創建一個只為任何的塊，小部件或者人名在右邊添加標題，子標題和文本的指令。另外，設置了指令的使用級別給元素和屬性，分別使用和表示。原文鏈接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey譯者 : 李林璞...

CloudwiseAPM 2019-08-21 10:56 評論0 收藏0
[譯]學習如何去學習 JavaScript - 5 個你應該如何花在學習 JS 上時間的建議

摘要：擁抱異步編程縱觀發展史也可以說成開發的發展史，你會發現異步徹底改變了這場游戲。可以這么說，異步編程已成為開發的根基。這也是你應盡早在上投入大量時間的一處核心知識點，這其中包含和等重要概念。這也是最突出的一項貢獻。原文地址：Medium - Learning How to Learn JavaScript. 5 recommendations on how you should spend ...

wanglu1209 2019-05-23 13:55 評論0 收藏0
[譯] 你真的知道 Angular 單向數據流嗎

摘要：所以，單向數據流的意思是指在變更檢測期間屬性綁定變更的架構。相反，輸出綁定過程并沒有在變更檢測期間內運行，所以它沒有把單向數據流轉變為雙向數據流。說的單向數據流說的是服務層，而不是視圖層嗷。原文鏈接： Do you really know what unidirectional data flow means in?Angular 關于單向數據流，還可以參考這篇文章，且文中還有 y...

fox_soyoung 2019-08-22 15:42 評論0 收藏0
[譯] 通過 Webpack 實現 AngularJS 的延遲加載

摘要：雖然這些東西都是非常棒的，但是它們都不是實現延遲加載所必需的東西。我們通過的配置對象中的屬性就可以實現延遲加載。單元測試的技巧把改成是全局依賴并不意味著你應該從控制器中刪除它。因為在單元測試中，你只會加載這一個控制器而非整個應用模塊。原文鏈接：http://michalzalecki.com/lazy-load-angularjs-with-webpack/ 隨著你的單頁應用擴大，...

Zhuxy 2019-08-19 17:42 評論0 收藏0
【譯】《精通使用AngularJS開發Web App》（二） --- 框架概覽，雙向數據綁定，MVC

摘要：本書的這一部分將為隨后的章節打下基礎，會涵蓋模板，模塊化，和依賴注入。本書的小例子中我們會使用未經壓縮的，開發友好的版本，在的上。作用域也可以針對特定的視圖來擴展數據和特定的功能。上一篇：【譯】《精通使用AngularJS開發Web App》（一）下一篇：【譯】《精通使用AngularJS開發Web App》（三）原版書名：Mastering Web Application D...

geekidentity 2019-08-19 14:26 評論0 收藏0