@[toc]
Angular2的核心組件
- 組件
- 元數據
- 模板
- 數據綁定
- 服務
- 指令
- 依賴注入
-
模塊
在這里插入圖片描述
核心模塊詳解
組件
以Angular2實現的通訊錄的舉例
- ContactApp：通訊錄app
- Header：所有聯系人
- ContactList：聯系人列表
- Footer：底部
- Contact：各個聯系人
在這里插入圖片描述
組件要素
在這里插入圖片描述
組件通訊機制
在這里插入圖片描述
全生命周期支持
在這里插入圖片描述
組件示例
- 裝飾器：用來修飾一個類，賦予一個類更豐富的信息，里面包含元數據
-
組件類：組件的業務邏輯
在這里插入圖片描述
組件渲染
在這里插入圖片描述
組件綁定
在這里插入圖片描述
組將綁定和事件綁定來實現數據雙向流動流動的效果
組件樹
在這里插入圖片描述
注意：1. 父組件ContactList需要用到子組件Contact定義的一些元素標簽，還需要有一個導入的過程，借助模塊來實現
- 屬性綁定：負責組件類與模板之間的數據傳遞，同時也但負著組件間數據通信重任
元數據
元素據與裝飾器之間的通信
在這里插入圖片描述
模板
在這里插入圖片描述
數據綁定
插值的方式傳遞數據
在這里插入圖片描述
其他常見的數據綁定的方式
- 屬性綁定
- 事件綁定
- 雙向綁定
在這里插入圖片描述
指令
組件繼承于指令，包含屬性指令和結構指令。
在這里插入圖片描述
在這里插入圖片描述
指令是支持自定義的
在這里插入圖片描述
服務
在這里插入圖片描述
依賴注入
在這里插入圖片描述
在這里插入圖片描述
分層注入
在這里插入圖片描述
在這里插入圖片描述
分層注入源于組件樹的結構，互不影響同級的書節點
模塊
在這里插入圖片描述
文件模塊
在這里插入圖片描述
文件模塊使用
在這里插入圖片描述
應用模塊
在這里插入圖片描述
- 按照功能進行包裝組成了應用模塊
- 同一個模塊內時可以組件調用指令，但是跨模塊組件不允許調用
應用示例
在這里插入圖片描述
這里講解使用的時一個NgModule的一個裝飾器，里面包換了一些元數據
- declarations:包裝組件或指令等
- providers：依賴注入，能夠作用于組件（僅能該組件和子組件使用）；同樣也能作用于某個模塊上（可以在應用全局），只是作用于不一樣
- imports：導入其他模塊，能使用該模塊暴露出來的指令等
- bootstrap：設置根組件，指定angular2整個應用的根組件，只在根模塊使用
- exports：導出組件或指令等，與imports結合使用
應用模塊之間的關系
在這里插入圖片描述
- 模塊C中，組件被export了，所以可以被調用
- 模塊C中，指令沒有被export，所以可以被調用
- 模塊C中，服務的作用于是全局的，所以可以被應用內的所有組件調用
一個應用中的所有模塊
在這里插入圖片描述
應用的功能特性，切分成各種各樣的模塊
- 根模塊
- 特性模塊
- 共享模塊
- 核心模塊
在這里插入圖片描述
