核心要點

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

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

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

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

什麼是組件？

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

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

TypeScript

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

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

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

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 並使我們的代碼隨著時間的推移更易於維護(hù)。

安裝

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

npm install -g typescript

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

tsc <filename.ts>

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

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

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

下面，我使用 TypeScript 代碼創(chuàng)建了一個組件。我首先使用 ES6 導(dǎo)入語法導(dǎo)入 Angular。在此示例中，我們將定義一個組件以及該組件的視圖。完成後，我們將需要 Angular 的 bootstrap 函數(shù)才能使 Angular 運(yùn)行代碼。在此代碼中，我們將看到 @ 符號，它用於告訴 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，每當(dāng)它在我們的 HTML 中看到 <user-name></user-name> 時，我們都想要實例化一個組件。

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

• 視圖
• 邏輯

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

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

npm install -g typescript

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

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

tsc <filename.ts>

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

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

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

將我們的組件遷移到 ES5

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

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 的知識，而不必?fù)?dān)心犧牲框架的任何功能。讓我們看看如何使用 ES5 構(gòu)建 Angular 組件。此示例的代碼可以在我們 GitHub 代碼庫的 ES5 分支中找到。也就是說，讓我們開始吧！

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

npm install -g typescript

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

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

tsc <filename.ts>

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

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

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

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

結(jié)論

希望這能讓您深入了解 Angular 的各個方面，這些方面將在框架的下一個版本中出現(xiàn)。如果您想進(jìn)一步使用 Angular 2 和 TypeScript（在這種情況下為留言板）構(gòu)建完整的應(yīng)用程序，那麼我建議您查看這篇文章：使用 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 核心庫導(dǎo)入 Component 符號。然後，您定義一個組件類並使用 @Component 裝飾器對其進(jìn)行裝飾。裝飾器告訴 Angular 該類是一個組件，並提供元數(shù)據(jù)，例如選擇器和模板。最後，您導(dǎo)出組件類，以便可以在應(yīng)用程序的其他部分使用它。這是一個基本示例：

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 應(yīng)用程序的語言，但它們有一些關(guān)鍵區(qū)別。 TypeScript 是 JavaScript 的靜態(tài)類型超集，它向語言添加了類型和其他功能。它是 Angular 2 的首選語言，因為它使代碼更健壯且更易於維護(hù)。另一方面，ES5 是在大多數(shù)瀏覽器中運(yùn)行的標(biāo)準(zhǔn) JavaScript 版本。可以使用 ES5 編寫 Angular 2 應(yīng)用程序，但是您將錯過 TypeScript 的一些好處。

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

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