第一章、第一節 Angular基礎

讓我們先來看看Angular是如何實現組件模式的。

組件模式

Angular 應用程序使用組件模式。你可能聽說過這個模式，它不僅用于軟件開發，還用于制造、建筑和其他領域。簡單地說，它涉及到將更小的、離散的構建塊組合成更大的成品。例如，電池是汽車的組成部分。

在軟件開發中，組件是邏輯單元，可以組合成更大的應用程序。組件往往具有內部邏輯和屬性，這些邏輯和屬性對較大的應用程序是屏蔽的或隱藏的。然后，較大的應用程序通過稱為接口的方式使用這些構建塊，接口只公開使用組件所需的內容。這樣，只要不改變接口，組件的內部邏輯就可以在不影響較大應用程序的情況下進行修改。

回到我們的電池例子，汽車的使用連接器接通電池。然而，如果電池壞了，它可以被一個全新的電池取代，只要電池有相同的連接器。這意味著汽車制造商不必擔心電池內部的問題，這就簡化了汽車的制造過程。更重要的是，車主不必每次電池壞掉時都更換汽車。

為了擴展業務，電池制造商可以為一系列不同的車輛銷售電池，例如全地形車、船只或雪地摩托。因此，組件模式使他們能夠實現更大的規模經濟。

在web應用程序中使用組件模式

隨著web應用程序變得越來越復雜，能夠用更小的和離散的組件構建它們的需求變得更加迫切。組件的方式允許以某種方式構建應用程序，以防止它們成為亂七八糟的代碼。相反，基于組件的設計允許我們在獨立于其他部分的情況下對應用程序的特定部分進行推理，然后我們可以通過商定的連接點將應用程序組合成一個完整的整體。

此外，維護成本更低，因為每個組件的內部邏輯可以單獨管理，而不會影響應用程序的其他部分。使用自描述組件將應用程序組合在一起使應用程序在更高的抽象級別上更容易理解。

為什么以前Angular不使用組件?

如果這個想法很有意義，為什么早期版本的Angular沒有采用組件模式呢?答案是，當Angular第一次發布時，現有的技術并不完全支持在web應用程序中實現這種模式。

然而，早期版本的Angular在實現更智能的web應用程序設計和組織方面邁出了實質性的步伐。例如，他們實現了MVC模式，該模式將應用程序分離為模型、視圖和控制器(您將看到MVC模式在我們將在Angular中構建的組件中繼續使用)。

使用MVC模式，模型是數據，視圖是web頁面(或移動應用程序屏幕，甚至是Flash頁面)，控制器用模型中的數據填充視圖。通過這種方式，可以實現關注點分離。遵循這種模式，并明智地使用指令，將使您非常接近組件。

因此，早期版本的Angular允許更合理地設計和構建應用程序。然而，由于所使用的技術不是真正孤立的，這種方法受到了限制。相反，它們最終都被呈現出來，與屏幕上的其他元素沒有任何真正的分離。

有什么新東西能讓Angular使用組件模式?

相比之下，Angular 的最新版本包含了最近出現的技術，這使得更全面地實現組件模式成為可能。這些技術包括Web組件、ES2015 (JavaScript的新版本)和TypeScript。讓我們來討論一下這些技術為實現這一目標帶來了什么。

Web 組件

Web組件是一個總稱，實際上涵蓋了Web瀏覽器的四個新興標準:

Custom elements
Shadow DOM
Templates
HTML imports

現在讓我們詳細討論每一個問題:

Custom elements 自定義元素允許創建標準HTML標記以外的新類型的DOM元素，比如
<div> 和 <p>。你將在本書中看到這些定制元素的使用。例如，我們在本章中構建的應用程序將有一個名為<app-root>的根元素，但是你可以為該元素指定任何名稱。單個組件也將使用自定義元素。例如，在下面的章節中，我們將構建一個更復雜的應用程序，它將屏幕分解為多個組件。頁面的標題將使用自定義元素<abe-header>來顯示其內容(前綴abe對我們的應用程序是唯一的，有助于避免與本地HTML元素或其他應用程序中的自定義元素命名沖突)。添加自定義標記的功能在屏幕上提供了一個位置，該位置可以保留下來綁定組件。簡而言之，這是將組件與頁面其余部分分離并使其能夠真正獨立的第一步。
Shadow DOM 在DOM中為scripts、CSS、HTML提供了一個隱藏區域。隱藏區域內的標記和樣式不會影響頁面的其余部分。同樣重要的是，它們不會受到頁面其他部分的標記和樣式的影響。我們的組件可以使用這個隱藏區域來呈現它的顯示。這是使組件自包含的第二步。
Templates (模板)是HTML的片段，最初不會在web頁面中呈現，但可以在運行時使用JavaScript激活。許多JavaScript框架已經支持某種形式的模板。Web組件標準化這個模板并在瀏覽器中提供直接支持。可以使用模板使組件動態使用的Shadow DOM中的HTML和CSS。這是構成組件的第三步。
構成Web組件的最后一個標準是HTML導入。它們提供了在單個包中加載HTML、CSS和JavaScript等資源的方法。Angular不使用HTML導入。相反，它依賴于JavaScript模塊加載，我們將在本章稍后討論。

Angular組件和 Web組件

目前的Web瀏覽器并不完全支持Web組件。因此，Angular組件并不是嚴格意義上的Web組件。也許更準確的說法是，Angular組件實現了Web組件背后的設計原則。它們使在當今的瀏覽器下構建web組件這件事成為了可能。

