angular2+ 初理解
阿新 • • 發佈:2017-07-21
結構 表示 屬性 功能 provide 應該 消費者 dom 部分
一、Angular Module
1、angular 模塊是一個類,它需要NgModule這個裝飾器函數接受一個原數據對象作為參數來描述這個模塊類屬性。
其中最重要的屬性有:
declarations:聲明當前模塊的組件、指令和管道
exports:declarations的子集,可用於其他模塊的組件模版
imports:當前模塊聲明的組件模板需要的類所在的其他模塊
providers:服務的創建者,並加入到全局服務列表,可用於應用任何部分
bootstrap:指定應用的主視圖也稱為根組件,它是所有其他視圖的宿主,只有根模塊才能設置這個屬性。
二、組件
負責控制視圖
通過一些由屬性和方法組成的API與視圖交互
當用戶在這個應用中漫遊時,angular會創建、更新和銷毀組件。應用可以通過生命周期鉤子在組件生命周期的各個時間點插入自己的操作。如ngOnInit()
三、模版
模版由<div><h2>等這樣的典型html元素以及*ngFor、 {{hero.name}}、 (click) 、[hero] 、<hero-detail></hero-detail>等angular模版語法自由組合
四、元數據
修飾類
總結:向代碼中添加元數據,以便angular知道該怎麽做
五、數據綁定
插值表達式:{{item.name}} <li>{{hero.name}}</li>
屬性綁定:[hero] <hero-detail [hero]="selectedHero"></hero-detail>
事件綁定:(click)<li (click)="selectHero(hero)"></li>
雙向綁定:([ngModel])=‘item.name’;ngModel指令組合了屬性綁定和事件綁定功能 <input [(ngModel)]="hero.name">
六、指令
組件也是指令的一種
結構性指令(修改布局):*ngFor、*ngIf、ngSwitch...
屬性型指令(修改DOM元素等):ngModel、ngStyle、ngClass
七、服務
angular的基礎
組件是最大的服務消費者
相對來說,組件本身不從服務器獲取數據、不進行驗證輸入,也不直接往控制臺寫日誌,這些都應該委托給服務
使用原則:把應用邏輯拆分到服務,並通過依賴註入在組件中使用服務
八、依賴註入
依賴註入是提供類的新實例等一種方式,大多數依賴都是服務;
angular通過查看構造函數的參數類型得知組件需要哪些服務;
服務可以註冊到根模塊上,以便任何地方都使用服務的同一個實例,也可以註冊到某個組件裏,則表示該組件的每一個新實例都會有一個服務的新實例。
angular2+ 初理解