Angular 基礎整理

Angular 基礎整理 - 入門

Angular實現語法 typescript .

Angular基本構造塊是 NgModule : 會把相關的代碼收集到一塊兒。Angular應用就是由一組 NgModule 定義出的。應用至少會有一個用於引導應用的跟模塊，一般還會有不少特性模塊：

• 組件定義視圖
  • 視圖是一組課件的屏幕元素，能夠根據程序邏輯和數據展現、修改
  • 每一個應用只收有一個根組件
• 組件使用服務
  • 與視圖不相關的業務處理邏輯應該置於服務中
  • 服務能夠做爲依賴被注入到組件中，可使代碼更加模塊化、加強複用、更加高效

組件和服務本質上都是類，通常使用 裝飾器 來標誌類型

• 組件類的元數據將組件類和一個用來定義視圖的模板關聯起來。

  @Component({ // 元數據
    selector: 'app-base-info',
    templateUrl: './base-info.component.html',
    styleUrls: ['./base-info.component.scss']
  })
  複製代碼

  • 模板把普通的HTML和Angular 指令 與 綁定標記 組合起來，可使Angular在呈現HTML以前先修改這些HTML

• 服務類的元數據提供一些信息，Angular要用這些信息讓組件能夠經過依賴注入使用該服務

  @Injectable({ // 元數據
    providedIn: 'root'
  })
  複製代碼

模塊

NgModule 爲一個組件集聲明瞭編譯的上下文環境，專一於某個應用領域、某個工做流或一組緊密相關的能力。將其中的組件和一組相關代碼（好比服務）關聯起來，造成功能單元。

每一個Angular都有一個跟模塊，一般命名爲 APPModule 。根模塊提供了用來啓動應用的引導機制。

一個應用一般包含不少個功能模塊

兩個 NgModule 之間能夠相互調用功能【被調用的功能要提早被導出】

NgModule

Angular 應用是模塊化的，它擁有本身的模塊化系統，稱做 NgModule 。 一個 NgModule 就是一個容器，用於存放一些內聚的代碼塊，這些代碼塊專一於某個應用領域、某個工做流或一組緊密相關的功能。 它能夠包含一些組件、服務提供商或其它代碼文件，其做用域由包含它們的 NgModule 定義。 它還能夠導入一些由其它模塊中導出的功能，並導出一些指定的功能供其它 NgModule 使用。

@NgModule({
    providers: Provider[], 
    /* 在當前模塊的注入器中可用的一組可注入對象。 - 在這裏列出了提供商的依賴項可用於注入到任何組件、指令、管道或該注入器下的服務。 - 引導用的 NgModule 使用的是根注入器，能夠爲應用中的任何部件提供依賴。 */
    declarations: Array<Type<any> | any[]>, 
    /* 屬於該模塊的一組組件、指令和管道（統稱可聲明對象）。 */
    imports: Array<Type<any> | ModuleWithProviders<{}> | any[]>,
    /* 這裏列出的 NgModule 所導出的可聲明對象可用在當前模塊內的模板中 */
    exports: Array<Type<any> | any[]>, // 也可導出其餘Module。。。
    /* 此 NgModule 中聲明的一組組件、指令和管道能夠在導入了本模塊的模塊下任何組件的模板中使用。 導出的這些可聲明對象就是該模塊的公共 API。 - 可聲明對象應該且只能屬於一個 NgModule。 一個模塊能夠列出在它的 exports 中列出一些其它模塊，這些模塊中全部公開的可聲明對象也一樣會導出。 - 默認狀況下，可聲明對象是私有的。 若是 ModuleA 不導出 UserComponent，那麼只有這個 ModuleA 中的組件才能使用 UserComponent。 - 導出具備傳遞性。ModuleA 能夠導入 ModuleB 並將其導出，這會讓全部 ModuleB 中的導出一樣可用在導入了 ModuleA 的那些模塊中。 - 根模塊沒有任何理由導出任何東西，由於其它模塊永遠不須要導入根模塊。 */
    entryComponents: [], // Module內的公共組件須要在這裏導出
    /* 定義此 NgModule 中要編譯的組件集，這樣它們才能夠動態加載到視圖中。 */
    bootstrap: [],
    /* 只有根模塊才應該設置這個 bootstrap 屬性。 當該模塊引導時須要進行引導的組件。列在這裏的全部組件都會自動添加到 entryComponents 中。 */
    schemas: [],
    /* 該 NgModule 中容許使用的聲明元素的 schema（HTML 架構）。 元素和屬性（不管是 Angular 組件仍是指令）都必須聲明在 schema 中。 */
    id: string,
    /* 當前 NgModule 在 getModuleFactory 中的名字或惟一標識符。 若是爲 undefined，則該模塊不會被註冊進 getModuleFactory 中。 */
    jit: true
	/* 若是爲 true，則該模塊將會被 AOT 編譯器忽略，所以始終會使用 JIT 編譯。 這是爲了支持將來的 Ivy 渲染器，目前沒什麼用。 */
})
複製代碼

