1.Angular 應(yīng)用的基本構(gòu)造塊
Angular 是一個用 HTML 和 JavaScript 或者一個可以編譯成 JavaScript 的語言(例如 Dart 或者 TypeScript )誉裆,來構(gòu)建客戶端應(yīng)用的框架。
該框架包括一系列庫缸濒,有些是核心庫足丢,有些是可選庫。
我們是這樣寫 Angular 應(yīng)用的:用 Angular 擴(kuò)展語法編寫 HTML 模板庇配, 用組件類管理這些模板斩跌,用服務(wù)添加應(yīng)用邏輯, 用模塊打包發(fā)布組件與服務(wù)捞慌。
然后耀鸦,我們通過引導(dǎo)根模塊來啟動該應(yīng)用。 Angular 在瀏覽器中接管啸澡、展現(xiàn)應(yīng)用的內(nèi)容袖订,并根據(jù)我們提供的操作指令響應(yīng)用戶的交互
這個架構(gòu)圖展現(xiàn)了 Angular 應(yīng)用中的 8 個主要構(gòu)造塊:
- 模塊 (module)
- 組件 (component)
- 模板 (template)
- 元數(shù)據(jù) (metadata)
- 數(shù)據(jù)綁定 (data binding)
- 指令 (directive)
- 服務(wù) (service)
- 依賴注入 (dependency injection)
2.模塊
Angular 應(yīng)用是模塊化的,并且 Angular 有自己的模塊系統(tǒng)嗅虏,它被稱為 Angular 模塊或 NgModules洛姑。
Angular 模塊很重要。這里只是簡單介紹皮服,在 Angular 模塊中會做深入講解楞艾。
每個 Angular 應(yīng)用至少有一個模塊(根模塊)参咙,習(xí)慣上命名為AppModule。
根模塊在一些小型應(yīng)用中可能是唯一的模塊硫眯,大多數(shù)應(yīng)用會有很多特性模塊蕴侧,每個模塊都是一個內(nèi)聚的代碼塊專注于某個應(yīng)用領(lǐng)域、工作流或緊密相關(guān)的功能两入。
Angular 模塊(無論是根模塊還是特性模塊)都是一個帶有@NgModule裝飾器的類净宵。
NgModule是一個裝飾器函數(shù),它接收一個用來描述模塊屬性的元數(shù)據(jù)對象谆刨。其中最重要的屬性是:
- declarations 聲明本模塊中擁有的視圖類塘娶。Angular 有三種視圖類:組件、指令和管道痊夭。
- exports declarations 的子集刁岸,可用于其它模塊的組件模板。
- imports 本模塊聲明的組件模板需要的類所在的其它模塊她我。
- providers 服務(wù)的創(chuàng)建者虹曙,并加入到全局服務(wù)列表中,可用于應(yīng)用任何部分番舆。
- bootstrap 指定應(yīng)用的主視圖(稱為根組件)酝碳,它是所有其它視圖的宿主。只有根模塊才能設(shè)置bootstrap
屬性恨狈。
下面是一個簡單的根模塊:
AppComponent的export語句只是用于演示如何導(dǎo)出的疏哗,它在這個例子中并不是必須的。根模塊不需要導(dǎo)出任何東西禾怠,因?yàn)槠渌M件不需要導(dǎo)入根模塊返奉。
我們通過引導(dǎo)根模塊來啟動應(yīng)用。 在開發(fā)期間吗氏,你通常在一個main.ts文件中引導(dǎo)AppModule芽偏,就像這樣:
Angular 模塊 vs. JavaScript 模塊
Angular 模塊(一個用@NgModule裝飾的類)是 Angular 的基礎(chǔ)特性。
JavaScript 也有自己的模塊系統(tǒng)弦讽,用來管理一組 JavaScript 對象污尉。 它與 Angular 的模塊系統(tǒng)完全不同且完全無關(guān)。
JavaScript 中往产,每個文件是一個模塊被碗,文件中定義的所有對象都從屬于那個模塊。 通過export關(guān)鍵字仿村,模塊可以把它的某些對象聲明為公共的蛮放。 其它 JavaScript 模塊可以使用import 語句來訪問這些公共對象。
Angular 模塊庫
Angular 提供了一組 JavaScript 模塊奠宜“洌可以把它們看做庫模塊。
每個 Angular 庫的名字都帶有@angular前綴压真。
用 npm 包管理工具安裝它們娩嚼,用 JavaScript 的import語句導(dǎo)入其中某些部件。