核心要點(diǎn)

• Angular 2.0 使用 TypeScript（JavaScript 的超集）來優(yōu)化性能，提升頁面速度和工作流程自動(dòng)化。 TypeScript 允許開發(fā)人員使用類型信息來註釋 JavaScript 代碼，從而幫助捕獲代碼庫中的錯(cuò)誤。
• Angular 2.0 引入了組件的概念，組件是可重用的代碼塊，包含視圖和邏輯。組件取代了指令成為框架的主要元素，確保應(yīng)用程序一個(gè)部分的代碼不會(huì)干擾另一個(gè)部分的代碼。
• 使用 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 對(duì)像上的方法來定義組件並添加功能。然後可以直接在瀏覽器中運(yùn)行代碼，無需服務(wù)器。

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

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

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

什麼是組件？

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

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

TypeScript

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

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

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

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 並使我們的代碼隨著時(shí)間的推移更易於維護(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)建自定義組件。我們第一個(gè)示例的代碼可以在我們 GitHub 代碼庫的 TypeScript 分支中找到。

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

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

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

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

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

• 視圖
• 邏輯

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

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

npm install -g typescript

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

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

tsc <filename.ts>

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

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

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

將我們的組件遷移到 ES5

對(duì)於那些希望使用 ES5 利用 2.0 強(qiáng)大功能的用戶，Angular 2 團(tuán)隊(duì)創(chuàng)建了一個(gè)可以簡單地放入網(wǎng)站中的框架版本。這是必要的，因?yàn)?ES5 沒有模塊系統(tǒng)，因此我們需要某種自執(zhí)行捆綁包。如果您查看了第一個(gè)示例的代碼，您會(huì)看到我需要向應(yīng)用程序中添加三個(gè)不同的腳本標(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ā)人員可以使用他們對(duì) ES5 的知識(shí)，而不必?fù)?dān)心犧牲框架的任何功能。讓我們看看如何使用 ES5 構(gòu)建 Angular 組件。此示例的代碼可以在我們 GitHub 代碼庫的 ES5 分支中找到。也就是說，讓我們開始吧！

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

npm install -g typescript

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

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

tsc <filename.ts>

但是我們?nèi)鄙僖粯訓(xùn)|西。在我們的 TypeScript 示例中，我們使用了 bootstrap 函數(shù)來啟動(dòng)我們的 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)隊(duì)為希望使用 ES5 構(gòu)建 2.0 應(yīng)用程序的用戶提供了一個(gè)清晰的解決方案。如果您對(duì)此感興趣，我強(qiáng)烈建議您查看 a.js 庫，該庫允許開發(fā)人員使用類似 TypeScript 的語法在 ES5 中構(gòu)建 Angular 應(yīng)用程序。

結(jié)論

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

我還想了解您使用 Angular 2 的經(jīng)驗(yàn)。您是否已經(jīng)嘗試過？您是否構(gòu)建了一些想分享的內(nèi)容？請(qǐng)?jiān)谠u(píng)論中告訴我。

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

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

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

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 的首選語言，因?yàn)樗勾a更健壯且更易於維護(hù)。另一方面，ES5 是在大多數(shù)瀏覽器中運(yùn)行的標(biāo)準(zhǔn) JavaScript 版本?？梢允褂?ES5 編寫 Angular 2 應(yīng)用程序，但是您將錯(cuò)過 TypeScript 的一些好處。

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

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