前面的話：最近空余時間在學(xué) Angular 2，國慶節(jié)的時候看了官網(wǎng)的quickstart，還寫了一篇文章，只是一個hello world demo。后面繼續(xù)看了它的一個項目教程，剛開始還可以跟上，當(dāng)后面就比較混亂了。的確，對于新手來講，要了解一個框架還是比較麻煩的。所以停止項目，開始看看 angular 的整體框架是如何的，聯(lián)系項目，分析下，慢慢來。

學(xué)習(xí)鏈接：中文官網(wǎng)

正文開始：

angular 應(yīng)用：用帶 angular 拓展語法的 HTML 寫模板，用組件類管理這些模板，用服務(wù)添加應(yīng)用邏輯，在模塊中打包發(fā)布組件與服務(wù)。通過引導(dǎo) 根模塊啟動應(yīng)用。 angular 在瀏覽器中接管、展現(xiàn)應(yīng)用的內(nèi)容，并根據(jù)我們提供的操作指令響應(yīng)用戶的交互。

這幾個名詞很重要，貫穿angular應(yīng)用開發(fā)。

angular 應(yīng)用的 8個主要構(gòu)造塊：

模塊modules
組件components
模板template
元數(shù)據(jù)metadata
數(shù)據(jù)綁定data binding
指令directive
服務(wù)services
依賴注入dependency injection

模塊

angular 應(yīng)用是模塊化的，有自己的模塊系統(tǒng)，叫做 angular 模塊/NgModules。

到底模塊是什么？在angular里模塊化意味著什么？

angular 應(yīng)用至少有一個模塊（根模塊），稱為 AppModule。

大多數(shù)應(yīng)用都有很多其它的 特性模塊，它們由一組領(lǐng)域類、工作流、或緊密相關(guān)的功能聚合形成。

angular的所有模塊都是一個帶有 @NgModule 裝飾器的類。

angular的模塊是類?。?！

裝飾器是用來修飾JavaScript類的函數(shù)。負(fù)責(zé)把元數(shù)據(jù)附加到類上。

NgModule 是一個裝飾器函數(shù)，它接收一個用來描述模塊屬性的元數(shù)據(jù)對象。屬性有：

declarations（聲明）：本模塊中擁有的視圖類。angular 有三種視圖類：組件、指令、管道。
exports：declarations的子集，可用于其它模塊中的組件模板。
imports：本模塊組件模板中需要由其他模板導(dǎo)出的類。
providers：服務(wù)的創(chuàng)建者。本模塊把它們加入全局的服務(wù)表中，讓他們在應(yīng)用中的任何部分都可被訪問到。
bootstrap：標(biāo)識出應(yīng)用的主視圖（根組件）。只有根模塊才可設(shè)置此屬性。

下面是一個簡單的根模塊：

// app.module.ts
import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// @NgModle 裝飾器函數(shù)，接受一個對象，對象有幾個屬性
@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
 bootstrap:  [ AppComponent ]
})

// AppComponent 的 export 語句導(dǎo)出，根模塊不需要導(dǎo)出，其他組件不需導(dǎo)入根模塊。
export class AppModule { }

引導(dǎo)根模塊來啟動應(yīng)用。在 main.ts 文件中引導(dǎo) AppModule：

// app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 從app.module 文件導(dǎo)入了 AppModule
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

此時，項目只有 app/app.module.ts 文件和 app/main.ts ，前者定義了應(yīng)用的根模塊，后者引用它來啟動應(yīng)用。

Angular 模塊與JavaScript模塊比較：

JavaScript的模塊化是分文件導(dǎo)入的，各文件就是各模塊。

Angular 模塊（用 @NgModule 裝飾的類）是Angular的基礎(chǔ)特性。

JavaScript的模塊系統(tǒng)管理一組JavaScript對象。

在JavaScript中，每個文件就是一個模塊，該文件中定義的對象從屬于該模塊。通過 export 關(guān)鍵字，可以把它的某些對象聲明為公開。別的模塊可以使用 import 語句訪問公開對象。

JavaScript的這個特性很有用。
export 關(guān)鍵字聲明為公開，import 語句訪問公開對象。

在 Angular 里這兩種都會用到，從上面的兩個個文件里，可以看到。

模塊庫

上面所說，Angular 用到了 JavaScript模塊，所以它的JS模塊就是庫模塊，JS文件庫。

Angular 庫的名字都以 @angular 前綴，可以使用 npm 包管理工具安裝，并如上面的 import 語句可以訪問它們中的對象。