組件

每一個Angular至少有一個組件【根組件】。

每一個組件都會定義一個類，包含應用的數據、邏輯、HTML模板

@Component({
  selector: 'app-base-info',
  templateUrl: './base-info.component.html',
  styleUrls: ['./base-info.component.scss']
})
複製代碼

@Component() 裝飾器代表 緊隨 它的那個類是一個件，並提供模板和該組件專屬的元數據。

模板、指令和數據綁定

模板灰板HTML和Angular的標記（markup）組合起來，這些標記能夠在HTML元素顯示出來以前修改它們。模板中的指令會提供程序邏輯，而綁定標記會把應用中的數據和DOM鏈接在一塊兒。有兩種類型的數據綁定：

• 事件綁定 讓應用能夠經過更新應用的數據來響應目標環境下的用戶輸入
• 屬性綁定 能夠將處理過的數據插入到HTML中

模板也能夠經過管道轉換要顯示的值以加強用戶體驗【通常用來格式化數據】

模板與視圖

你要經過組件的配套模板來定義其視圖。模板就是一種 HTML，它會告訴 Angular 如何渲染該組件。

視圖一般會分層次進行組織，讓你能以 UI 分區或頁面爲單位進行修改、顯示或隱藏。 與組件直接關聯的模板會定義該組件的 宿主視圖。該組件還能夠定義一個帶層次結構的視圖，它包含一些內嵌的視圖做爲其它組件的宿主。

雙向數據綁定

數據綁定標記的四種形式：

• {{ value }} 組件 => DOM
• [property]="value" 組件 => DOM
• (event)="handler" DOM => 組件
• [(ng-mudel)]="property" 組件 <=> DOM

管道

在模板中聲明顯示值的轉換邏輯。帶有 @pipe 裝飾器的類中會定義一個轉換函數，用來把輸入值轉換成供視圖先試用的輸出值。Angular內置管道： Pipes API 列表。

使用方式：{{interpolated_value | pipe_name}} 。

指令

Angular 的模板是 動態的 。當 Angular 渲染它們的時候，會根據 指令 給出的指示對 DOM 進行轉換。 指令就是一個帶有 @Directive() 裝飾器的類。

組件從技術角度上說就是一個指令，可是因爲組件對 Angular 應用來講很是獨特、很是重要，所以 Angular 專門定義了 @Component() 裝飾器，它使用一些面向模板的特性擴展了 @Directive() 裝飾器。

除組件外，還有兩種指令： 結構型指令 和 屬性型指令。 Angular 自己定義了一系列這兩種類型的指令，你也可使用 @Directive() 裝飾器來定義本身的指令。

像組件同樣，指令的元數據把它所裝飾的指令類和一個 selector 關聯起來，selector 用來把該指令插入到 HTML 中。 在模板中，指令一般做爲屬性出如今元素標籤上，可能僅僅做爲名字出現，也可能做爲賦值目標或綁定目標出現。

結構型指令

結構型指令 經過添加、移除或替換DOM元素來修改佈局。

• *ngFor
• *ngIf

屬性型指令

屬性型指令 會修改現有元素的外觀或行爲。

服務與依賴注入

服務

服務 是一個廣義的概念，它包括應用所需的任何值、函數或特性。狹義的服務是一個明肯定義了用途的類。它應該作一些具體的事，並作好。與特定視圖無關 、 但願跨組件共享數據、邏輯 狀況下能夠建立服務類。

