Angular 主要分為八大構(gòu)造塊（也就是八個(gè)核心概念）：模塊 (module)、組件 (component)、模板 (template)、元數(shù)據(jù) (metadata)、數(shù)據(jù)綁定 (data binding)、指令 (directive)、服務(wù) (service)、依賴注入 (dependency injection)。其中，最核心的一個(gè)概念就就組件。

1. 模塊 (module)

Angular 應(yīng)用是模塊化的，并且 Angular 有自己的模塊系統(tǒng)，它被稱為 Angular 模塊或 NgModules。

每個(gè)Angular應(yīng)用至少有一個(gè)模塊（根模塊），習(xí)慣上命名為AppModule。

根模塊在一些小型應(yīng)用中可能是唯一的模塊，大多數(shù)應(yīng)用會(huì)有很多特性模塊，每個(gè)模塊都是一個(gè)內(nèi)聚的代碼塊專注于某個(gè)應(yīng)用領(lǐng)域、工作流或緊密相關(guān)的功能。

Angular 模塊（無論是根模塊還是特性模塊）都是一個(gè)帶有@NgModule裝飾器的類。

下面是一個(gè)簡單的根模塊：

// src/app/app.module.ts

import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
 bootstrap:  [ AppComponent ]
})
export class AppModule { }

其中重要的屬性是：

1. declarations - 聲明本模塊中擁有的視圖類。Angular 有三種視圖類：組件、指令、管道；
2. exports - declarations 的子集，可用于其它模塊的組件;
3. imports - 本模塊聲明的組件模板需要的類所在的其它模塊。用來導(dǎo)入其他自定義模塊，第三方插件模塊；
4. providers - 服務(wù)的創(chuàng)建者，并加入到全局服務(wù)列表中，可用于應(yīng)用任何部分；
5. bootstrap - 指定應(yīng)用的主視圖（稱為根組件），它是所有其它視圖的宿主。只有根模塊才能設(shè)置bootstrap屬性。通常在main.ts中引導(dǎo)AppModule，這樣platformBrowserDynamic().bootstrapModule(AppModule)

2. 組件 (component)

組件負(fù)責(zé)控制屏幕上的一小塊區(qū)域，我們稱之為視圖。

下面是一個(gè)組件的簡單例子：

// src/app/hero-list.component.ts

export class HeroListComponent implements OnInit {
 heroes: Hero[];
 selectedHero: Hero;

 constructor(private service: HeroService) { }

 ngOnInit() {
  this.heroes = this.service.getHeroes();
 }

 selectHero(hero: Hero) { this.selectedHero = hero; }
}

3. 模板 (template)

模板就是HTML文件，但是不是標(biāo)準(zhǔn)的HTML文件，它使用了一些模板語法，模板語法使模板有了自己的邏輯關(guān)系，并能夠?qū)崿F(xiàn)和組件的簡單數(shù)據(jù)交互。

下面是一個(gè)簡單的模板：

// src/app/hero-list.component.html

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
 <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
  {{hero.name}}
 </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

通常使用ng g component my-comoponent命令產(chǎn)生一個(gè)組件包含四個(gè)文件：

my-comoponent.css      // 樣式文件
my-comoponent.thml      // 模板
my-comoponent.spec.ts    // 測試文件
my-comoponent.ts      // 這是組件？ 通常我們認(rèn)為這四個(gè)文件組成一個(gè)組件

4. 元數(shù)據(jù) (metadata)

元數(shù)據(jù)告訴你如何處理一個(gè)類。

其實(shí)，在Angular中每個(gè)組件只是一個(gè)類，但是我們可以通過裝飾器來附加元數(shù)據(jù)告訴Angular這是一個(gè)組件。

下面就是HeroListComponent的一些元數(shù)據(jù)。

// src/app/hero-list.component.ts (metadata)