這點(diǎn)很好理解，Angular 本來就是依托于JS實(shí)現(xiàn)的單頁面框架，所以它本身還是需要豐富的JS庫的。
比如，從 @angular/core 庫導(dǎo)入 Component 裝飾器：

import { Component } from '@angular/core';

使用JavaScript導(dǎo)入語句從Angular 庫中導(dǎo)入 Angular 的某些模塊。

import { BrowserModule } from '@angular/platform-browser';

在上面根模塊的代碼中，應(yīng)用模塊需要 BrowserModule 的某些素材，所以把它加入 @NgModule 元數(shù)據(jù)的 imports 中：

imports ：[ BrowserModule ];

我們看看基本的@angular庫中有哪些JS模塊：

common
compiler
core
forms
http
platform-browser
platform-browser-dynamic
router
upgrade

所以，我們同時使用 Angular 和 JavaScript的模塊化系統(tǒng)。

這塊的 imports 和 exports 比較混亂，可以自己梳理下。

組件

組件負(fù)責(zé)控制屏幕上的一小塊地方，就是視圖。

在類中定義組件的應(yīng)用邏輯（被用來為視圖提供支持）。組件通過一些由屬性和方法組成的API與視圖交互。

所以說組件是聯(lián)系視圖的。

前面的 export 關(guān)鍵字可以把模塊中的類聲明為公開的，然后 import 里實(shí)現(xiàn)訪問。

類里面有許多屬性和方法。

模板

通過組件自帶的模板來定義視圖。模板是以HTML形式存在的，它告訴 Angular 如何渲染組件（視圖）。

看一個組件文件的模板：

// 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>

模板看起來就是標(biāo)準(zhǔn) HTML，它里面有一些非標(biāo)準(zhǔn)HTML的語法。*ngFor、{{hero.name}}、{click}、[hero] 和 <hero-derail> ，它們是 Angular 的模板語法。

所以說，Angular 是通過這種方式來處理 HTML的。

元數(shù)據(jù)

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

之前 export 的類里有一些方法和屬性，但是怎么處理這個類？

只要把元數(shù)據(jù)附加到這個類，就意味著這個類是個組件。

在 TypeScript 中，我們用裝飾器（decorator）來附加元數(shù)據(jù)。

分析下面的元數(shù)據(jù)：

