github Source code
希望透過了解預設的 Angular 樣式機制（模擬封裝）在底層的工作原理來幫助我們更清楚的如何使用 Angular 所提供的一些特殊選擇器(如： :host、:host-context、::ng-deep等)的用法。
在下面的實作過程將會使用到下列技術:
Angular cli 16 Angular 16 Router Standalone component CSS & SCSS 瀏覧器的開發者工具 CSS 的樣式污染 css 沒有作用域的概念，這就導致 css 在書寫的時候都是全局作用域。造成開發者在撰寫過程中會造成因 classname 相同而產生樣式污染及 css 規則層疊(CSS Cascade)。 隨著 SPA 應用的興起，全部的 css 會在同一個環境中同時進行加載，相互影響的問題更加嚴峻。
Angular 元件樣式原理 Angular 以元件組合為基本原理來建構一支 web application，在 Angular 元件中預設採用的“檢視封裝”(View encapsulation)是“ViewEncapsulation.Emulated” (模擬封裝)。在這個設定值下 Angular 會修改元件的 CSS 選擇器，使它們只應用於元件的檢視，不影響應用程式中的其他元素(模擬 Shadow DOM 行為)。
建立 Angular Web Application 使用 npm init 指令建立一支 web application:...
github Source code
在網頁上實作可拖曳的使用者介面可大符增加應用程式使用操作的友善性。
透過拖放，使用者可以使用滑鼠或觸控板點擊檔案並將其拖曳到可放置元素（放置區域），然後透過釋放滑鼠按鈕來「放置」檔案。這使您可以相對輕鬆地建立非常直觀的用戶體驗。
要在 angular app 上實現這樣的功能除了可以透過第三方的 UI Component (如：igniteui、ngx-drag-drop)的支援外，最方便的解決方案是使用 Angular 內建的功能 Material CDK 來實作。
Angular Drag and Drop CDK（元件開發套件）提供自由拖曳、清單內排序、清單之間移動項目、動畫、觸摸裝置、自訂拖曳手把(handle)等的支援。
在下面的實作過程將會使用到下列技術:
Angular cli 16 Bootstrap 5 (UI Framework) Angular 16 Router Standalone component Angular Material CDK CdkDrag CdkDragHandle CdkDropList CdkDropListGroup moveItemInArray 建立一個 Angular 應用程式 使用 angular cli 建立應用程式 將採 standalone 架構來建置這個應用程式，使用以下指令如下
$ npm init @angular dragDropApp -- --routing --style scss --standalone && cd dragDropApp Need to install the following packages: @angular/create@16....
Typed Form in angular 從 Angular 14 開始，Angular 為 Reactive Forms 添加了完整的內建類型安全功能，FormGroup、FormControl、FormArray、FormBuilder 皆預設具備有型別，好處當然就是在開發階段就可以避免一些因為型別而産生的問題錯誤。
而原有在 Angular 13 中的 FormGroup、FormControl、FormArray、FormBuilder被改名成 UntypedFormGroup、UntypedFormControl、UnTypedFormArray、UnTypedFormBuilder，若有需要使用到跨型別表單的用法，可以透過這些原有的功能來完成。
使用這些內建 Typeed form 功能除了獲得額外的型別安全好處，更令人高興的是無需對原程式進行任何代碼更改，就來看看要如何取得這些優點。
以下面的 login Compoenet 為例，和舊版的程式相同，使用 FormBuilder API 來宣告 email 和 password 兩個表單欄位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 @Component({ selector: 'login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent { loginForm = this....
在 Angular 中實現 CAPTCHA 驗證碼功能 先來看看完成後的效果：
關於 reCAPTCHA 目前 reCAPTCHA 共有 v2、v3、Enterprise 三種版本。在此我們將採用 v2。使用 reCAPTCHA 需先申在 google 網站上申請 API Key，申請完成後會有二個 API Key，一個是被用來放在前端 App 中，另一個是使用在呼叫 Google API 取得驗證結果時要用的。申請網站在 https://www.google.com/recaptcha/admin，使用 Gmail 帳號登入，若從未申請過會跳到註冊新網站頁面：
識別這組 Key 用的標籤文字 reCAPTCHA 類型 (使用 v2) 應用網域 (本機測試可加 localhost) 登入 Gmail 是預設擁有者，可加入其他管理者 接受服務條款 傳送通知給擁有者（發生問題或流量異常時發送通知） 使用 Gmail 帳號進行登入 輸入好資料後按下提交
完成後會産生二個 api key:
按下“複製網站金鑰”備用。（將放至 angular login component 中）
設置專案環境 這個專案不會從頭從無到有紀錄每一個建置的步驟，而是採取套用 “使用 Angular 14 建立 Reactive Form 表單驗證範例” 這篇筆記所完成的程式碼來擴充 reCAPTCHA 功能。...
github Source code
如何在 Angular 中使用 Standalone Components 本篇將要紀錄如何使 Angular 15 環境中使用 Standalone component。從版本 14 起就開始支援 Standalone component，Angular 15則正式的引入了獨立組件作為構建無模塊應用程序的簡單方法。獨立組件的好處之一是它們使新開發人員更容易學習和使用 Angular，因為它們可以不用使用到 NgModule。
Angular 從第二個版本起，@NgModule就已是一個重要的核心功能，透過 @NgModule 為一個個單位來組織我們的應用程式，包含整個應用程式的啟動，所以每個 angular 應用程式都至少要有一個模組（也稱為根模組），由此可見它的重要性。說它是 Angular 的特色之一一點也不為過。但近年來這個特色功能卻也成為其他類似架構的攻擊目標，為了使系統支援更多樣化，Angular 15 正式引入了 Standalone 的各式運用。
在本篇筆記中會提及如何建立及使用一個 Standalone component、如何在一個 Standalone component中去使用另一個 Standalone 子元件、如何在原有模式中(有 @NgModule)中載入 Standalone component，到最後如何在一個專案中完全不使用到 @NgModule 功能。
建立新專案 透過 npm init @angular 語法來建立一個 angular project。
$ npm init @angular stanaloneComponent -- --routing --style=scss && cd standaloneComponent 建立 Standalone Component $ npx ng g c components/containerLayout --standalone --inline-style --inline-template --flat 在由 cli 産生的程式碼架構中(container-layout....