在Angular 2中創建組件，並用打字稿和ES5創建

核心要點

• Angular 2.0 使用 TypeScript（JavaScript 的超集）來優化性能，提升頁面速度和工作流程自動化。 TypeScript 允許開發人員使用類型信息來註釋 JavaScript 代碼，從而幫助捕獲代碼庫中的錯誤。
• Angular 2.0 引入了組件的概念，組件是可重用的代碼塊，包含視圖和邏輯。組件取代了指令成為框架的主要元素，確保應用程序一個部分的代碼不會干擾另一個部分的代碼。
• 使用 TypeScript 在 Angular 2.0 中創建組件涉及定義組件類並從 Angular 導入必要的函數。然後，使用 @Component 裝飾器裝飾該類，並將其導出以便在應用程序的其他部分使用。
• Angular 2.0 也支持 ES5，這是在大多數瀏覽器中運行的標準 JavaScript 版本。要在 Angular 2.0 中使用 ES5 創建組件，開發人員可以使用 ng 對像上的方法來定義組件並添加功能。然後可以直接在瀏覽器中運行代碼，無需服務器。

本文由 Stephan Max、Jeff Smith 和 Ravi Kiran 共同評審。感謝所有 SitePoint 的同行評審員，使 SitePoint 的內容達到最佳狀態！

隨著年末將至，Angular 團隊比以往任何時候都更接近於發布 Angular 2.0 的穩定版本。這將重塑 Angular 應用程序的開發方式，但會帶來更好的效果。在本文中，我將向您展示 Angular 2.0 中的一些核心概念以及如何使用它們。具體來說，我將引導您完成從頭到尾構建 Angular 2 組件的過程。首先，我們將詳細了解如何使用 TypeScript 完成此操作，然後我們將遷移 Angular 組件，使其可以使用純 ES5 運行。

本教程的代碼可以在我們的 GitHub 代碼庫中找到。該代碼庫有兩個分支，一個用於 TypeScript 版本，一個用於 ES5 版本。如果您想克隆特定分支，請使用 git clone <url> --branch <branch></branch></url>。

什麼是組件？

在過去幾個月裡，JavaScript 中組件的使用量大幅增加。它們用於 React、Knockout、Ember 等項目，因此 Angular 將它們整合到 2.0 版本中也就不足為奇了。代碼模塊化一直是 Angular 團隊關注的重點，而組件的使用也突顯了這一點，因為它們允許我們將代碼分解成封裝的塊。

那麼什麼是組件呢？它本質上是一段可以在整個應用程序中重用的代碼。它包含兩部分：視圖和邏輯。通過利用 Angular 開發團隊對組件的關注，我們可以利用一些非常強大的功能。 Angular 2 使創建由不同組件組成的動態應用程序變得非常容易，這些組件已經取代了指令成為框架的核心。在 Angular 2 中，指令是輕量級的組件，它們僅用於向 DOM 添加一些功能。現在，Angular 開發人員不必擔心由於隔離 $scope 相關的衝突問題而弄亂應用程序。相反，使用組件是一種確保應用程序一個部分的代碼不會干擾另一個部分代碼的方法。

TypeScript

Angular 2.0 已創建為使用 TypeScript，它是 JavaScript 的超集。 Angular 的開發人員花費了大量時間來完成此版本。他們努力優化性能，包括頁面速度和工作流程自動化。 TypeScript 類似於其他代碼轉換器，允許開發人員編寫可以輕鬆轉換為有效 JavaScript 的代碼。話雖如此，它在過去一年中變得越來越流行，因此 Angular 團隊決定使用它來創建框架。

使用 TypeScript 的好處之一是其類型系統，它允許開發人員使用類型信息來註釋 JavaScript。此註釋代碼將通過編譯器運行，這有助於捕獲錯誤，否則這些錯誤會潛伏在代碼庫中，等待用戶發現。現在讓我們看看 TypeScript 的實際應用。