// app/hero-list.component.ts
@Component({
 moduleId: module.id,
 selector:  'hero-list',
 templateUrl: 'hero-list.component.html',
 providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

@Component裝飾器把緊隨其后的類標(biāo)記成了組件類。

在裝飾器后面的類就會被轉(zhuǎn)為組件類？

裝飾器里的配置項：

moduleId：為與模塊相關(guān)的URL提供基地址。
這個地址怎么使用的？
selector：CSS 選擇器，它告訴 Angular 在父級HTML尋找一個標(biāo)簽，然后創(chuàng)建組件實(shí)例并插入標(biāo)簽中。
實(shí)現(xiàn)HTML的顯示。
templateUrl：組件HTML模板的模塊相對地址。
HTML模板的設(shè)置位置。
providers：數(shù)組，包含組件所依賴的服務(wù)所需要的依賴注入提供商。告訴Angular該組件的構(gòu)造函數(shù)需要服務(wù)，組件可以從服務(wù)獲取數(shù)據(jù)。
某些數(shù)據(jù)的傳遞通過服務(wù)進(jìn)行，否則，其他的視圖只能控制靜態(tài)的展示。

@Component 里的元數(shù)據(jù)會告訴 Angular 如何取得你為組件設(shè)定的元數(shù)據(jù)。

模板、元數(shù)據(jù)和組件共同描繪出這個視圖。

組件就是視圖，模板提供HTML的結(jié)構(gòu)性。

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

如果沒有框架，那么一些都需要我們來做。把數(shù)據(jù)值推送到HTML控件，并把用戶的反饋接收轉(zhuǎn)換成動作和值更新顯示，你可以使用jQuery來實(shí)現(xiàn)這個過程。

Angular 框架實(shí)現(xiàn)數(shù)據(jù)綁定，一種讓模板各部分與組件的各部分相互聯(lián)系的機(jī)制。在模板HTML中添加綁定標(biāo)記，Angular 會連接模板和組件。

意味著，我們刻意自動實(shí)現(xiàn)視圖數(shù)據(jù)的更新，因?yàn)樗壎私M件，可以實(shí)現(xiàn)數(shù)據(jù)的關(guān)聯(lián)。

看一個示例：

// app/hero-list.component.ts

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

觀察到在這個模板HTML里，有一些非標(biāo)準(zhǔn)HTML的字符。

{{hero.name}} 插值表達(dá)式：在元素中顯示組件的 hero.name屬性的值。
[hero] 屬性綁定：把父組件的值傳到子組件的 hero 屬性中。
(click) 事件綁定：當(dāng)用戶點(diǎn)擊元素時調(diào)用方法。

文件之間的互相關(guān)系需要梳理清楚。
雙向數(shù)據(jù)綁定：同時實(shí)現(xiàn)屬性綁定和事件綁定的功能。看示例：

// app/hero-detail.component.ts

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

數(shù)據(jù)屬性的值會從具有屬性綁定的組件傳到輸入框，事件綁定使用戶的修改被傳回組件，把屬性值設(shè)為最新的值。

指令

Angular 模板是動態(tài)的。當(dāng) Angular 渲染它們時，它會根據(jù)指令對DOM進(jìn)行修改。

就是說解析模板HTML的時候，會解析其中的指令。

指令是一個帶有指令元數(shù)據(jù)的類。

指令是一個類，并且它含有指令源數(shù)據(jù)。

在TypeScript中，要通過 @Directive 裝飾器把元數(shù)據(jù)附加到類上。

和之前的類的元數(shù)據(jù)一樣，通過 @Component 裝飾器把元數(shù)據(jù)附加到后面的類，編程組件類。這個就是通過 @Directive 裝飾器把一些元數(shù)據(jù)附加到后面的指令類。

結(jié)構(gòu)型指令：通過在DOM中添加、移除、替換元素修改布局。ngFor 、 ngIf。

屬性指令：修改現(xiàn)有元素的外觀或行為。ngModel

服務(wù)

服務(wù)分很多種，值、函數(shù)、應(yīng)用所需的特性。

幾乎任何東西都可以是一個服務(wù)。典型的服務(wù)是一個類。

例如：

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

組件是最大的服務(wù)消費(fèi)者。

組件的一些操作需要服務(wù)提供一些數(shù)據(jù)。

示例，把日志記錄顯示到瀏覽器控制臺：

// app/logger.service.ts

export class Logger {
 log(msg: any)  { console.log(msg); }
 error(msg: any) { console.error(msg); }
 warn(msg: any) { console.warn(msg); }
}

這些服務(wù)使得組件不用去服務(wù)器獲取數(shù)據(jù)、進(jìn)行驗(yàn)證……，這一切都可以通過服務(wù)完成。

組件的任務(wù)就是提供用戶體驗(yàn)，僅此而已！

它介于視圖（由模板渲染）和應(yīng)用邏輯（包括模型）之間。

設(shè)計良好的組件為數(shù)據(jù)綁定提供屬性和方法，對它們不重要的事情委托給服務(wù)。

依賴注入

依賴注入是提供類的新實(shí)例的一種方式，負(fù)責(zé)處理好類所需的全部依賴（服務(wù)）。

Angular 使用依賴注入提供我們需要的組件及組件所需的服務(wù)。

Angular 能通過查看構(gòu)造函數(shù)的參數(shù)類型，來的值組件所需的服務(wù)。

示例：

// app/hero-list.component.ts

constructor(private service: HeroService) { }

構(gòu)造函數(shù)的參數(shù)提到了一個服務(wù)。

當(dāng) Angular 創(chuàng)建組件時，會先為組件所需的服務(wù)找一個注入器（Injector）。

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

也就是說服務(wù)是先于組件被執(zhí)行的。它先處理所有的服務(wù)到一個倉庫，然后再處理組件，組件需要哪個服務(wù)就從倉庫取出來給你。
提供商添加到根模塊，在任何地方使用的都是服務(wù)的同一個實(shí)例：

// app/app.module.ts

providers: [
 BackendService,
 HeroService,
 Logger
],

提供商是確定處理組件之前必須存在所依賴的組件
也可以把它注冊到組件層：

// app/hero-list.component.ts

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

添加到裝飾器元數(shù)據(jù)的屬性中。

依賴注入的要點(diǎn)：

1、依賴注入滲透在整個Angular框架中
2、注入器是機(jī)制的核心
      注入器負(fù)責(zé)維護(hù)一個容器，存放創(chuàng)建過的服務(wù)實(shí)例
      注入器能使用提供商創(chuàng)建一個新的服務(wù)實(shí)例
3、提供商是一個用于創(chuàng)建服務(wù)的配方。
4、把提供商注冊到注入器。

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

最新評論