核心要點

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

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

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

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

什么是組件？

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

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

TypeScript

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

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

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

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

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

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

安裝

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

npm install -g typescript

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

tsc <filename.ts>

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

在 TypeScript 中創(chuàng)建組件

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

下面，我使用 TypeScript 代碼創(chuàng)建了一個組件。我首先使用 ES6 導入語法導入 Angular。在此示例中，我們將定義一個組件以及該組件的視圖。完成后，我們將需要 Angular 的 bootstrap 函數(shù)才能使 Angular 運行代碼。在此代碼中，我們將看到 @ 符號，它用于告訴 Angular 我們正在嘗試構(gòu)建的內(nèi)容。

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

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

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

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

• 視圖
• 邏輯

由于組件已定義，因此我們現(xiàn)在需要創(chuàng)建視圖和邏輯。

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

npm install -g typescript

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

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

tsc <filename.ts>

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

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

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

將我們的組件遷移到 ES5

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

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

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

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

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

npm install -g typescript

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

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

tsc <filename.ts>

但是我們?nèi)鄙僖粯訓|西。在我們的 TypeScript 示例中，我們使用了 bootstrap 函數(shù)來啟動我們的 Angular 代碼。以下是如何在 ES5 中執(zhí)行相同操作的方法：

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

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

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

結(jié)論

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

我還想了解您使用 Angular 2 的經(jīng)驗。您是否已經(jīng)嘗試過？您是否構(gòu)建了一些想分享的內(nèi)容？請在評論中告訴我。

關(guān)于使用 TypeScript 和 ES5 在 Angular 2 中創(chuàng)建組件的常見問題解答

如何使用 TypeScript 在 Angular 2 中創(chuàng)建組件？

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

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

console.log(calculateArea("Ten", "Eleven"));
// 參數(shù)類型“string”不可分配給參數(shù)類型“number”。

Angular 2 中 TypeScript 和 ES5 之間的區(qū)別是什么？

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

（其余常見問題解答與 Angular 和 React 相關(guān)，與原文的主題不符，故略去。）

以上是在Angular 2中創(chuàng)建組件，并用打字稿和ES5創(chuàng)建的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！