2024年-Angular學習文檔學習課件

Angular2.0by-支昊12組件Component元數(shù)據(jù)Metadata模板Templates數(shù)據(jù)綁定Databinding服務Services指令Directives依賴注入DependencyInjection模塊Module25/5/2024Angular2.0指令服務依賴注入模塊開發(fā)環(huán)境實例代碼TypeScript組件Angular2核心概念路由http請求32組件要素組件組件獨立的Javascript邏輯HTML代碼CSS樣式45/5/2024組件通訊機制父組件子組件子組件輸入接口輸出接口55/5/2024生命周期鉤子ConstructorOnChangesOnInitOnChangesOnDestroy構(gòu)造器初始化第一次觸發(fā)數(shù)據(jù)變化組件初始化運行期間觸發(fā)數(shù)據(jù)變化組件銷毀前65/5/2024組件示例組件類裝飾器元數(shù)據(jù)75/5/2024元數(shù)據(jù)與裝飾器元數(shù)據(jù)裝飾器@Component普通類組件裝飾器：賦予一個類更豐富的信息（元數(shù)據(jù)）85/5/2024模板外部模板template:‘<p>{{title}}</p>’95/5/2024數(shù)據(jù)綁定屬性綁定[value]事件綁定(keyup)雙向綁定[(ngModel)]105/5/2024組件渲染<app-hello></app-hello>115/5/2024數(shù)據(jù)流向父組件{組件類}<模板>屬性綁定事件綁定子組件{組件類}<模板>屬性綁定事件綁定事件綁定屬性綁定@Output@Input125/5/2024指令組件指令繼承自身帶有模板的指令屬性指令結(jié)構(gòu)指令改變組件模板的外觀或行為，如樣式。改變組件模板的DOM結(jié)構(gòu)，如ngIf可以來插入或者移出DOM節(jié)點135/5/2024服務服務是實現(xiàn)專一目的的邏輯單元，如日志服務145/5/2024依賴注入組件引入外部構(gòu)建的一種機制依賴注入組件LoggerService實例化注入155/5/2024分層注入根組件孫組件1孫組件2子組件2子組件1注入LoggerService(warn級別)重新注入LoggerService(debug級別)165/5/2024模塊框架代碼以模塊形式組織（文件模塊）功能單元以模塊形式組織（應用模塊）175/5/2024文件模塊Angular2@angular/core@angular/common@angular/forms@angular/http…核心模塊通用模塊表單模塊網(wǎng)絡模塊更多Import{http}from“@angular/http”//@Component裝飾器Import{Component}from“@angular/core”//@Directive裝飾器Import{Directive}from“@angular/core”Import{ElementRef,Renderer}from“@angular/core”185/5/2024應用模塊組件指令服務指令服務組件指令組件模塊A模塊C模塊Bdeclarations:包裝組件和指令等imports:導入其他模塊providers:依賴注入bootstrap:設置根組件exports:導出組件和指令等195/5/2024應用模塊根模塊啟動特性模塊特性模塊支持懶加載核心模塊共享模塊205/5/2024路由路由是實現(xiàn)導航的一種方式，一個url對應一個頁面，在angular2中是一個組件。默認進入沒有與任何一個path匹配到懶加載215/5/2024網(wǎng)絡請求angular2的http服務是用于從后臺程序獲取或更新數(shù)據(jù)的一種機制，通常情況我們需要將與后臺交換數(shù)據(jù)的模塊做出angular服務，利用http獲取更新后臺數(shù)據(jù)，angular使用http進行后臺調(diào)用采用的是ajax方式，跨域問題需要單獨處理。225/5/2024TypeScriptTypeScriptES6ES5TypeScript是微軟開發(fā)的編程語言· JavaScript的超集，兼容JavaScript· 運行前需預編譯生成JavaScript代碼· 加入類型判斷，編譯時進行類型檢查· 文件擴展名為.ts235/5/2024TypeScriptJavaScriptType245/5/2024開發(fā)環(huán)境Nodejs推薦使用6.0以上版本編輯器IDEA