如何使用 Github Actions 自動部署 Angular 到 Github Pages
Github 多了一個 Actions 的新功能，當 push 檔案到 Github 的時後，就會自動跑 CI/CD 部署 這個功能真是太方便啦!!! Angular 有提供了一個 Deploy 的功能 這次選用了 angular-cli-ghpages 加入
標籤：ironman2021
2021
Angular Providers
一直以來對 Angular Providers 這部份都還是有存在著半知半解的狀態，就趁著這次機會一次搞懂它吧！ Providers 提供了四種注入方式 Class Provider : useClass Value Provider: useValue Fa
如何在 Angular 獲取 URL 資訊
在實作裡，很多時後我們會將一些必要資訊記錄在網址上，直接在網址裡就能得到我們要的訊息 不用再透過組件將資訊層層傳遞，達到解耦合的效果。 註：一切一切 都只是我用來舉例，不代表為鐵人賽網址真正的實際規劃哦！ 例如：我的鐵人賽主題網址為 https://ithel
如何在 Angular 建立 Breadcrumb (麵包屑)
麵包屑 為提供網站裡的導航，讓使用者容易了解當下所在的位置 剛好也呼應前一天使用 router 的部份 現在位置：首頁 / 列表 / 內容 Angular 裡的 router 架構 通常會命名為 app-routing.module.ts 這裡會需要帶點 rx
Angular 路由守衛(登入篇)
經過了昨天的介紹，今天就來看看使用登入範例囉 今天的登入資料依然是使用 FakeStoreAPI 這裡就做個簡單的驗証，沒填值就不能按按鈕 若是有成功得到 token 就裝這狀態記錄在 setToken$ 裡 在 canEnter 訂閱剛剛的 setToken
Angular 路由守衛
我們在開發的過程中，經常會遇到需要某些權限才能進入的頁面，這時後就會需要路由守衛的機制啦， 而它最常用在登入畫面時 Angular CLI 提供了命令列工具，可以快速建立路由守衛框架檔案： 或 官網介紹：guard 執行後，Angular CLI 會問我們需要
Angular 筆記 css 樣式篇
今天就只是個筆記，單純記錄寫法如何使用，以便自己日後查找，畢竟人非聖賢、會忘難免 XD 套用 className 變數為 isDark，value 必需為 boolean 在 html 的 dom 裡設定 https://angular.tw/api/comm
Angular 客製彈出視窗
因為我的這個 blog 需要一個彈出視窗做提示，而套件裡的樣式我都不喜歡，所以今天就來客製化一個吧！ 這次的彈出視窗會使用 Angular Material 裡的 cdk 來做開發 安裝 cdk 注意： 若發現 @angular/cdk 裡的某些功能不能掛載，
Angular ViewChild 與 ViewChildren 介紹
ViewChild 這個屬性在 Angular 是屬於很常用的一部份 今天就來了解一下 ViewChild 與 ViewChildren 的差別與使用方式吧！ HelloComponent 子組件 屬性裝飾器，用於配置一個檢視查詢。 變更檢測器會在檢視的 DO
如何在 Angular 取得當前頁面的絕對路徑
當有一個連結需要另開新頁時，在 develop 或 production 需要對應到正確的路徑 Angular 提供了這個方式 https://angular.tw/api/common/Locationprepareexternalurl 所以我就做了以下的
Angular 淺拷貝之日記文
又踩雷啦啊哈哈哈哈哈。 來重現一下遇到的情境吧 一開始建了一個 fruit 的物件，裡面有 apple 與 banana 這兩樣空物件 在 OnInit 時，賦予了 apple 與 banana 值 當我按下 button Click 的 時後， apple
使用 Angular 做檔案編碼檢測 (detect-encoding)
前一陣子，後端有個需求是在檔案上傳前，需要提前知道上傳的檔案編碼 是 UTF-8 或是 ascii 等，才能決定要不要將檔案放進資料庫，或是在這之前再做一次轉檔。 今天的內容跟 Angular 比較沒有關係，屬於套件分享，但因也是使用 Angular 實作，所
Angular 轉換 API 資料格式 (Adapter)
今天的內容屬於設計模式的一種。 當我們從後端接到資料後，有時後資料格式往往不是如我們所想，所以會再加工做個轉換的動作。 所以就要使用 TypeScript 來做個轉接器，轉成我們所需的資料！ 就拿前幾天的文章 Angular 如何取得 API 資料 繼續做介紹
Angular ElementRef、TemplateRef、viewContainerRef 的區別
今天就來聊聊 ElementRef、TemplateRef、viewContainerRef，者實說，在這之前一直都沒很認真搞懂這部份 就趁著這次機會一起來看看吧！ 用於檢視 HTML DOM 元素，可以在瀏覽器中取得 DOM 的原生 Element Elem
Angular ng-template 與 ngTemplateOutlet
ngTemplateOutlet 這裡我解釋為 ng-template 裡的插槽 來看看實際上會是如何使用 先來段程式碼，這裡為一筆物件資料 HTML ngTemplateOutlet 這個插槽的名字 我們取做 jsonData 在 ng-template 的
Angular ng-container 與 ng-template
接續昨天的範例。 今天要聊的是 ng-container 與 ng-template 上面程式碼所要表達的是，若是資料大於 0 筆，頁面上就會呈現列表，沒有資料的時後在畫面上顯示 No Data ng-container 在 Angular 的 templat
Angular ngIf 與 Async Pipe
當我們在 template 訂閱一組資料，而需要對它做一些邏輯處理的時後。 .ts .html 若像上述這樣的寫法，會造成重覆訂閱而增加 server 的負擔，所以在實作上，通常會避免這情況發生 將 html 寫法稍做修改 將 products$ async
Rxjs 各種解訂閱方式
昨天說到了將資料訂閱出來渲染在頁面上的事，那麼就就來說說 RxJs 解訂閱這件事吧。 這也是為了避免 memory leak，或重覆訂閱所造成的 BUG，若非有限訂閱，通常在訂閱離開後，都需要解訂閱。 只執行第一次，通常用於第一次進來讀取成功取得資料後，就不需
Angular 如何取得 API 資料
既然昨天已經說了 http post 這件事，那今天就來說說 http get 這部份吧！ 今天的資料依然使用 FakeStoreAPI 樣式套用 Angular Material 從 api 取得列表後，把資料渲染到 html 上 app.module.ts
Angular 如何將多筆資料上傳後，取得全部回傳資料，再送到另一支 API
來回顧一下前幾天的日記文 Angular 圖片上傳之...日記文 程式碼流程規劃之...日記文 與今天介紹的內容有關，如何將多筆資料上傳後，取得全部回傳資料後 再將其資料整理，送到另一支 API 這次將會使用 RxJS 來做處理 我有一筆訂單，裡面有許多的產品
Angular 下拉選單如何選定預設值
當表單送出後，資料庫會記錄送出後的值，下次再進來時，會需要重現上一次所填寫過的內容，這在實作上是很常遇到的事情。 原以為這是件很簡單的事，讀取資料後，直接把值填上後即可(我想得太簡單了)， 當實作時，卻怎麼樣也選不了預設值，後來發現在需要在 select 裡
Angular 冒泡事件
今天就來個說個在新手時期很常遇到，但卻不知為什麼會發生的問題 來看一下我們前幾天的表單範例，與圖上 console 的部份 在操控表單的時後，發現在點選新增欄位時，連submit 也一起被觸發了！ 這是怎麼一回事呢！！！，明明就沒有按送出呀！ 原來是 Java
Angular Reactive Forms 自訂表單驗証器
有表單 當然少不了驗証，這次的情境是 名字是必填欄位。 手機不一定會是必填，但填了後必須符合手機的格式，09 開頭 共 10 碼 來囉！！ 在這個 form 表單的下方 新增一個驗証方式，動態驗証就寫在 validator 這裡面 .ts 若是號碼填寫錯誤，把
程式碼流程規劃之日記文
今天，依然是篇日記文，每天遇到的事有太多好寫了。 一早 同事：Mandy, 今天是 deadline 囉，做好了嗎? 我：還差了 bala bala... 同事：有什麼需要協助的話，要快說哦 我：嗯...好 ! XD 接著繼續處理未完的專案 這次的情境是，表單
Angular 圖片上傳之日記文
本來預定今天要發佈的文章延後了，今天要要來分享這一兩天的踩雷心路歷，花了一半天時間，連鐵人都沒時間寫，還好有一些些存檔 ! 這次公司專案需要做到圖片上傳這部份的處理，因這次的套件對於手動上傳沒有支援太多，所以需要自己處理這部份，接著就是一連串的踩雷過程...
Angular Reactive Form 表單 setValue 與 patchValue 差異
今天就來說說 setValue 與 patchValue 差異這部份吧 一開始不太能理解這 setValue 與 patchValue 到底差在哪裡(官網的說明讓我不是很懂，理解力太差了 XD)，不是一樣都是賦值給 form 嗎 這幾天在使用的過程中，踩了一些
Angular Reactive Form 響應式表單 (formArray)
昨天介紹了 formControl 如何使用 今天來介紹 formArray 這部份老實說花了我不少時間才懂 XD 今天要在表單裡加上喜好，喜好會有很多，所以我們來使用 formArray 處理，預設值先給它一個空陣列 ts 程式裡的 favorites 是一
Angular Reactive Form 響應式表單 (formControl)
昨天我們看了 一長串的表單使用範例 都是經過理解消化後所寫出來的 code ，那麼今天就來聊一聊消化的過程吧！ 一開始 建立一個新的 form 表單，它會是一組的 group form 後面加上! 是 Typescript 2.0 的 non-null 可參考
Angular Reactive Form 表單
表單在實作上是件常見的的處理，為什麼會寫這篇呢？實在是因為我太容易忘了 XD 還記得一開始接觸到表單操控時， Angular reactive form 的官方文件它雖然寫的很清楚，但對於當時剛趟入 Angular 領域的我 還是看的一頭霧水，尤其是在 for