下面，我從 TJ Van Toll 的文章《TypeScript 的興起》中提取了一個示例。在這個函數中，我們看到高度和寬度參數都應為數字類型。函數主體之前的 : number 指定返回類型，它也是數字類型。因此，傳遞給此函數的任何非數字內容都會導致編譯器在編譯時拋出錯誤。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

類型聲明有助於我們記錄 API 並使我們的代碼隨著時間的推移更易於維護。

安裝

將 TypeScript 編譯為 JavaScript 的過程非常簡單。首先從 npm 獲取 TypeScript 包：

npm install -g typescript

安裝完成後，將 TypeScript 編譯為 JavaScript 就如同從命令行運行以下命令一樣簡單（TypeScript 文件使用 .ts 擴展名保存）：

tsc <filename.ts>

現在，讓我們看看 Angular 2 如何利用 TypeScript 的強大功能來輕鬆創建自定義組件。我們第一個示例的代碼可以在我們 GitHub 代碼庫的 TypeScript 分支中找到。

在 TypeScript 中創建組件

因為 TypeScript 是 JavaScript 的超集，所以任何有效的 JavaScript 都可以在 .ts 文件中正常工作。通過使用 TypeScript，開發人員能夠擴展其 JavaScript 代碼以利用最新的 ES6 功能。在此示例中，我們將使用類。

下面，我使用 TypeScript 代碼創建了一個組件。我首先使用 ES6 導入語法導入 Angular。在此示例中，我們將定義一個組件以及該組件的視圖。完成後，我們將需要 Angular 的 bootstrap 函數才能使 Angular 運行代碼。在此代碼中，我們將看到 @ 符號，它用於告訴 Angular 我們正在嘗試構建的內容。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

因為 Angular 2 是構建在 TypeScript 之上的，所以框架識別我們的 @Component 註解，並知道我們正在嘗試創建一個新組件。此外，它還告訴 Angular，每當它在我們的 HTML 中看到 <user-name></user-name> 時，我們都想要實例化一個組件。

如上所述，組件包含兩部分：

• 視圖
• 邏輯

由於組件已定義，因此我們現在需要創建視圖和邏輯。

在我們的組件之後，我們可以添加一些 TypeScript 代碼來定義我們的視圖。讓我們看看上面代碼的延續，並親眼看看 Angular 使向自定義組件添加視圖的過程有多麼容易：

npm install -g typescript

現在，當我將 <user-name></user-name> 添加到我的 index.html 文件時，此模板將被注入到 DOM 中。話雖如此，我們的組件的邏輯部分是空的，因為我們的 UserComponent 類不包含任何代碼。

在上面的示例中，我只有一個空類。但是現在，我將創建一個 name 變量，然後使用表達式在我們的視圖中呈現此 name 變量：

tsc <filename.ts>

您還將看到我前面提到的 bootstrap 函數。儘管它們共享一個名稱，但此函數用於啟動或 引導 我們的 Angular 應用程序，並且與 Twitter BootStrap 框架無關。如果我們忘記將我們的組件傳遞到此函數中，Angular 將不知道加載我們的組件。

我還想快速注意的是，我們的應用程序必須使用某種服務器才能正確顯示。如果直接訪問它，則 System.js 將無法加載我們的主模塊，該模塊包含我們的代碼。

現在，使用此示例的存儲庫的用戶可以在根目錄中運行 node app.js。運行此命令後，我們可以通過訪問 https://www.php.cn/link/f74d6ef882234fd34400a296b1da6149 來查看我們的組件的實際效果。希望這能說明 Angular 使向組件添加邏輯變得多麼容易！

將我們的組件遷移到 ES5

對於那些希望使用 ES5 利用 2.0 強大功能的用戶，Angular 2 團隊創建了一個可以簡單地放入網站中的框架版本。這是必要的，因為 ES5 沒有模塊系統，因此我們需要某種自執行捆綁包。如果您查看了第一個示例的代碼，您會看到我需要向應用程序中添加三個不同的腳本標籤。在此示例中，我們只需要添加以下腳本。

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

