課程簡介
Angular 是目前最為流行的前端框架之一,學會用 Angular 構建應用,可以把這些代碼復用在多種不
同平臺的應用上 —— Web、移動 Web、移動應用、原生應用和桌面原生應用。同時 Angular 借助
Web Worker 和服務端渲染,達到在如今(以及未來)的 Web 平臺上所能達到的最高速度。
Angular 讓你有效掌控可伸縮性?;?RxJS、Immutable.js 和其它推送模型,能適應海量數(shù)據(jù)需求。
本課程將介紹如何從無到有的使用 Angular 快速搭建一個跨平臺的 Web 應用。
目標收益
掌握 TypeScript 編程技術
掌握 JavaScript 異步編程模型
掌握 Angular 常用的前端開發(fā)工具和快速原型搭建工具。
培訓對象
希望使用 Angular 的前端開發(fā)人員 掌握 Angular 應用框架
課程大綱
Typescript 語法介紹 |
? 類 Classes ? 接口 Interfaces ? 模塊 Modules ? 類型注解 Type annotations ? 編譯時類型檢查 Compile time type checking ? Arrow 函數(shù) (類似 C# 的 Lambda 表達式) |
Angular 程序架構 |
? 模塊 (Modules) ? 組件 (Components) ? 模板 (Templates) ? 元數(shù)據(jù) (Metadata) ? 數(shù)據(jù)綁定 (Data Binding) ? 指令 (Directives) ? 服務 (Services) ? 依賴注入 (Dependency Injection) |
Angular 數(shù)據(jù)顯示 |
通過插值表達式顯示組件的屬性 ? 為數(shù)據(jù)創(chuàng)建實體類 ? NgFor 顯示數(shù)組型屬性 ? 通過 NgIf 實現(xiàn)按條件顯示 |
用戶輸入 |
? 綁定到用戶輸入事件 ? 通過 $event 對象取得用戶輸入 ? 從一個模板引用變量中獲得用戶輸入 ? 按鍵事件過濾 ? 失去焦點事件處理 |
Angular 表單數(shù)據(jù)處理 |
使用組件和模板構建 Angular 表單 ? 用 ngModel 創(chuàng)建雙向數(shù)據(jù)綁定,以讀取和寫入輸入控件的值 ? 跟蹤狀態(tài)的變化,并驗證表單控件 ? 使用特殊的 CSS 類來跟蹤控件的狀態(tài)并給出視覺反饋 ? 向用戶顯示驗證錯誤提示,以及啟用/禁用表單控件 ? 使用模板引用變量在 HTML 元素之間共享信息 |
Angular 依賴注入 |
為什么需要依賴注入? ? Angular 依賴注入 ? 注入器提供商 ? 依賴注入令牌 ? 總結 |
Angular 模板語法 |
HTML ? 插值表達式 ? 模板表達式 ? 模板語句 ? 綁定語法 ? 屬性綁定 ? HTML 屬性、 class 和 style 綁定 ? 事件綁定 ? 使用 NgModel 進行雙向數(shù)據(jù)綁定 ? 內置指令 ? 與 ? 模板引用變量 ? 輸入輸出屬性 ? 模板表達式操作符 |
Angular 測試 |
測試 Angular 組件 ? 測試 Angular 的服務 |
Angular 相關工具介紹 |
? Webpack ? 安裝和使用 ? Loaders ? 插件 ? 概要 ? NPM 腳本集成 ? Angular Cli ? 創(chuàng)建 ? 創(chuàng)建新應用程序 ? 啟動應用 ? 創(chuàng)建組件 ? 創(chuàng)建路由 ? 創(chuàng)建其他東西 ? 測試 ? Linting ? CLI 命令概述 |
Typescript 語法介紹 ? 類 Classes ? 接口 Interfaces ? 模塊 Modules ? 類型注解 Type annotations ? 編譯時類型檢查 Compile time type checking ? Arrow 函數(shù) (類似 C# 的 Lambda 表達式) |
Angular 程序架構 ? 模塊 (Modules) ? 組件 (Components) ? 模板 (Templates) ? 元數(shù)據(jù) (Metadata) ? 數(shù)據(jù)綁定 (Data Binding) ? 指令 (Directives) ? 服務 (Services) ? 依賴注入 (Dependency Injection) |
Angular 數(shù)據(jù)顯示 通過插值表達式顯示組件的屬性 ? 為數(shù)據(jù)創(chuàng)建實體類 ? NgFor 顯示數(shù)組型屬性 ? 通過 NgIf 實現(xiàn)按條件顯示 |
用戶輸入 ? 綁定到用戶輸入事件 ? 通過 $event 對象取得用戶輸入 ? 從一個模板引用變量中獲得用戶輸入 ? 按鍵事件過濾 ? 失去焦點事件處理 |
Angular 表單數(shù)據(jù)處理 使用組件和模板構建 Angular 表單 ? 用 ngModel 創(chuàng)建雙向數(shù)據(jù)綁定,以讀取和寫入輸入控件的值 ? 跟蹤狀態(tài)的變化,并驗證表單控件 ? 使用特殊的 CSS 類來跟蹤控件的狀態(tài)并給出視覺反饋 ? 向用戶顯示驗證錯誤提示,以及啟用/禁用表單控件 ? 使用模板引用變量在 HTML 元素之間共享信息 |
Angular 依賴注入 為什么需要依賴注入? ? Angular 依賴注入 ? 注入器提供商 ? 依賴注入令牌 ? 總結 |
Angular 模板語法 HTML ? 插值表達式 ? 模板表達式 ? 模板語句 ? 綁定語法 ? 屬性綁定 ? HTML 屬性、 class 和 style 綁定 ? 事件綁定 ? 使用 NgModel 進行雙向數(shù)據(jù)綁定 ? 內置指令 ? 與 ? 模板引用變量 ? 輸入輸出屬性 ? 模板表達式操作符 |
Angular 測試 測試 Angular 組件 ? 測試 Angular 的服務 |
Angular 相關工具介紹 ? Webpack ? 安裝和使用 ? Loaders ? 插件 ? 概要 ? NPM 腳本集成 ? Angular Cli ? 創(chuàng)建 ? 創(chuàng)建新應用程序 ? 啟動應用 ? 創(chuàng)建組件 ? 創(chuàng)建路由 ? 創(chuàng)建其他東西 ? 測試 ? Linting ? CLI 命令概述 |