angular基礎(chǔ)（一）
架構(gòu)概述
Angular是用于在HTML和TypeScript中構(gòu)建客戶端應(yīng)用程序的平臺和框架。Angular是用TypeScript編寫的。它將核心和可選功能實現(xiàn)為您導(dǎo)入應(yīng)用程序的一組TypeScript庫。
Angular應(yīng)用程序的基本構(gòu)建塊是NgModules，它為組件提供編譯上下文。NgModules將相關(guān)代碼收集到功能集中;?Angular應(yīng)用程序由一組NgModules定義。應(yīng)用程序始終至少具有啟用引導(dǎo)的根模塊，并且通常具有更多功能模塊。
組件定義視圖，這些視圖是Angular可以選擇的屏幕元素集，并根據(jù)您的程序邏輯和數(shù)據(jù)進行修改。
組件使用服務(wù)，這些服務(wù)提供與視圖不直接相關(guān)的特定功能。服務(wù)提供者可以作為依賴項注入組件，使您的代碼模塊化，可重用和高效。
組件和服務(wù)都只是類，其中裝飾器標記其類型并提供告知Angular如何使用它們的元數(shù)據(jù)。
組件類的元數(shù)據(jù)將其與定義視圖的模板相關(guān)聯(lián)。模板將普通HTML與Angular?指令和綁定標記相結(jié)合，允許Angular在呈現(xiàn)HTML之前修改HTML。
服務(wù)類的元數(shù)據(jù)提供了Angular需要的信息，以通過依賴注入（DI）使其可用于組件。
應(yīng)用程序的組件通常定義許多視圖，按層次排列。Angular提供的Router服務(wù)可幫助您定義視圖之間的導(dǎo)航路徑。路由器提供復(fù)雜的瀏覽器內(nèi)導(dǎo)航功能。
模塊
Angular?NgModules與JavaScript（ES2015）模塊不同并且互為補充。NgModule聲明了一組專用于應(yīng)用程序域，工作流或密切相關(guān)的功能組件的編譯上下文。NgModule可以將其組件與相關(guān)代碼（例如服務(wù)）相關(guān)聯(lián)，以形成功能單元。
每個Angular應(yīng)用程序都有一個常規(guī)命名的根模塊，AppModule它提供啟動應(yīng)用程序的引導(dǎo)機制。應(yīng)用程序通常包含許多功能模塊。
與JavaScript模塊一樣，NgModules可以從其他NgModule導(dǎo)入功能，并允許其他NgModules導(dǎo)出和使用它們自己的功能。例如，要在應(yīng)用程序中使用路由器服務(wù)，請導(dǎo)入RouterNgModule。
將代碼組織到不同的功能模塊中有助于管理復(fù)雜應(yīng)用程序的開發(fā)以及可重用性的設(shè)計。此外，這種技術(shù)允許您利用延遲加載?- 即按需加載模塊 - 以最大限度地減少啟動時需要加載的代碼量。
有關(guān)更詳細的討論，請參閱模塊簡介。
組件
每個Angular應(yīng)用程序至少有一個組件，即將組件層次結(jié)構(gòu)與頁面文檔對象模型（DOM）連接起來的根組件。每個組件定義一個包含應(yīng)用程序數(shù)據(jù)和邏輯的類，并與定義要在目標環(huán)境中顯示的視圖的HTML?模板相關(guān)聯(lián)。
所述裝飾標識類正下方它作為一個組件，并且提供了模板和相關(guān)的特定于組件的元數(shù)據(jù)。@Component()
裝飾器是修改JavaScript類的函數(shù)。Angular定義了許多將特定類型的元數(shù)據(jù)附加到類的裝飾器，以便系統(tǒng)知道這些類的含義以及它們應(yīng)該如何工作。
詳細了解網(wǎng)絡(luò)上的裝飾器。
模板，指令和數(shù)據(jù)綁定
模板將HTML與Angular標記相結(jié)合，可以在顯示HTML元素之前對其進行修改。模板指令提供程序邏輯，綁定標記連接應(yīng)用程序數(shù)據(jù)和DOM。有兩種類型的數(shù)據(jù)綁定：
通過事件綁定，您的應(yīng)用可以通過更新應(yīng)用程序數(shù)據(jù)來響應(yīng)目標環(huán)境中的用戶輸入。
通過屬性綁定，您可以將根據(jù)應(yīng)用程序數(shù)據(jù)計算的值插入到HTML中。
在顯示視圖之前，Angular會根據(jù)您的程序數(shù)據(jù)和邏輯評估指令并解析模板中的綁定語法，以修改HTML元素和DOM。Angular支持雙向數(shù)據(jù)綁定，這意味著DOM中的更改（例如用戶選擇）也會反映在程序數(shù)據(jù)中。
您的模板可以使用管道通過轉(zhuǎn)換顯示值來改善用戶體驗。例如，使用管道顯示適合用戶區(qū)域設(shè)置的日期和貨幣值。Angular為常見轉(zhuǎn)換提供預(yù)定義管道，您還可以定義自己的管道。
有關(guān)這些概念的更詳細討論，請參閱組件簡介。
服務(wù)和依賴注入
對于與特定視圖無關(guān)的數(shù)據(jù)或邏輯，以及要跨組件共享的數(shù)據(jù)或邏輯，您可以創(chuàng)建服務(wù)類。服務(wù)類定義緊跟在裝飾器之后。裝飾器提供元數(shù)據(jù)，允許您將服務(wù)作為依賴項注入客戶端組件。@Injectable()
依賴注入（DI）使您可以保持組件類的精簡和高效。它們不從服務(wù)器獲取數(shù)據(jù)，驗證用戶輸入或直接登錄到控制臺;?他們將這些任務(wù)委托給服務(wù)。
有關(guān)更詳細的討論，請參閱服務(wù)和DI簡介。
路由
Angular?RouterNgModule提供的服務(wù)允許您在不同的應(yīng)用程序狀態(tài)之間定義導(dǎo)航路徑并查看應(yīng)用程序中的層次結(jié)構(gòu)。它以熟悉的瀏覽器導(dǎo)航約定為藍本：
在地址欄中輸入URL，瀏覽器導(dǎo)航到相應(yīng)的頁面。
單擊頁面上的鏈接，瀏覽器將導(dǎo)航到新頁面。
單擊瀏覽器的后退和前進按鈕，瀏覽器會在您看到的頁面的歷史記錄中前后導(dǎo)航。
路由器將類似URL的路徑映射到視圖而不是頁面。當用戶執(zhí)行操作（例如單擊鏈接）以在瀏覽器中加載新頁面時，路由器會攔截瀏覽器的行為，并顯示或隱藏視圖層次結(jié)構(gòu)。
如果路由器確定當前應(yīng)用程序狀態(tài)需要特定功能，并且尚未加載定義它的模塊，則路由器可以根據(jù)需要延遲加載模塊。
路由器根據(jù)您應(yīng)用的視圖導(dǎo)航規(guī)則和數(shù)據(jù)狀態(tài)解釋鏈接URL。當用戶單擊按鈕或從下拉框中選擇或響應(yīng)來自任何來源的其他刺激時，您可以導(dǎo)航到新視圖。路由器在瀏覽器的歷史記錄中記錄活動，因此后退和前進按鈕也可以工作。
要定義導(dǎo)航規(guī)則，請將導(dǎo)航路徑與組件相關(guān)聯(lián)。路徑使用類似URL的語法來集成您的程序數(shù)據(jù)，就像模板語法將您的視圖與程序數(shù)據(jù)集成一樣。然后，您可以應(yīng)用程序邏輯來選擇要顯示或隱藏的視圖，以響應(yīng)用戶輸入和您自己的訪問規(guī)則。
有關(guān)更詳細的討論，請參閱路由和導(dǎo)航。
什么是下一個
您已經(jīng)學習了有關(guān)Angular應(yīng)用程序的主要構(gòu)建塊的基礎(chǔ)知識。下圖顯示了這些基本部分是如何相關(guān)的。
組件和模板一起定義Angular視圖。
組件類上的裝飾器添加元數(shù)據(jù)，包括指向關(guān)聯(lián)模板的指針。
組件模板中的指令和綁定標記根據(jù)程序數(shù)據(jù)和邏輯修改視圖。
依賴注入器為組件提供服務(wù)，例如允許您在視圖之間定義導(dǎo)航的路由器服務(wù)。
以下幾頁將更詳細地介紹這些主題中的每一個。
模塊簡介鏈接
Angular應(yīng)用程序是模塊化的，Angular有自己的模塊化系統(tǒng)，稱為NgModules。NgModules是專用于應(yīng)用程序域，工作流或一組密切相關(guān)的功能的內(nèi)聚代碼塊的容器。它們可以包含組件，服務(wù)提供程序和其他代碼文件，其范圍由包含NgModule定義。他們可以導(dǎo)入從其他NgModule導(dǎo)出的功能，并導(dǎo)出所選功能以供其他NgModule使用。
每個Angular應(yīng)用程序至少有一個NgModule類，即根模塊，它通常被命名AppModule并駐留在一個名為的文件中app.module.ts。您可以通過引導(dǎo)根NgModule來啟動應(yīng)用程序。
雖然一個小應(yīng)用程序可能只有一個NgModule，但大多數(shù)應(yīng)用程序都有更多的功能模塊。應(yīng)用程序的根?NgModule是如此命名的，因為它可以包含任何深度層次結(jié)構(gòu)中的子NgModule。
NgModule元數(shù)據(jù)
NgModule由裝飾的類定義。的裝飾是一個函數(shù)，它的單一元數(shù)據(jù)對象，其屬性描述該模塊。最重要的屬性如下。@NgModule()@NgModule()
declarations：屬于此NgModule?的組件，指令和管道。
exports：應(yīng)該在其他NgModules?的組件模板中可見和可用的聲明子集。
imports：此?NgModule中聲明的組件模板需要導(dǎo)出類的其他模塊。
providers：這個NgModule為全球服務(wù)集合做出貢獻的服務(wù)的創(chuàng)造者;?它們可以在應(yīng)用程序的所有部分中訪問。（您還可以在組件級別指定提供程序，這通常是首選。）
bootstrap：主應(yīng)用程序視圖，稱為根組件，托管所有其他應(yīng)用程序視圖。只有根NgModule應(yīng)該設(shè)置bootstrap屬性。
這是一個簡單的根NgModule定義。
content_copyimport?{?NgModule?}??????from?'@angular/core';import?{?BrowserModule?}?from?'@angular/platform-browser';@NgModule({ ??imports:??????[?BrowserModule?], ??providers:????[?Logger?], ??declarations:?[?AppComponent?], ??exports:??????[?AppComponent?], ??bootstrap:????[?AppComponent?]})export?class?AppModule?{?}
這里包括?的export財產(chǎn)AppComponent是為了說明;?在這個例子中實際上并不需要。根NgModule沒有理由導(dǎo)出任何東西，因為其他模塊不需要導(dǎo)入根NgModule。
NgModules和組件
NgModules?為其組件提供編譯上下文。根NgModule始終具有在引導(dǎo)期間創(chuàng)建的根組件，但任何NgModule都可以包含任意數(shù)量的其他組件，這些組件可以通過路由器加載或通過模板創(chuàng)建。屬于NgModule的組件共享編譯上下文。
組件及其模板一起定義視圖。組件可以包含視圖層次結(jié)構(gòu)，允許您定義可以作為一個單元創(chuàng)建，修改和銷毀的任意復(fù)雜的屏幕區(qū)域。視圖層次結(jié)構(gòu)可以混合在屬于不同NgModule的組件中定義的視圖。通常就是這種情況，特別是對于UI庫。
創(chuàng)建組件時，它直接與單個視圖關(guān)聯(lián)，稱為主機視圖。主機視圖可以是視圖層次結(jié)構(gòu)的根，它可以包含嵌入視圖，嵌入視圖又是其他組件的主機視圖。這些組件可以在同一個NgModule中，也可以從其他NgModule導(dǎo)入。樹中的視圖可以嵌套到任何深度。
注意：視圖的層次結(jié)構(gòu)是Angular檢測和響應(yīng)DOM和app數(shù)據(jù)中的更改的關(guān)鍵因素。
NgModules和JavaScript模塊
NgModule系統(tǒng)與用于管理JavaScript對象集合的JavaScript（ES2015）模塊系統(tǒng)不同且無關(guān)。這些是互補模塊系統(tǒng)，您可以一起使用來編寫應(yīng)用程序。
在JavaScript中，每個文件都是一個模塊，文件中定義的所有對象都屬于該模塊。該模塊通過用export關(guān)鍵字標記它們來聲明某些對象是公共的。其他JavaScript模塊使用import語句從其他模塊訪問公共對象。
content_copyimport?{?NgModule?}?????from?'@angular/core';import?{?AppComponent?}?from?'./app.component';
content_copyexport?class?AppModule?{?}
了解有關(guān)Web模板系統(tǒng)的更多信息。
角度圖書館
Angular加載為JavaScript模塊的集合。您可以將它們視為庫模塊。每個Angular庫名稱都以@angular前綴開頭。使用npm包管理器安裝它們，并使用JavaScript?import語句導(dǎo)入它們的一部分。
例如，像這樣Component從@angular/core庫中導(dǎo)入Angular的裝飾器。
content_copyimport?{?Component?}?from?'@angular/core';
您還可以使用JavaScript import語句從Angular?庫導(dǎo)入NgModule?。例如，以下代碼BrowserModule從platform-browser庫中導(dǎo)入NgModule?。
content_copyimport?{?BrowserModule?}?from?'@angular/platform-browser';
在上面的簡單根模塊的示例中，應(yīng)用程序模塊需要來自內(nèi)部的材料?BrowserModule。要訪問該材料，請將其添加到此類元數(shù)據(jù)中。@NgModuleimports
content_copyimports:??????[?BrowserModule?],
通過這種方式，你正在使用的角度和JavaScript模塊系統(tǒng)一起。雖然很容易混淆兩個系統(tǒng)，它們共享“導(dǎo)入”和“導(dǎo)出”的常用詞匯，但您將熟悉使用它們的不同上下文。
從NgModules指南中了解更多信息。
組件簡介
甲組件控制屏幕的補丁被稱為視圖。例如，各個組件定義并控制教程中的以下每個視圖：
帶有導(dǎo)航鏈接的app root。
英雄名單。
英雄編輯。
您可以定義組件的應(yīng)用程序邏輯 - 它在類中支持視圖的作用。該類通過屬性和方法的API與視圖交互。
例如，HeroListComponent有一個heroes包含英雄數(shù)組的屬性。當用戶單擊以從該列表中選擇英雄時，其selectHero()方法設(shè)置selectedHero屬性。組件從服務(wù)獲取英雄，該服務(wù)是構(gòu)造函數(shù)上的TypeScript?參數(shù)屬性。該服務(wù)通過依賴注入系統(tǒng)提供給組件。
content_copyexport?class?HeroListComponent?implements?OnInit?{ ??heroes:?Hero[]; ??selectedHero:?Hero; ??constructor(private?service:?HeroService)?{?} ??ngOnInit()?{ ????this.heroes?=?this.service.getHeroes(); ??} ??selectHero(hero:?Hero)?{?this.selectedHero?=?hero;?}}
當用戶在應(yīng)用程序中移動時，Angular會創(chuàng)建，更新和銷毀組件。您的應(yīng)用可以通過可選的生命周期掛鉤在此生命周期的每個時刻執(zhí)行操作，例如ngOnInit()。
組件元數(shù)據(jù)
所述裝飾標識類正下方它作為一個組件類，并指定其元數(shù)據(jù)。在下面的示例代碼中，您可以看到它只是一個類，根本沒有特殊的Angular表示法或語法。在將它標記為裝飾器之前，它不是一個組件。@ComponentHeroListComponent@Component
組件的元數(shù)據(jù)告訴Angular從哪里獲取創(chuàng)建它所需的主要構(gòu)建塊以及呈現(xiàn)組件及其視圖。特別是，它將模板與組件相關(guān)聯(lián)，可以直接使用內(nèi)聯(lián)代碼，也可以通過引用。組件及其模板一起描述視圖。
除了包含或指向模板之外，元數(shù)據(jù)還配置了例如如何在HTML中引用組件以及它需要哪些服務(wù)。@Component
這是一個基本元數(shù)據(jù)的例子HeroListComponent。
content_copy@Component({ ??selector:????'app-hero-list', ??templateUrl:?'./hero-list.component.html', ??providers:??[?HeroService?]})export?class?HeroListComponent?implements?OnInit?{/*?.?.?.?*/}
此示例顯示了一些最有用的配置選項：@Component
selector：一個CSS選擇器，它告訴Angular在模板HTML中找到相應(yīng)標記的任何位置創(chuàng)建并插入此組件的實例。例如，如果應(yīng)用程序的HTML包含
templateUrl：此組件的HTML模板的模塊相對地址?；蛘?，您可以內(nèi)聯(lián)提供HTML模板，作為template屬性的值。此模板定義組件的主機視圖。
providers：組件所需服務(wù)的一組提供程序。在示例中，這告訴Angular如何提供HeroService組件構(gòu)造函數(shù)用于獲取要顯示的英雄列表的實例。
模板和視圖
您可以使用其隨附模板定義組件的視圖。模板是HTML的一種形式，它告訴Angular如何呈現(xiàn)組件。
視圖通常按層次排列，允許您作為一個單元修改或顯示和隱藏整個UI部分或頁面。與組件直接關(guān)聯(lián)的模板定義該組件的主機視圖。該組件還可以定義視圖層次結(jié)構(gòu)，其中包含由其他組件托管的嵌入式視圖。
視圖層次結(jié)構(gòu)可以包含來自同一NgModule中的組件的視圖，但它也可以（并且經(jīng)常）包含來自不同NgModule中定義的組件的視圖。
模板語法
模板看起來像常規(guī)HTML，除了它還包含Angular?模板語法，它根據(jù)應(yīng)用程序的邏輯以及app和DOM數(shù)據(jù)的狀態(tài)改變HTML。您的模板可以使用數(shù)據(jù)綁定來協(xié)調(diào)應(yīng)用程序和DOM數(shù)據(jù)，在顯示數(shù)據(jù)之前轉(zhuǎn)換數(shù)據(jù)的管道，以及將應(yīng)用程序邏輯應(yīng)用于顯示內(nèi)容的指令。
例如，這是教程的模板HeroListComponent。
content_copy
Hero?List
Pick?a?hero?from?the?list
- ??
此模板使用典型的HTML元素，如
和?
，并且還包括角模板語法元素，?，，，，和。模板語法元素告訴Angular如何使用程序邏輯和數(shù)據(jù)將HTML呈現(xiàn)到屏幕。*ngFor{{hero.name}}(click)[hero]
該指令告訴Angular迭代列表。*ngFor
{{hero.name}}，(click)并將[hero]程序數(shù)據(jù)綁定到DOM和從DOM綁定，響應(yīng)用戶輸入。請參閱下面的數(shù)據(jù)綁定。
HeroDetailComponent（代碼未顯示）定義了英雄 - 細節(jié)子視圖HeroListComponent。請注意這樣的自定義組件如何與相同布局中的本機HTML無縫混合。
數(shù)據(jù)綁定
如果沒有框架，您將負責將數(shù)據(jù)值推送到HTML控件中，并將用戶響應(yīng)轉(zhuǎn)換為操作和值更新。正如任何有經(jīng)驗的jQuery程序員都可以證明的那樣，手工編寫這樣的推拉邏輯既繁瑣又容易出錯，也是一個噩夢。
Angular支持雙向數(shù)據(jù)綁定，這是一種用于協(xié)調(diào)模板的各個部分與組件各部分的機制。將綁定標記添加到模板HTML以告知Angular如何連接雙方。
下圖顯示了四種形式的數(shù)據(jù)綁定標記。每個表單都有一個方向：DOM，DOM，或兩者。
HeroListComponent模板中的此示例使用其中三種形式。
content_copy
的{{hero.name}}?插值?顯示組件的hero.name所述內(nèi)屬性值
該[hero]?屬性綁定傳遞的值?selectedHero從父HeroListComponent到hero孩子的財產(chǎn)HeroDetailComponent。
該(click)?事件綁定調(diào)用組件的selectHero，當用戶點擊一個英雄的名字方法。
雙向數(shù)據(jù)綁定（主要用于模板驅(qū)動的表單）將屬性和事件綁定組合在一個表示法中。以下HeroDetailComponent是使用與ngModel指令進行雙向數(shù)據(jù)綁定的模板示例。
content_copy
在雙向綁定中，數(shù)據(jù)屬性值從屬性綁定流向組件的輸入框。用戶的更改也會返回到組件，將屬性重置為最新值，與事件綁定一樣。
Angular?為每個JavaScript事件周期處理一次所有數(shù)據(jù)綁定，從應(yīng)用程序組件樹的根到所有子組件。
數(shù)據(jù)綁定在模板及其組件之間的通信中起著重要作用，對于父組件和子組件之間的通信也很重要。
管道
角度管道允許您在模板HTML中聲明顯示值轉(zhuǎn)換。具有裝飾器的類定義了一個函數(shù)，該函數(shù)將輸入值轉(zhuǎn)換為輸出值以在視圖中顯示。@Pipe
Angular定義了各種管道，例如日期管道和貨幣管道;?有關(guān)完整列表，請參閱管道API列表。您還可以定義新管道。
要在HTML模板中指定值轉(zhuǎn)換，請使用管道運算符（|）。
{{interpolated_value | pipe_name}}
您可以鏈接管道，發(fā)送一個管道函數(shù)的輸出以由另一個管道函數(shù)轉(zhuǎn)換。管道還可以接受控制其轉(zhuǎn)換方式的參數(shù)。例如，您可以將所需的格式傳遞給date管道。
content_copy ?
Today?is?{{today?|?date}}
The?date?is?{{today?|?date:'fullDate'}}
? ?The?time?is?{{today?|?date:'shortTime'}}
指令
角度模板是動態(tài)的。當Angular呈現(xiàn)它們時，它會根據(jù)指令給出的指令轉(zhuǎn)換DOM?。指令是帶有裝飾器的類。@Directive()
組件在技術(shù)上是指令。然而，組件是如此獨特和Angular應(yīng)用程序的核心，Angular定義裝飾器，它使用面向模板的功能擴展裝飾器。@Component()@Directive()
除了組件之外，還有另外兩種指令：?結(jié)構(gòu)和屬性。Angular定義了兩種類型的指令，您可以使用裝飾器定義自己的指令?。@Directive()
與組件一樣，指令的元數(shù)據(jù)將裝飾類與selector用于將其插入HTML?的元素相關(guān)聯(lián)。在模板中，指令通常作為屬性出現(xiàn)在元素標記內(nèi)，可以是名稱，也可以是賦值或綁定的目標。
結(jié)構(gòu)指令通過添加，刪除和替換DOM中的元素來更改布局。示例模板使用兩個內(nèi)置結(jié)構(gòu)指令將應(yīng)用程序邏輯添加到視圖的呈現(xiàn)方式。
content_copy
*ngFor是一個迭代;?它告訴Angular?
*ngIf是有條件的;?HeroDetail僅當存在選定的英雄時，它才包含該組件。
屬性指令可更改現(xiàn)有元素的外觀或行為。在模板中，它們看起來像常規(guī)HTML屬性，因此名稱。
的ngModel指令，它實現(xiàn)雙向數(shù)據(jù)綁定，是屬性指令的一個例子。通過設(shè)置其顯示值屬性并響應(yīng)更改事件來修改ngModel現(xiàn)有元素的行為（通常）。
content_copy
Angular有更多預(yù)定義的指令，可以改變布局結(jié)構(gòu)（例如，ngSwitch）或修改DOM元素和組件的方面（例如，ngStyle和ngClass）。
服務(wù)和依賴注入
服務(wù)是一個廣泛的類別，包含應(yīng)用程序所需的任何價值，功能或功能。服務(wù)通常是具有狹窄，明確定義目的的類。它應(yīng)該做一些特定的事情，做得好。
Angular將組件與服務(wù)區(qū)分開來，以增加模塊化和可重用性。通過將組件的視圖相關(guān)功能與其他類型的處理分離，您可以使組件類精簡且高效。
理想情況下，組件的工作是啟用用戶體驗，僅此而已。組件應(yīng)該呈現(xiàn)數(shù)據(jù)綁定的屬性和方法，以便在視圖（由模板呈現(xiàn)）和應(yīng)用程序邏輯（通常包括模型的某些概念）之間進行調(diào)解。
組件可以將某些任務(wù)委派給服務(wù)，例如從服務(wù)器獲取數(shù)據(jù)，驗證用戶輸入或直接記錄到控制臺。通過在可注入服務(wù)類中定義此類處理任務(wù)，您可以將這些任務(wù)提供給任何組件。您還可以通過在不同情況下注入相同類型服務(wù)的不同提供商來使您的應(yīng)用程序更具適應(yīng)性。
Angular沒有強制執(zhí)行這些原則。Angular確實可以幫助您遵循這些原則，方便您將應(yīng)用程序邏輯分解為服務(wù)，并通過依賴注入使這些服務(wù)可用于組件。
服務(wù)示例
以下是記錄到瀏覽器控制臺的服務(wù)類的示例。
content_copyexport?class?Logger?{ ??log(msg:?any)???{?console.log(msg);?} ??error(msg:?any)?{?console.error(msg);?} ??warn(msg:?any)??{?console.warn(msg);?}}
服務(wù)可以依賴于其他服務(wù)。例如，這是一個HeroService取決于Logger服務(wù)，也用于BackendService獲取英雄。反過來，該HttpClient服務(wù)可能依賴于從服務(wù)器異步獲取英雄的服務(wù)。
content_copyexport?class?HeroService?{ ??private?heroes:?Hero[]?=?[]; ??constructor( ????private?backend:?BackendService, ????private?logger:?Logger)?{?} ??getHeroes()?{ ????this.backend.getAll(Hero).then(?(heroes:?Hero[])?=>?{ ??????this.logger.log(`Fetched?${heroes.length}?heroes.`); ??????this.heroes.push(...heroes);?//?fill?cache ????}); ????return?this.heroes; ??}}
依賴注入（DI）
DI連接到Angular框架，并在任何地方用于為新組件提供所需的服務(wù)或其他東西。組件消耗服務(wù);?也就是說，您可以將服務(wù)注入組件，使組件可以訪問該服務(wù)類。
要在Angular中將類定義為服務(wù)，請使用裝飾器提供允許Angular將其作為依賴項注入組件的元數(shù)據(jù)。?類似地，使用裝飾器指示組件或其他類（例如另一個服務(wù)，管道或NgModule）具有依賴性。@Injectable()
@Injectable()
該噴射器是主要的機制。Angular在引導(dǎo)過程中為您創(chuàng)建應(yīng)用程序范圍的注入器，并根據(jù)需要為其他注入器創(chuàng)建。您不必創(chuàng)建注射器。
注入器創(chuàng)建依賴項，并維護一個依賴項實例的容器，如果可能，它會重用它們。
甲提供商是一個對象，講述了一個噴射器如何獲得或創(chuàng)建依賴性。
對于應(yīng)用程序中所需的任何依賴項，必須使用應(yīng)用程序的注入器注冊提供程序，以便注入器可以使用提供程序創(chuàng)建新實例。對于服務(wù)，提供者通常是服務(wù)類本身。
依賴關(guān)系不必是服務(wù) - 例如，它可以是函數(shù)或值。
當Angular創(chuàng)建組件類的新實例時，它通過查看構(gòu)造函數(shù)參數(shù)類型來確定組件需要哪些服務(wù)或其他依賴項。例如，HeroListComponent需求的構(gòu)造函數(shù)HeroService。
content_copyconstructor(private?service:?HeroService)?{?}
當Angular發(fā)現(xiàn)組件依賴于服務(wù)時，它首先檢查注入器是否具有該服務(wù)的任何現(xiàn)有實例。如果請求的服務(wù)實例尚不存在，則注入器使用已注冊的提供者創(chuàng)建一個，并在將服務(wù)返回到Angular之前將其添加到注入器。
解析并返回所有請求的服務(wù)后，Angular可以使用這些服務(wù)作為參數(shù)調(diào)用組件的構(gòu)造函數(shù)。
HeroService注射過程看起來像這樣。
提供服務(wù)
您必須至少注冊一個您將要使用的服務(wù)的提供商。提供者可以是服務(wù)自己的元數(shù)據(jù)的一部分，使該服務(wù)在任何地方都可用，或者您可以向提供者注冊特定的模塊或組件。您在注冊該服務(wù)的元數(shù)據(jù)提供者（在裝飾），或在或元數(shù)據(jù)@Injectable()@NgModule()@Component()
默認情況下，Angular CLI命令ng generate service通過在裝飾器中包含提供程序元數(shù)據(jù)來向服務(wù)提供者注冊服務(wù)的根注入器。本教程使用此方法注冊HeroService類定義的提供程序。@Injectable()
content_copy@Injectable({ ?providedIn:?'root',})
當您在根級別提供服務(wù)時，Angular會創(chuàng)建一個單獨的共享實例，HeroService?并將其注入任何要求它的類中。在元數(shù)據(jù)中注冊提供程序還允許Angular通過從未編譯的應(yīng)用程序中刪除服務(wù)來優(yōu)化應(yīng)用程序（如果未使用）。@Injectable()
當您使用特定的NgModule注冊提供程序時，該NgModule中的所有組件都可以使用相同的服務(wù)實例。要在此級別注冊，請使用裝飾器的providers屬性，@NgModule()
content_copy@NgModule({ ??providers:?[ ??BackendService, ??Logger ?], ?...})
在組件級別注冊提供程序時，將為該組件的每個新實例獲取該服務(wù)的新實例。在組件級別，providers在元數(shù)據(jù)的屬性中注冊服務(wù)提供者。@Component()
content_copy@Component({ ??selector:????'app-hero-list', ??templateUrl:?'./hero-list.component.html', ??providers:??[?HeroService?]})
后續(xù)步驟：工具和技術(shù)
在了解了基本的Angular構(gòu)建塊之后，您可以開始了解可用于幫助您開發(fā)和交付Angular應(yīng)用程序的功能和工具的更多信息。以下是一些主要功能。
響應(yīng)式編程
生命周期鉤子：通過實現(xiàn)生命周期鉤子接口，挖掘組件生命周期中的關(guān)鍵時刻，從創(chuàng)建到銷毀。
Observable和事件處理：如何使用帶有組件和服務(wù)的observable來發(fā)布和訂閱任何類型的消息，例如用戶交互事件和異步操作結(jié)果。
客戶端 - 服務(wù)器交互
HTTP：與服務(wù)器通信以獲取數(shù)據(jù)，保存數(shù)據(jù)，并使用HTTP客戶端調(diào)用服務(wù)器端操作。
服務(wù)器端呈現(xiàn)：Angular Universal通過服務(wù)器端呈現(xiàn)（SSR）在服務(wù)器上生成靜態(tài)應(yīng)用程序頁面。這允許您在服務(wù)器上運行Angular應(yīng)用程序，以提高性能并在移動和低功耗設(shè)備上快速顯示第一頁，并且還可以方便Web爬蟲。
特定于域的庫
動畫：使用Angular的動畫庫來動畫組件行為，而無需深入了解動畫技術(shù)或CSS。
表單：通過基于HTML的驗證和臟檢查支持復(fù)雜的數(shù)據(jù)輸入方案。
支持開發(fā)周期
編譯：Angular為開發(fā)環(huán)境提供即時（JIT）編譯，為生產(chǎn)環(huán)境提供提前（AOT）編譯。
測試平臺：在與Angular框架交互時，對應(yīng)用程序部件運行單元測試。
國際化：使用Angular的國際化（i18n）工具，使您的應(yīng)用程序以多種語言提供。
安全準則：了解Angular針對常見Web應(yīng)用程序漏洞和跨站點腳本攻擊等攻擊的內(nèi)置保護措施。
設(shè)置，構(gòu)建和部署配置
CLI命令參考：Angular CLI是一個命令行工具，可用于創(chuàng)建項目，生成應(yīng)用程序和庫代碼以及執(zhí)行各種正在進行的開發(fā)任務(wù)，如測試，捆-綁和部署。
工作區(qū)和文件結(jié)構(gòu)：了解Angular工作區(qū)和項目文件夾的結(jié)構(gòu)。
npm包：Angular框架，Angular CLI和Angular應(yīng)用程序使用的組件打包為npm包，并通過npm注冊表分發(fā)。Angular CLI創(chuàng)建一個默認package.json文件，該文件指定了一組可以很好地協(xié)同工作并且共同支持許多常見應(yīng)用程序方案的啟動程序包。
TypeScript配置：TypeScript是Angular應(yīng)用程序開發(fā)的主要語言。
瀏覽器支持：使您的應(yīng)用在各種瀏覽器中兼容。
構(gòu)建和服務(wù)：學習為項目定義不同的構(gòu)建和代理服務(wù)器配置，例如開發(fā)，登臺和生產(chǎn)。
部署：了解將Angular應(yīng)用程序部署到遠程服務(wù)器的技術(shù)。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