借助此腳本，開發人員可以使用他們對 ES5 的知識，而不必擔心犧牲框架的任何功能。讓我們看看如何使用 ES5 構建 Angular 組件。此示例的代碼可以在我們 GitHub 代碼庫的 ES5 分支中找到。也就是說，讓我們開始吧！

為了使用 ES5 而不是 TypeScript 來重新創建組件，我將使用一些不同的方法。這與我在上面示例中所做的基本上相同，但是我們將使用 ng 對像上的方法鏈接，而不是使用 @ 符號。這在下面的代碼中顯示：

npm install -g typescript

現在，我們可以繼續向我們的組件添加功能，這些功能將在我們的應用程序讀取 <user-name></user-name> 選擇器時顯示。

讓我們使用 View 和 Class 方法。在我們的 View 方法中，我們只需要傳入我們之前使用的模板字符串。由於 ES5 中不支持類，因此我們將通過創建一個簡單的構造函數來模擬我們在 Class 方法中使用它們，該構造函數將包含我們的 name 屬性。

tsc <filename.ts>

但是我們缺少一樣東西。在我們的 TypeScript 示例中，我們使用了 bootstrap 函數來啟動我們的 Angular 代碼。以下是如何在 ES5 中執行相同操作的方法：

import { Component, View, bootstrap } from 'angular2/angular2';
@Component({
  selector: 'user-name'
})

這應該放在我們的自定義應用程序代碼下方。這將導致 Angular 引導我們的應用程序，並在頁面加載後加載組件。與我們之前的示例（需要服務器）不同，此頁面可以直接在瀏覽器中查看。

如您所見，Angular 團隊為希望使用 ES5 構建 2.0 應用程序的用戶提供了一個清晰的解決方案。如果您對此感興趣，我強烈建議您查看 a.js 庫，該庫允許開發人員使用類似 TypeScript 的語法在 ES5 中構建 Angular 應用程序。

結論

希望這能讓您深入了解 Angular 的各個方面，這些方面將在框架的下一個版本中出現。如果您想進一步使用 Angular 2 和 TypeScript（在這種情況下為留言板）構建完整的應用程序，那麼我建議您查看這篇文章：使用 TypeScript 開始使用 Angular 2。

我還想了解您使用 Angular 2 的經驗。您是否已經嘗試過？您是否構建了一些想分享的內容？請在評論中告訴我。

關於使用 TypeScript 和 ES5 在 Angular 2 中創建組件的常見問題解答

如何使用 TypeScript 在 Angular 2 中創建組件？

使用 TypeScript 在 Angular 2 中創建組件涉及幾個步驟。首先，您需要從 Angular 核心庫導入 Component 符號。然後，您定義一個組件類並使用 @Component 裝飾器對其進行裝飾。裝飾器告訴 Angular 該類是一個組件，並提供元數據，例如選擇器和模板。最後，您導出組件類，以便可以在應用程序的其他部分使用它。這是一個基本示例：

function calculateArea(height: number, width: number): number {
  return height * width;
}
console.log(calculateArea(2, 3));
// 将正常工作

console.log(calculateArea("Ten", "Eleven"));
// 参数类型“string”不可分配给参数类型“number”。

Angular 2 中 TypeScript 和 ES5 之間的區別是什麼？

TypeScript 和 ES5 都是您可以用來編寫 Angular 2 應用程序的語言，但它們有一些關鍵區別。 TypeScript 是 JavaScript 的靜態類型超集，它向語言添加了類型和其他功能。它是 Angular 2 的首選語言，因為它使代碼更健壯且更易於維護。另一方面，ES5 是在大多數瀏覽器中運行的標準 JavaScript 版本。可以使用 ES5 編寫 Angular 2 應用程序，但是您將錯過 TypeScript 的一些好處。

（其餘常見問題解答與 Angular 和 React 相關，與原文的主題不符，故略去。）

以上是在Angular 2中創建組件，並用打字稿和ES5創建的詳細內容。更多資訊請關注PHP中文網其他相關文章！