Angular 開發實戰：從零開始
897 students enrolled
Angular 開發實戰：從零開始
掌握 Angular 開發框架的重要知識與觀念
Bestseller
897 students enrolled
Price:
$139.99
30-Day Money-Back Guarantee
This course includes
- 5.5 hours on-demand video
- 1 article
- 1 downloadable resource
- 1 Practice Test
- Full lifetime access
- Access on mobile and TV
- Assignments
- Certificate of Completion
Training 5 or more people?
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business
What you'll learn
- 了解 Angular 開發框架與其優勢
- 學會有效率的利用 Angular 開發前端應用
- 掌握開發 Angular 的重要觀念與開發技巧
Course content
Expand all
55 lectures
05:37:48
+
–
課程簡介
1 lecture
00:25
本課程範例原始碼
00:25
+
–
建立 Angular 開發環境
5 lectures
35:24
認識 Angular CLI 建立的專案架構
14:12
認識 Visual Studio Code 開發環境
10:21
+
–
簡介 Angular 開發框架
4 lectures
20:16
關於 AngularJS 與 Angular 開發框架
04:27
了解 Angular 的優點與主要特色
05:47
認識 Angular 開發語言：TypeScript
06:17
理解 Angular 應用程式與元件
03:45
隨堂測驗
3 questions
+
–
了解 Angular 基本架構與啟動流程
6 lectures
43:16
認識 Angular 應用程式啟動流程
12:26
使用 Angular CLI 快速建立元件與範本
09:08
將靜態檔案加入 Angular CLI 建立的專案
04:53
將網頁 HTML 加入到 Angular 應用程式
05:54
Preview
04:40
升級 Angular 應用程式到新版的方法
06:15
+
–
掌握 Angular 範本語法與資料繫結
22 lectures
01:57:48
學習資料繫結方法：內嵌繫結 (Interpolation)
03:52
學習資料繫結方法：屬性繫結 (Property Binding)
08:33
學習資料繫結方法：事件繫結 (Event Binding)
04:57
學習資料繫結方法：事件繫結 - 使用 $event 參數
04:41
學習資料繫結方法：事件繫結 - 使用具有型別的 $event 參數
03:24
2 questions
學習資料繫結方法：雙向繫結 (Two-way Binding)
11:50
認識範本參考變數 (Template reference variables)
07:26
學習 Angular 元件型指令 (Component Directives)
10:19
學習 Angular 屬性型指令 (Attribute Directives) - NgStyle
08:02
學習 Angular 屬性型指令 (Attribute Directives) - NgClass
03:02
學習 Angular 結構型指令 (Structural Directives) - NgIf
04:24
學習 Angular 結構型指令 (Structural Directives) - NgSwitch
03:49
學習 Angular 結構型指令 (Structural Directives) - NgFor
11:59
學習 Angular 使用 Pipes 管線元件 - uppercase 與 lowercase
02:35
學習 Angular 使用 Pipes 管線元件 - number
05:36
學習 Angular 使用 Pipes 管線元件 - currency
03:52
學習 Angular 使用 Pipes 管線元件 - percent
01:21
學習 Angular 使用 Pipes 管線元件 - date
03:26
學習 Angular 使用 Pipes 管線元件 - json
01:30
學習 Angular 使用 Pipes 管線元件 - slice
03:34
在範本中使用安全導覽運算子 (safe navigation operator)
06:45
如何避免在範本中出現 TypeScript 型別錯誤
02:51
+
–
認識 Angular 元件架構與模組
11 lectures
01:17:51
簡介 Angular 元件架構
03:19
建立 Angular 功能模組
04:25
將現有 Angular 元件加入功能模組
08:11
定義 Angular 元件的輸入介面 - @Input()
04:54
介紹 ngOnInit 與 ngOnDestroy 生命週期 Hook
06:20
定義 Angular 元件的輸出介面 - @Output()
13:18
解釋單向資料流與實作不可變的物件
04:21
實作單向資料流與實作不可變的物件 - 1
07:11
實作單向資料流與實作不可變的物件 - 2
11:32
介紹 ngOnChanges 生命週期 Hook
06:46
講解 ngOnChanges 生命週期 Hook 的實務運用
07:34
+
–
認識 Angular 服務元件、相依注入與 HttpClient
6 lectures
34:18
建立 Angular 服務元件與實作相依注入
07:17
透過服務元件重構現有元件的程式碼
08:23
了解 @Injectable() 裝飾器與注入 HttpClient 服務元件
03:56
學習 HttpClient 基本使用方法 - get()
03:40
重構 DataService 服務元件 - 回傳 Observable 物件
08:17
使用 async 管道元件訂閱 Observable 物件
02:45
Requirements
- 了解基礎 HTML / CSS / JavaScript 語法
- 具有基礎的程式設計概念 (寫過任何一種程式語言即可)
Description
Angular 框架經過數年的發展，框架本身已經相當成熟，不但進入門檻越來越低，在執行速度、開發效率、學習曲線方面，也都得到了一個相當不錯的平衡點。我們都知道，網頁前端技術日新月異，但就我長期觀察下來，近兩年來 Angular 框架發展已經相當穩定，官方團隊也不斷精進整個開發生態，無論是在開發工具的支援，或是透過 Angular CLI 加速大型專案管理，都已經有相當程度的效益。現在，就是投入 Angular 學習的最佳時機！
本課程歷經數月的精心策劃、製作、剪輯，並特別強調新手入門 Angular 開發框架所需注意的各項細節，課程中穿插著理論與實務，幫助學員更快的理解 Angular 正確的開發觀念，也透過影片中的實際操作，教導學員一些實用的開發技巧。只要你認真學習，並動手實作，相信可以大幅提升 Angular 應用程式的開發效率，縮短自己嘗試錯誤的時間，提高學習效率。
Who this course is for:
- Web 開發人員
- 網頁前端工程師
- 網頁設計師