Angular 2 架構(gòu)

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

在本章中，我們將討論Angular 2框架的架構(gòu)風(fēng)格，以實(shí)現(xiàn)用戶應(yīng)用程序。 以下daigram顯示了Angular 2的架構(gòu):

Angular 2的架構(gòu)包含以下模塊:

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

模塊

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

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

export class AppComponent { }

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

組件

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

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

模板

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

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

要顯示該值，可以在插值大括號(hào)中放置模板表達(dá)式。

元數(shù)據(jù)

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

例如:

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

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

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

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

• 插值:它顯示div標(biāo)簽中的組件值。

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

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

• 雙向綁定:此表單通過使用 ngModel 指令在單個(gè)符號(hào)中綁定屬性和事件。

服務(wù)

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

指示

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

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

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

• 模板指令:它將HTML轉(zhuǎn)換為可重用的模板。

依賴注入

依賴注入是一種將對(duì)象作為應(yīng)用程序中不同組件中的依賴關(guān)系傳遞的設(shè)計(jì)模式。 它創(chuàng)建一個(gè)新的類的實(shí)例及其所需的依賴項(xiàng)。

使用依賴注入時(shí)，必須記住以下幾點(diǎn):

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

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

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

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