Microsoft - U2347

新世代Web前端Angular開發實戰Part 1

The new generation of Web front-end Angular development combat Part 1
  • 時數：28小時
  • 費用：NT$ 22,000
  • 點數：5.5

選擇查詢分區開課時間

地點 班號 日期 時間 報名

目前查無開課時段

詳細開課時間請洽詢業務
新竹、台中、高雄如有上課需求，請參考台北開課日期，洽當地服務人員依需求加開遠距開課日期

聯絡恆逸

教材

恆逸專用教材

課程目標

Angular是由Google推出的開放源碼的前端網頁框架(Framework)，前端技術牽涉到JavaScript、HTML、CSS，JavaScript動輒千百行的程式難以維護與偵錯，Angular是以JavaScript為基底(2.0版後採用Microsoft的TypeScript)的框架，能夠寫出好維護、易偵錯、可擴充、跨平台的應用程式。

Angular可以完成絕大多數的使用者介面及前端的需要，但是資料仍要靠後端的供應，在課程中我們會以Angular 13.x以上的版本教學，並且介紹如何使用Angular存取Web API遠端資料(本課程Web API使用Microsoft ASP.NET Core Web API為伺服器端的範例)，實作一個完整的網頁應用程式。

適合對象

網頁開發人員

預備知識

需熟悉JavaScript、HTML、CSS及C#、ASP.NET Core

已完成以下課程所具備技術能力

U2754：TypeScript程式語言

課程內容

  1. 前端網頁應用的利器Angular

    ● 套件安裝、工具

    ● 認識專案結構

    ● 認識SPA與Angular開發架構

  2. 使用Angular實作前端MVC的設計模型

    ● 插入指示詞

    ● View與Controller

    ● Model

  3. Angular基礎

    ● 了解Angular元件生命週期

    ● 元件之間資料共享(@Input & @Output)

    ● HTML與Angular指示詞(Directive)的搭配

    ● ngFor、 *ngIf、ngSwitch …等結構性語法的使用

  4. Angular Route淺談

    ● 路由的運作原理

    ● RouteLink、Router-Outlet

    ● 使用程式指向路由(navigate)

    ● 預設首頁的設置

    ● NotFound的處理

  5. Angular深入設計

    ● 自訂Directive

    ● 使用Pipes轉換資料

    ● 自訂Pipe轉換功能

  6. 屬性綁定、事件綁定的處理

    ● ngModel與資料的綁定

    ● 自訂元件的屬性、事件綁定的設計

  7. 表單、驗證、資料繫結

    ● Reactive Form、Template-Driven Form的開發模型

    ● 兩者的特性與選擇

    ● ngModel的驗證能力

    ● 自訂錯誤驗證

  8. Service與DI依存注入

    ● 依存注入的運作原理

    ● Service的實作與使用

    ● 使用HTTPClient存取網路資源

  9. 設計ASP.NET Core Web API

  10. 使用Angular連結ASP.NET Core Web API

    ● 跨網域(CORS)的問題解決

    ● Angular資料存取WebAPI的查詢、新增、刪減、修改

  11. 部署Angular應用程式

    ● 使用IIS為目標伺服器

    ● ASP.NET Core Web API的部署

    ● Angular的部署

學會技能

  1. 了解如何選取前端開發框架(Framework)，如React、Angular、Vue.js
  2. 使用Angular為您的公司建立內部、外部網站
  3. 能夠透過網頁收集使用者資料，並儲存至資料庫(藉由ASP.NET Core Web API)
  4. 能夠區別何謂前端開發與後端開發
  5. 能夠熟悉開發工具的操作，並善用工具功能加速網站設計
  6. 如何安裝與設定Angular套件，並設定工作環境
  7. 能夠利用瀏覽器進行網頁程式除錯，提升網站錯誤診斷與偵錯的技能