Angular支持Chrome、Firefox、Safari和Edge等常綠瀏覽器，以及ie9及以上版本。它還支持Android和IOS。要查看Angular支持的瀏覽器列表，請訪問https:/ / angular.io / guide/ browser- support。

因此，在本書的其余部分中，我們將關注于構建Angular組件，而不是Web組件。盡管有這樣的區別，Angular組件與Web組件緊密結合，甚至可以與Web組件互操作。隨著瀏覽器開始更全面地支持Web組件，Angular組件和Web組件之間的差異將開始消失。因此，如果您想要開始采用未來的Web組件標準，Angular為您提供了今天這樣做的機會。

Angular的語言支持

您可以使用ES5(所有當前瀏覽器都支持的JavaScript版本)開發組件，但是Angular通過添加對最新語言(如ES2015和TypeScript)的關鍵特性的支持，增強了開發組件的能力。

ES2015

ES2015 是JavaScript的新版本;2015年6月獲得批準。它增加了許多
語言的改進，我們將在這本書中看到，但在這一點上，我們最感興趣的兩個是:

Classes
Module loading

以前在JavaScript中不存在類的概念。既然它們確實存在，那么使用它們的關鍵好處就是它們提供了簡單、清晰的語法，我們可以使用它為組件中的代碼創建方便的容器。當你開始研究這本書中的應用程序時，你會發現。類還為我們的組件提供了一個方便的簡寫名稱，使它們更容易通過依賴注入等事情聯系在一起。

我們將在本書的例子中探索類的使用。如果您沒有使用面向對象的語言，那么您可能不熟悉類，因此我們將在本章的示例中介紹它們。

ES2015 還介紹了一種新的模塊加載方法。模塊提供了一種封裝JavaScript文件的方法。當它們被封裝時，它們不會污染全局命名空間，并且可以以受控的方式與其他模塊交互。

一旦我們定義了模塊，我們需要一種方式將它們加載到應用程序中以執行。模塊加載允許我們從Angular組成的modules和其他我們創建或使用的組件的模塊中選擇我們應用程序需要的東西。

目前，有很多方法和庫支持JavaScript中的模塊加載。ES2015為加載模塊添加了新的、一致的語法，作為語言的一部分。它的語法很簡單，包括在模塊前面加上export關鍵字(或使用默認導出)，然后使用import在應用程序的其他地方使用它們。

es2015模塊加載使我們能夠將組件組合成有用的包或特性，可以在應用程序中導入或導出。事實上，模塊是Angular本身的核心。我們將看到模塊在Angular本身和我們在本書中構建的應用程序中被廣泛使用。

由于目前的瀏覽器并不完全支持ES2015，我們需要將ES2015轉換為ES5，以便在應用程序中使用類和模塊加載等特性。我們通過一種叫做轉化的過程來完成。

一旦ES2015被傳輸到ES5，我們就可以使用SystemJS這樣的模塊加載器來加載我們的模塊。SystemJS遵循ES2015模塊加載語法，使我們能夠在當今的瀏覽器中進行模塊加載。或者，我們可以使用webpack之類的模塊綁定器來加載和組合我們的模塊。對于本書中的項目，我們將使用webpack在應用程序中加載、打包和部署模塊。

TypeScript

TypeScript是Microsoft作為JavaScript的超集創建的，這意味著它包含了ES2015的特性(比如類和模塊加載)，并添加了以下內容:

Types
Decorators

Types（類型）允許我們在類中標記變量、屬性和參數，以表明它們是數字、字符串、布爾值或數組和對象等各種結構。這使我們能夠在設計時執行類型檢查，以確保在應用程序中使用了正確的類型。

Decorators （裝飾器）是簡單的注釋，我們可以使用@符號和函數將其添加到類中。它們為我們的類的使用提供了指令(稱為元數據)。在Angular中，decorator允許我們將類標識為Angular組件。decorator還使我們能夠指定一個自定義元素，將組件綁定到該元素，并標識一個向組件添加HTML視圖的模板。在閱讀本書的過程中，我們將更詳細地介紹裝飾器的使用。

decorator不是ES2015的一部分，而是未來它們將包含在JavaScript語言中的提議的一部分。作為微軟和谷歌合作的一部分，它們被添加到TypeScript。如前所述，TypeScript編譯成ES5，因此我們能夠在瀏覽器中同時使用類型和裝飾器，而這些瀏覽器并不完全支持ES2015或擬議的修飾符標準。

綜合能力

通過遵循Web組件標準并添加對ES2015和TypeScript的支持，Angular使我們能夠創建實現組件設計模式的Web應用程序。這些組件通過自描述和自包含構建塊的集合，幫助實現構建大型應用程序標準背后的遠景。

我們希望您能在本書的示例中看到，Angular使組件能夠以一種簡單明了的方式構造，使開發人員更容易實現它們。在我們繼續閱讀本書中的示例時，我們將重點介紹每種技術的使用情況。

Angular modules

組件是 Angular 應用程序的基本構件。但是我們如何將這些構建塊組織成完整的應用程序呢? Angular modules 提供了這個問題的答案。它們使我們能夠將組件組合成可重用的功能組，這些功能組可以在整個應用程序中導出和導入。例如，在更復雜的應用程序中，我們希望有用于諸如身份驗證、公共實用程序和外部服務調用的模塊。與此同時，模塊使我們能夠以一種允許我們按需加載的方式對應用程序中的特性進行分組。這就是所謂的延遲加載，我們將在 第四章 “Personal Trainer”中討論這個話題。

每個Angular應用程序都有一個或多個包含組件的模塊。Angular引入了NgModule來方便地指定組成模塊的組件。每個Angular應用程序都必須至少有一個這樣的模塊——根模塊。