angular-zero icon indicating copy to clipboard operation
angular-zero copied to clipboard

Published 20 hours ago • verified publisher icon doggy8088
→

Metadata

Angular 開發實戰：從零開始

簡介

此儲存庫是【Angular 開發實戰：從零開始】線上課程的範例程式碼，以下是課程介紹與近期優惠訊息。  

Angular 開發實戰：從零開始

掌握 Angular 開發框架的重要知識與觀念

說明

Angular 框架經過數年的發展，框架本身已經相當成熟，不但進入門檻越來越低，在執行速度、開發效率、學習曲線方面，也都得到了一個相當不錯的平衡點。我們都知道，網頁前端技術日新月異，但就我長期觀察下來，近兩年來 Angular 框架發展已經相當穩定，官方團隊也不斷精進整個開發生態，無論是在開發工具的支援，或是透過 Angular CLI 加速大型專案管理，都已經有相當程度的效益。現在，就是投入 Angular 學習的最佳時機！

本課程歷經數月的精心策劃、製作、剪輯，並特別強調新手入門 Angular 開發框架所需注意的各項細節，課程中穿插著理論與實務，幫助學員更快的理解 Angular 正確的開發觀念，也透過影片中的實際操作，教導學員一些實用的開發技巧。只要你認真學習，並動手實作，相信可以大幅提升 Angular 應用程式的開發效率，縮短自己嘗試錯誤的時間，提高學習效率。

目標受眾是誰？

  • Web 開發人員
  • 網頁前端工程師
  • 網頁設計師

課程大綱

  • 建立 Angular 開發環境

    • 安裝 Chocolatey 套件管理器 (Windows)
    • 安裝必要的 Angular 開發工具 (Windows)
    • 使用 Angular CLI 建立 Angular 專案骨架
    • 認識 Angular CLI 建立的專案架構
    • 認識 Visual Studio Code 開發環境

  • 簡介 Angular 開發框架

    • 關於 AngularJS 與 Angular 開發框架
    • 了解 Angular 的優點與主要特色
    • 認識 Angular 開發語言：TypeScript
    • 理解 Angular 應用程式與元件
    • 隨堂測驗

  • 了解 Angular 基本架構與啟動流程

    • 認識 Angular 應用程式啟動流程
    • 使用 Angular CLI 快速建立元件與範本
    • 將靜態檔案加入 Angular CLI 建立的專案
    • 將網頁 HTML 加入到 Angular 應用程式
    • 發行與部署 Angular 應用程式的方法
    • 升級 Angular 應用程式到新版的方法

  • 掌握 Angular 範本語法與資料繫結

    • 學習資料繫結方法：內嵌繫結 (Interpolation)
    • 學習資料繫結方法：屬性繫結 (Property Binding)
    • 學習資料繫結方法：事件繫結 (Event Binding)
    • 學習資料繫結方法：事件繫結 - 使用 $event 參數
    • 學習資料繫結方法：事件繫結 - 使用具有型別的 $event 參數
    • 嘗試運用 Angular 資料繫結方法
    • 學習資料繫結方法：雙向繫結 (Two-way Binding)
    • 認識範本參考變數 (Template reference variables)
    • 學習 Angular 元件型指令 (Component Directives)
    • 學習 Angular 屬性型指令 (Attribute Directives) - NgStyle
    • 學習 Angular 屬性型指令 (Attribute Directives) - NgClass
    • 學習 Angular 結構型指令 (Structural Directives) - NgIf
    • 學習 Angular 結構型指令 (Structural Directives) - NgSwitch
    • 學習 Angular 結構型指令 (Structural Directives) - NgFor
    • 學習 Angular 使用 Pipes 管線元件 - uppercase 與 lowercase
    • 學習 Angular 使用 Pipes 管線元件 - number
    • 學習 Angular 使用 Pipes 管線元件 - currency
    • 學習 Angular 使用 Pipes 管線元件 - percent
    • 學習 Angular 使用 Pipes 管線元件 - date
    • 學習 Angular 使用 Pipes 管線元件 - json
    • 學習 Angular 使用 Pipes 管線元件 - slice
    • 在範本中使用安全導覽運算子 (safe navigation operator)
    • 如何避免在範本中出現 TypeScript 型別錯誤

  • 認識 Angular 元件架構與模組

    • 簡介 Angular 元件架構
    • 建立 Angular 功能模組
    • 將現有 Angular 元件加入功能模組
    • 定義 Angular 元件的輸入介面 - @Input()
    • 介紹 ngOnInit 與 ngOnDestroy 生命週期 Hook
    • 定義 Angular 元件的輸出介面 - @Output()
    • 解釋單向資料流與實作不可變的物件
    • 實作單向資料流與實作不可變的物件 - 1
    • 實作單向資料流與實作不可變的物件 - 2
    • 介紹 ngOnChanges 生命週期 Hook
    • 講解 ngOnChanges 生命週期 Hook 的實務運用

  • 認識 Angular 服務元件、相依注入與 HttpClient

    • 建立 Angular 服務元件與實作相依注入
    • 透過服務元件重構現有元件的程式碼
    • 了解 @Injectable() 裝飾器與注入 HttpClient 服務元件
    • 學習 HttpClient 基本使用方法 - get()
    • 重構 DataService 服務元件 - 回傳 Observable 物件
    • 使用 async 管道元件訂閱 Observable 物件

我會學些什麼呢？

  • 了解 Angular 開發框架與其優勢
  • 學會有效率的利用 Angular 開發前端應用
  • 掌握開發 Angular 的重要觀念與開發技巧

要求

  • 了解基礎 HTML / CSS / JavaScript 語法
  • 具有基礎的程式設計概念 (寫過任何一種程式語言即可)

最新優惠

← Metadata

31
Stars
20
Forks
Watchers

Owner

verified publisher icon doggy8088

Metadata

Angular 開發實戰：從零開始

Back