@[toc]
Angular2的核心組件
- 組件
- 元數(shù)據(jù)
- 模板
- 數(shù)據(jù)綁定
- 服務(wù)
- 指令
- 依賴注入
-
模塊
在這里插入圖片描述
核心模塊詳解
組件
以Angular2實現(xiàn)的通訊錄的舉例
- ContactApp：通訊錄app
- Header：所有聯(lián)系人
- ContactList：聯(lián)系人列表
- Footer：底部
- Contact：各個聯(lián)系人
在這里插入圖片描述
組件要素
在這里插入圖片描述
組件通訊機制
在這里插入圖片描述
全生命周期支持
在這里插入圖片描述
組件示例
- 裝飾器：用來修飾一個類远寸，賦予一個類更豐富的信息，里面包含元數(shù)據(jù)
-
組件類：組件的業(yè)務(wù)邏輯
在這里插入圖片描述
組件渲染
在這里插入圖片描述
組件綁定
在這里插入圖片描述
組將綁定和事件綁定來實現(xiàn)數(shù)據(jù)雙向流動流動的效果
組件樹
在這里插入圖片描述
注意：1. 父組件ContactList需要用到子組件Contact定義的一些元素標簽倡怎，還需要有一個導入的過程监署，借助模塊來實現(xiàn)
- 屬性綁定：負責組件類與模板之間的數(shù)據(jù)傳遞钠乏，同時也但負著組件間數(shù)據(jù)通信重任
元數(shù)據(jù)
元素據(jù)與裝飾器之間的通信
在這里插入圖片描述
模板
在這里插入圖片描述
數(shù)據(jù)綁定
插值的方式傳遞數(shù)據(jù)
在這里插入圖片描述
其他常見的數(shù)據(jù)綁定的方式
- 屬性綁定
- 事件綁定
- 雙向綁定
在這里插入圖片描述
指令
組件繼承于指令，包含屬性指令和結(jié)構(gòu)指令俏拱。
在這里插入圖片描述
在這里插入圖片描述
指令是支持自定義的
在這里插入圖片描述
服務(wù)
在這里插入圖片描述
依賴注入
在這里插入圖片描述
在這里插入圖片描述
分層注入
在這里插入圖片描述
在這里插入圖片描述
分層注入源于組件樹的結(jié)構(gòu)搞隐，互不影響同級的書節(jié)點
模塊
在這里插入圖片描述
文件模塊
在這里插入圖片描述
文件模塊使用
在這里插入圖片描述
應(yīng)用模塊
在這里插入圖片描述
- 按照功能進行包裝組成了應(yīng)用模塊
- 同一個模塊內(nèi)時可以組件調(diào)用指令，但是跨模塊組件不允許調(diào)用
應(yīng)用示例
在這里插入圖片描述
這里講解使用的時一個NgModule的一個裝飾器癞季，里面包換了一些元數(shù)據(jù)
- declarations:包裝組件或指令等
- providers：依賴注入余佛，能夠作用于組件（僅能該組件和子組件使用）窍荧；同樣也能作用于某個模塊上（可以在應(yīng)用全局）蕊退，只是作用于不一樣
- imports：導入其他模塊瓤荔，能使用該模塊暴露出來的指令等
- bootstrap：設(shè)置根組件，指定angular2整個應(yīng)用的根組件今瀑，只在根模塊使用
- exports：導出組件或指令等橘荠，與imports結(jié)合使用
應(yīng)用模塊之間的關(guān)系
在這里插入圖片描述
- 模塊C中哥童，組件被export了褒翰，所以可以被調(diào)用
- 模塊C中，指令沒有被export朵你，所以可以被調(diào)用
- 模塊C中抡医，服務(wù)的作用于是全局的魂拦，所以可以被應(yīng)用內(nèi)的所有組件調(diào)用
一個應(yīng)用中的所有模塊
在這里插入圖片描述
應(yīng)用的功能特性芯勘，切分成各種各樣的模塊
- 根模塊
- 特性模塊
- 共享模塊
- 核心模塊
在這里插入圖片描述
