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....
github Source code
本文將記錄如何一步步從無到有，使用 Dotnet Core 7.0 建立 ASP.NET Core Web API，其中將會使用到下列技術:
Dotnet CLI Entity Framework 7.0 Json Web Token PostgreSQL DB (Docker Version) ASP.NET Core Generator 專案完成後的檔案結構 ./專案目錄 ├── .config/ │ └── dotnet-tools.json ├── .vscode/ │ ├── launch.js │ └── tasks.json ├── Controller/ │ ├── AuthenticateController.cs │ ├── TodoController.cs │ └── WeatherForecast.cs ├── Data/ │ └── ApiDbContext.cs ├── Migrations/ ├── Models/ │ ├── AuthenticateData.cs │ └── TodoList.cs ├── obj/ ├── Properties/ │ └── launchSettings....
使用 Docker Compose 執行 MSSQL Server 2022 對開發人員而言，使用各式的資料庫管理系統來當應用程式的後端資料存取層是家常便飯。若再考慮上每種資料庫管理系統有不同的版本，肯定會讓你的開發環境負擔過重、過於複雜。使用 Docker 來於適當的時機開啟適用的資料庫管理系統會是一個不錯的選擇。
本篇筆記紀錄使用 docker (docker compose) 來快速的設置 MSSQL 2022。
檢查是否已安裝了 Docker (docker version) $ docker version Client: Docker Engine - Community Version: 23.0.1 API version: 1.42 Go version: go1.19.5 Git commit: a5ee5b1 Built: Thu Feb 9 19:46:56 2023 OS/Arch: linux/amd64 Context: default Server: Docker Engine - Community Engine: Version: 23.0.1 API version: 1.42 (minimum version 1.12) Go version: go1.19.5 Git commit: bc3805a Built: Thu Feb 9 19:46:56 2023 OS/Arch: linux/amd64 Experimental: false containerd: Version: 1....