天天看點

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

angular是面向未來的前端開發架構,學習她了解思想比代碼重要,展現的是跨越前後端、大成、優秀的程式設計思想。她是一個完善的工具鍊和開發鍊。

寫angular,你會感覺是在寫java,更像寫c#,面向對象群組件化的思想。

我們是這樣寫 Angular 應用的:用 Angular 擴充文法編寫 HTML 模闆, 用元件類管理這些模闆,用服務添加應用邏輯, 用子產品打包釋出元件與服務。

angular是圍繞元件化建構整個項目的,輔助功能:指令,服務,管道等

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗
Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗
所有的檔案類型

元件:子產品

每個 Angular 應用至少有一個子產品(

根子產品

),習慣上命名為AppModule

元件間通信

傳入(父對子元件通信) @Input()

傳出(子對父元件通信) @Output()

Service(因為service是全局單例的)

路由方式

生命周期鈎子

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

管道

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

内置管道

子產品懶加載

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

子產品和懶加載

路由和動态加載

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

路由傳遞參數

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗
Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

路由守衛

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

注入一個服務來判斷是否可以通路該路由

表單和資料校驗

  • 模闆驅動型表單 (内容都寫在html中)
  • 響應式表單(把邏輯放到class中也就是js中)
  • 動态表單(表單幾乎都是由js代碼動态建立的)

    資料校驗

Angular學習筆記元件:子產品元件間通信生命周期鈎子管道子產品懶加載路由和動态加載路由守衛表單和資料校驗

内置資料校驗規則

自定義的校驗規則可以借助指令來實作