iT邦幫忙

鐵人檔案

2022 iThome 鐵人賽
回列表
Modern Web

angular專案開發指南 系列

由於經手的專案中經常有機會使用Angular框架,過程中累積了一些前端專案的開發心得,想在此跟大家做個整理與分享。從開始一個新專案的檔案結構介紹,再以官網的範例專案搭配自己常用的前端開發工具帶大家了解Angular專案基本的開發流程。

鐵人鍊成 | 共 30 篇文章 | 10 人訂閱 訂閱系列文 RSS系列文
DAY 11

讓前後端獨立開發的假資料系統 - Json Server

前言 專案需求通常來源於對資料的處理,在專案規劃期間,前端開發人員經常需要先做一些 POC,甚至專案開始後,也經常需要在後端 API 尚未就緒前,先完成前端的功...

2022-09-25 ‧ 由 ShawnWu 分享
DAY 12

製作 Angular Http 通訊服務

前言 大多數前端應用都要透過 HTTP 協議與伺服器通訊,才能下載或上傳資料並訪問其它後端服務。Angular 給應用提供了一個簡化的 HTTP 客戶端 API...

2022-09-26 ‧ 由 ShawnWu 分享
DAY 13

實作租戶管理頁面(1)

前言 假設現在有一個租賃管理服務公司提出一個需求,有一批租戶的資訊需要被維護與管理,我們需要建一個頁面供使用者查詢租戶資訊,並支援新增,修改與刪除租戶資訊。...

2022-09-27 ‧ 由 ShawnWu 分享
DAY 14

實作租戶管理頁面(2)

前言 利用 JSON Server 快速模擬 Restful API,支援開發中最常用的 GET、POST、PUT、PATCH、DELETE、OPTIONS 等...

2022-09-28 ‧ 由 ShawnWu 分享
DAY 15

Angular 表單驗證

前言 驗證使用者輸入的準確性和完整性,可提高資料品質。該頁面顯示瞭如何從 UI 驗證使用者輸入,Angular 提供 範本驅動表單中驗證 與 響應式表單中驗證...

2022-09-29 ‧ 由 ShawnWu 分享
DAY 16

Angular 元件的生命週期

前言 回到基本的概念,今天來討論一下 Angular Lifecycle Hooks,雖然前面我們已經實作了租戶管理元件,但是對於 Angular 元件基本的生...

2022-09-30 ‧ 由 ShawnWu 分享
DAY 17

Angular 專業圖表套件 - Ngx-Echarts

前言 回到網站的首頁,為了量化租戶管理的效能,通常會將資料數據透過圖表的方式呈現,在網路上可以找到許多套件與 Angular 搭配完成各種任務,今天要跟大家介紹...

2022-10-01 ‧ 由 ShawnWu 分享
DAY 18

Angular 組件間資料的傳遞方式

前言 所有前端框架都會遇到一個共同的問題,就是資料與狀態如何在組件之間傳遞,根據元件之間不同的組合關係,大致可分類為父子,兄弟與沒有關係,在 Angular 中...

2022-10-02 ‧ 由 ShawnWu 分享
DAY 19

製作共用指令與管道

前言 Angular 雖然內建許多的指令 @Directive 與管道 @Pipe,但專案開始進行後,就難免遇到需要自訂一些服務的時候,針對一些可以共用的方法或...

2022-10-03 ‧ 由 ShawnWu 分享
DAY 20

i18n 多國語系 - Ngx-Translate

前言 國際化 (i18n) 是一個過程,用於對你的應用進行設計和準備以便在全球不同地區使用。本地化是指為不同的本地環境建構應用版本的過程,包括提取用於翻譯成不同...

2022-10-04 ‧ 由 ShawnWu 分享