理想狀況下，組件的工做只管用戶體驗，而不用顧及其它。 它應該提供用於數據綁定的屬性和方法，以便做爲視圖（由模板渲染）和應用邏輯（一般包含一些 模型 的概念）的中介者。

服務類的定義一般緊跟在 Injectable() 裝飾器以後。該裝飾器提供的元數據可讓服務做爲依賴 被注入到 客戶組件中。

對於要用到的任何服務，你必須至少註冊一個提供商。服務能夠在本身的元數據中把本身註冊爲提供商，這樣可讓本身隨處可用。或者，你也能夠爲特定的模塊或組件註冊提供商。要註冊提供商，就要在服務的 @Injectable() 裝飾器中提供它的元數據，或者在 @NgModule() 或 @Component() 的元數據中。

默認狀況下，Angular CLI 的 ng generate service 命令會在 @Injectable() 裝飾器中提供元數據來把它註冊到根注入器中。

@Injectable({
    providedIn: 'root'
})
複製代碼

依賴注入

DI 被融入 Angular 框架中，用於在任何地方給新建的組件提供服務或所需的其它東西。 組件是服務的消費者，也就是說，你能夠把一個服務注入到組件中，讓組件類得以訪問該服務類。

依賴注入【DI】 能夠保持組件類的精簡和高效。有了DI，組件就不用從服務器獲取數據、驗證用戶輸入或直接把日誌寫到控制檯，而是把這些任務委託給服務。

路由

Angular 的 Router 模塊提供了一個服務，它可讓你定義在應用的各個不一樣狀態和視圖層次結構之間導航時要使用的路徑。 它的工做模型基於人們熟知的瀏覽器導航約定：

• 在地址欄輸入 URL，瀏覽器就會導航到相應的頁面。
• 在頁面中點擊連接，瀏覽器就會導航到一個新頁面。
• 點擊瀏覽器的前進和後退按鈕，瀏覽器就會在你的瀏覽歷史中向前或向後導航。

不過路由器會把相似 URL 的路徑映射到視圖而不是頁面。 當用戶執行一個動做時（好比點擊連接），本應該在瀏覽器中加載一個新頁面，可是路由器攔截了瀏覽器的這個行爲，並顯示或隱藏一個視圖層次結構。

若是路由器認爲當前的應用狀態須要某些特定的功能，而定義此功能的模塊還沒有加載，路由器就會按需 惰性加載 此模塊。

組件、視圖、服務

生命週期

每一個組件都有一個被Angular管理的生命週期。

組件生命週期

指令和組件的實例有一個生命週期：當Angular新建、更新和銷燬它們時觸發。經過實現一個或多個Angular Core 庫裏定義的 生命週期鉤子 接口，咱們能夠在特定時期執行特定方法。

生命週期順序

當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些生命週期鉤子方法：

鉤子	用途及時機
ngOnChanges()	當 Angular（從新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的 SimpleChanges對象在 ngOnInit() 以前以及所綁定的一個或多個輸入屬性的值發生變化時都會調用。
ngOnInit()	在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。在第一輪 ngOnChanges() 完成以後調用，只調用一次。
ngDoCheck()	檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應。在每一個變動檢測週期中，緊跟在 ngOnChanges() 和 ngOnInit() 後面調用。
ngAfterContentInit()	沒當 Angular 把外部內容投影進組件/指令的視圖以後調用。第一次 ngDoCheck() 以後調用，只調用一次。
ngAfterContentChecked()	每當 Angular 完成被投影組件內容的變動檢測以後調用。ngAfterContentInit() 和每次 ngDoCheck() 以後調用
ngAfterViewInit()	每當 Angular 初始化完組件視圖及其子視圖以後調用。第一次 ngAfterContentChecked() 以後調用，只調用一次。
ngAfterViewChecked()	每當 Angular 作完組件視圖和子視圖的變動檢測以後調用。ngAfterViewInit() 和每次 ngAfterContentChecked() 以後調用。
ngOnDestroy()	沒當 Angular 每次銷燬指令/組件以前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。在 Angular 銷燬指令/組件以前調用。