@Component({  // @Component 將后面的 HeroListComponent 類標(biāo)記為一個(gè)組件
 selector:  'hero-list',
 templateUrl: './hero-list.component.html',
 providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

@Component裝飾器能接受一個(gè)配置對(duì)象， Angular 會(huì)基于這些信息創(chuàng)建和展示組件及其視圖。

@Component的配置項(xiàng)包括：

1. selector： CSS選擇器，它告訴Angular在父級(jí)HTML中查找<hero-list>標(biāo)簽，創(chuàng)建并插入該組件。 例如，如果應(yīng)用的HTML 包含<hero-list></hero-list>， Angular就會(huì)把HeroListComponent的一個(gè)實(shí)例插入到這個(gè)標(biāo)簽中；
2. templateUrl：組件HTML 模板的模塊相對(duì)地址；
3. providers - 組件所需服務(wù)的依賴注入提供商數(shù)組。 這是在告訴 Angular：該組件的構(gòu)造函數(shù)需要一個(gè)HeroService服務(wù)，這樣組件就可以從服務(wù)中獲得英雄數(shù)據(jù)。

到這里你應(yīng)該可以明白：模板、元數(shù)據(jù)和組件共同描繪出這個(gè)視圖。

5. 數(shù)據(jù)綁定 (databinding)

數(shù)據(jù)綁定是Angular中最常用的數(shù)據(jù)處理模式。數(shù)據(jù)綁定在模板與對(duì)應(yīng)組件的交互中扮演了重要的角色，在父組件與子組件的通訊中也同樣重要。

下面是一個(gè)簡單的例子：

// src/app/hero-list.component.html 

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

1. {{hero.name}}插值表達(dá)式在<li>標(biāo)簽中顯示組件的hero.name屬性的值；
2. [hero]屬性綁定把父組件HeroListComponent的selectedHero的值傳到子組件HeroDetailComponent的hero屬性中；
3. (click) 事件綁定在用戶點(diǎn)擊英雄的名字時(shí)調(diào)用組件的selectHero方法。

Angular默認(rèn)沒有雙向綁定，但是，官方推薦這樣來實(shí)現(xiàn)雙向綁定：

<input [(ngModel)]="hero.name">

Angular 在每個(gè) JavaScript 事件循環(huán)中處理所有的數(shù)據(jù)綁定，它會(huì)從組件樹的根部開始，遞歸處理全部子組件。

6. 指令 (directive)

由于Angular模板是動(dòng)態(tài)的，所以你需要通過指令實(shí)現(xiàn)對(duì)DOM的轉(zhuǎn)換。（組件是一個(gè)帶模板的指令；@Component裝飾器實(shí)際上就是一個(gè)@Directive裝飾器，只是擴(kuò)展了一些面向模板的特性。 ）

指令分為兩種：結(jié)構(gòu)指令、屬性指令。

a. 結(jié)構(gòu)指令: 通過在 DOM 中添加、移除和替換元素來修改布局。

下面是一個(gè)簡單的內(nèi)置結(jié)構(gòu)指令的例子：

<!-- src/app/hero-list.component.html (structural) -->

<li *ngFor="let hero of heroes"></li>
<hero-detail *ngIf="selectedHero"></hero-detail>

1. *ngFor告訴 Angular 為heroes列表中的每個(gè)英雄生成一個(gè)<li>標(biāo)簽。
2. *ngIf表示只有在選擇的英雄存在時(shí)，才會(huì)包含HeroDetail組件。

b. 屬性指令：修改一個(gè)現(xiàn)有元素的外觀或行為。

簡單例子:

<!-- src/app/hero-detail.component.html -->
<input [(ngModel)]="hero.name">

7. 服務(wù) (service)

服務(wù)是一個(gè)廣義范疇，包括：值、函數(shù)，或應(yīng)用所需的特性。幾乎任何東西都可以是一個(gè)服務(wù)。 典型的服務(wù)是一個(gè)類，具有專注的、明確的用途。它應(yīng)該做一件特定的事情，并把它做好。

例如：

1. 日志服務(wù)
2. 數(shù)據(jù)服務(wù)
3. 消息總線
4. 稅款計(jì)算器
5. 應(yīng)用程序配置

組件類應(yīng)保持精簡。組件本身不從服務(wù)器獲得數(shù)據(jù)、不進(jìn)行驗(yàn)證輸入，也不直接往控制臺(tái)寫日志。 它們把這些任務(wù)委托給服務(wù)。所以說服務(wù)是跑腿的，服務(wù)一般用來處理業(yè)務(wù)邏輯，被注入在組件當(dāng)中，服務(wù)是全局單例的。也就是說注入到所有組件中的服務(wù)是同一個(gè)。

一個(gè)簡單的例子：

// src/app/hero.service.ts 

export 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;
 }
}

8. 依賴注入 (denpendency injection)

“依賴注入”是提供類的新實(shí)例的一種方式，還負(fù)責(zé)處理好類所需的全部依賴。大多數(shù)依賴都是服務(wù)。 Angular 使用依賴注入來提供新組件以及組件所需的服務(wù)。

來看注入方式:

// src/app/hero-list.component.ts

constructor(private service: HeroService) { }

注入器維護(hù)了一個(gè)服務(wù)實(shí)例的容器，存放著以前創(chuàng)建的實(shí)例。 如果所請求的服務(wù)實(shí)例不在容器中，注入器就會(huì)創(chuàng)建一個(gè)服務(wù)實(shí)例，并且添加到容器中，然后把這個(gè)服務(wù)返回給 Angular。 當(dāng)所有請求的服務(wù)都被解析完并返回時(shí)，Angular 會(huì)以這些服務(wù)為參數(shù)去調(diào)用組件的構(gòu)造函數(shù)。 這就是依賴注入 。

通常我們將服務(wù)聲明在根模塊，以便在整個(gè)應(yīng)用中使用這個(gè)服務(wù)。

// src/app/app.module.ts

providers: [
 BackendService,
 HeroService,
 Logger
],

也可以在其他組件中聲明服務(wù)，那么這個(gè)服務(wù)只能用于當(dāng)前組件。把它注冊在組件級(jí)表示該組件的每一個(gè)新實(shí)例都會(huì)有一個(gè)服務(wù)的新實(shí)例。

// src/app/hero-list.component.ts

@Component({
 selector:  'hero-list',
 templateUrl: './hero-list.component.html',
 providers: [ HeroService ]
})

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論