第一章、第一節 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應用程式都必須至少有一個這樣的模組——根模組。

Angular本身是作為模組構建的，我們將這些模組匯入到應用程式中。因此，當您構建Angular應用程式時，您將看到所有模組的使用。

構建Angular應用程式的基本步驟

總之:在一個基本的層面上，你會看到在Angular中開發應用，你會做以下事情:

1. 建立元件
2. 將它們打包成模組
3. 啟動 app

瞭解Angular和元件設計模式的最好方法就是觀察它的實際操作。因此，我們將在Angular中構建我們的第一個Hello World應用程式。這個應用程式將幫助您熟悉Angular框架，並瞭解元件設計模式。我們開始吧。