Angular 2 架構

Angular2 是一個完整的單頁應用開發(fā)框架，它提供了很多組件。

在本章中，我們將討論Angular 2框架的架構風格，以實現(xiàn)用戶應用程序。 以下daigram顯示了Angular 2的架構:

Angular 2的架構包含以下模塊:

• Module
• Component
• Template
• Metadata
• Data Binding
• Service
• Directive
• Dependency Injection

模塊

模塊組件的特征在于可以用于執(zhí)行單個任務的代碼塊。 您可以從代碼(如類)中導出值的值。 Angular應用程序被稱為模塊，并使用許多模塊構建您的應用程序。 Angular 2的基本構建塊是可以從模塊導出的組件類。

某些應用程序的組件類名稱為 AppComponent ，您可以在名為 app.component.ts 的文件中找到它。 使用 export 語句從模塊中導出組件類，如下所示:

export class AppComponent { }

export 語句指定它是一個模塊，它的 AppComponent 類定義為public，并且可以被應用程序的其他模塊訪問。

組件

組件是具有模板的控制器類，主要處理頁面上的應用程序和邏輯的視圖。 它是一個可以在整個應用程序中使用的代碼。 組件知道如何呈現(xiàn)自己和配置依賴注入。 您可以使用組件內聯(lián)樣式，樣式網址和模板內聯(lián)樣式將CSS樣式與組件相關聯(lián)。

要注冊組件，我們使用 @Component 注釋，可以將應用程序拆分為更小的部分。 每個DOM元素只有一個組件。

模板

組件的視圖可以通過使用模板來定義，該模板告訴Angular如何顯示組件。 例如，下面的簡單模板顯示如何顯示名稱:

<div>
Your name is : {{name}}
</div>

要顯示該值，可以在插值大括號中放置模板表達式。

元數(shù)據(jù)

元數(shù)據(jù)是處理類的一種方式。 考慮我們有一個稱為 MyComponent 的組件，它將是一個類，直到我們告訴Angular它是一個組件。 您可以使用元數(shù)據(jù)來告訴Angular MyComponent 是一個組件。 元數(shù)據(jù)可以使用裝飾器附加到TypeScript。

例如:

@Component({
   selector : 'mylist',
   template : '<h2>Name is Harry</h2>'
   directives : [MyComponentDetails]
})
export class ListComponent{...}

@Component 是一個裝飾器，它使用配置對象來創(chuàng)建組件及其視圖。 selector 創(chuàng)建組件的實例，其中它找到< mylist> 父HTML中的標記。 模板告訴Angular如何顯示組件。 指令裝飾器用于表示組件或指令的數(shù)組。

數(shù)據(jù)綁定

數(shù)據(jù)綁定是通過聲明源和目標HTML元素之間的綁定來協(xié)調應用程序數(shù)據(jù)值的過程。 它將模板部分與組件部分和模板HTML組合，使用標記綁定以連接兩側。 有四種類型的數(shù)據(jù)綁定:

• 插值:它顯示div標簽中的組件值。

• 屬性綁定:將屬性從父級屬性傳遞給子級的屬性。

• 事件綁定:當您單擊組件方法名稱時觸發(fā)。

• 雙向綁定:此表單通過使用 ngModel 指令在單個符號中綁定屬性和事件。

服務

服務是僅負責執(zhí)行特定任務的JavaScript函數(shù)。 角度服務使用依賴注入機制注入。 服務包括應用程序所需的值，功能或功能。 一般來說，服務是一個類，它可以執(zhí)行某些特定的事情，如日志服務，數(shù)據(jù)服務，消息服務，應用程序的配置等。在Angular中沒有什么關于服務，并且沒有ServiceBase類，但仍然服務可以被視為 基本的角度應用。

指示

該偽指令是表示元數(shù)據(jù)的類。 有三種類型的指令:

• 組件指令:它使用視圖和控制器創(chuàng)建自定義控制器，并用作自定義HTML元素。

• 裝飾指令:它使用額外的行為裝飾元素。

• 模板指令:它將HTML轉換為可重用的模板。

依賴注入

依賴注入是一種將對象作為應用程序中不同組件中的依賴關系傳遞的設計模式。 它創(chuàng)建一個新的類的實例及其所需的依賴項。

使用依賴注入時，必須記住以下幾點:

• 依賴注入被刺激到框架中，并且可以在任何地方使用。

• 注入器機制維護服務實例，并且可以使用提供者創(chuàng)建。
  

• 提供者是創(chuàng)建服務的一種方式。

• 您可以與注入器一起注冊提供程序。