Open Source - U2447
Angular Standalone模式深度探索Part 1
The new generation of Web front-end Angular development combat Part 1
- 時數：28小時
- 費用：NT$ 22,000
- 點數：5.5
選擇查詢分區開課時間
教材
課程目標
有鑑於Angular v2到v16版使用Module模式學習途徑過於陡峭，也使許多新朋友在學習上為之卻步，好消息是經過v14之後開發者預覽的Standalone模式，已經在Angular v17之後成為預設專案類型，讓Angular學習上更加輕鬆，專案也較為輕盈有效率 ...。Angular 17是一個大躍進，它新增了@for … 結構性語法、SSR、Signal ... ，在效能上、開發的便利性都有許多的增長。
這個課程將讓您深入了解Angular框架的基礎知識和應用技巧。一開始，會帶您認識Angular框架，包括如何安裝開發環境和工具，以及探索專案的結構和常用指令集。接著，將進入您的第一個Angular專案，課程中會介紹Standalone專案模式，並引導您了解程式的引導流程和元件的組成。在課程的後續部分，則會深入探討頁面和結構化控制的技術，學習如何使用@if、@switch、@for等指令來控制頁面流程，同時您將了解DI的觀念並以此設計Service，還有如何使用HttpClient。透過這個課程，也會介紹如何使用Angular存取Web API遠端資料，以及以Microsoft ASP.NET Core Web API作為伺服器端的範例，讓學員能夠實作一個CRUD完整的網頁應用程式。您將打下堅實的Angular基礎，並能夠自信地開始建立您自己的網頁應用程式。
適合對象
想要學習前端網頁開發的人員
預備知識
需熟悉JavaScript、HTML、CSS及C#、ASP.NET Core
課程內容
認識Angular框架
● 環境安裝與開發工具
● 專案結構
● 常用指令集
Angular第一個專案
● 認識Standalone專案模式
● 程式引動流程
● 元件的構成
● 第一個Angular應用程式，常見網頁配置
頁面與結構化控制
● 頁面(Component)的基礎認識
● 使用頁面流程控制@if、@switch、@for
路由初體驗
● 認識路由
● 設計導覽選單(RouteLink、Router-Outlet ...)
● 預設首頁與NotFount的處理
● 動態產生選單
屬性綁定、事件處裡、雙向綁定
Signal基礎
Component的生命週期
設計自訂控制項、自訂Director、自訂Pipe
表單、驗證、資料繫結
● 認識Reactive Form、Template-Driven Form的特性
● 實作Template-Driven Form
● Template-Driven Form驗證
● Template-Driven Form自訂驗證
Service與DI依存注入
● 依存注入的運作原理
● Service的實作
● 使用inject注入元件
使用HTTPClient存取網路資源
設計ASP.NET Core Web API
使用Angular連結ASP.NET Core Web API
● 跨網域(CORS)的問題解決
● Angular資料存取WebAPI的查詢、新增、刪減、修改
部署Angular應用程式
● 使用IIS為目標伺服器
學會技能
1.熟悉Angular框架的安裝、開發工具以及專案結構
2.能夠建立第一個Angular專案，了解Standalone專案模式，並能編寫基本的Angular 應用程式
3.掌握頁面與結構化控制，包括使用Angular Component、@if、@switch和@for等指令來控制頁面流程
4.理解路由的概念，能夠設計導覽選單、處理首頁與NotFount，並動態產生選單
5.掌握屬性綁定、事件處理和雙向綁定的使用
6.理解Signal的基礎，能夠在應用程式中有效地使用Signal
7.熟悉Angular Component的生命週期，並能夠適時地處理生命週期事件
8.能夠設計自訂控制項、自訂Directive和自訂Pipe，以滿足應用程式的特定需求
9.掌握表單、驗證和資料繫結的技術，Template-Driven Form的使用及驗證
10.熟悉Service與DI依存注入的原理和實作，並能夠在應用程式中有效地使用 Service
11.能夠使用HttpClient存取網路資源，並了解如何設計ASP.NET Core Web API並連結至Angular
12.熟悉跨網域(CORS)的問題解決方法，並能夠進行CRUD操作以存取Web API資料
13.能夠部署Angular應用程式，並使用IIS作為目標伺服器
這些技能將使您能夠開發出具有良好結構、功能豐富且易於維護的Angular應用程式，並與後端Web API進行有效的資料交互。
備註事項
上課使用Windows平台
本課程使用Visual Studio Code為開發工具
範例會使用VS Code Copilot協助HTML、CSS樣式的生成
建議課程前一天申請GitHub帳號以及開通GitHub Copilot，帳號開通後30天之內免費。本課程若沒有申請GitHub Copilot，範例所需的HTML、CSS樣式的生成需自行打字
相關連結
台北恆逸教育訓練中心
- 02-25149191
- 02-25149292
- 台北市松山區復興北路99號14樓
新竹恆逸教育訓練中心
- 03-5723322
- 03-5745738
- 新竹市光復路二段295號3樓之2
台中恆逸教育訓練中心
- 04-23297722
- 04-23102000
- 台中市西區臺灣大道二段309號2樓
高雄恆逸教育訓練中心
- 07-5361199
- 07-5361698
- 高雄市苓雅區新光路38號4樓之1