響應式表單提供了一種模型驅動的方式來處理表單輸入，其中的值會隨時間而變化。本文會向你展示如何建立和更新基本的表單控制元件，接下來還會在一個表單組中使用多個控制元件，驗證表單的值，以及建立動態表單，也就是在執行期新增或移除控制元件。 form 表單 這裡的 require 建儀是寫在 formGroup 裡面去作理管，才可方便的在 js 中看到何為必填值。 <form [formGroup]="subscribeForm" (ngSubmit)="submit()"> <mat-form-field class="w-full"> <input matInput required type="email" formControlName="email" /> <mat-error> Please enter a valid email address </mat-error> </mat-form-field>

angular 原生的 number 需要特別去看一下 decimaPipe Common Pipe pipe 的使用如下，也可以加上 params 的透過: 來傳入 {{today | date:'yyyy/MM/dd HH:mm:ss'}} 下列是 angular 所提供的 pipe ，如下列： 處理日期 format 的 DatePipe

asdf

開發 Angular 就不能不知道 Angular CLI 這個超級好用的命令列工具，有了這個工具，原本渾沌的開發環境，頓時清晰，許多繁瑣的瑣事，一個命令就搞定！這邊是我自己的操作筆記，讓記憶力不佳的我，有個地方可以方便查詢。 這裡的內容不保證最新，但會盡量持續更新。 最即時的文件請參考 Angular CLI 在 Github 上的文件，例如要查 ng new 這個指令的用法，請參考這個連結。 安裝 建議使用 Node.js 的 npm 套件管理工具來安裝 Angular CLI，請使用以下指令安裝： npm install -g angular-cli

angular.json 是 Angular CLI 的控制塔，它提供了 Angular workspace 和 project 的預設配置。 講解了一些 angular.json 的資料架構。 什麼是 Architect 和 Builders 與他們之間的關係。 Angular CLI 是如何透過 Architect 解析命令的。 如何透過 assets 在打包專案時複製完整的資料。 Angular workspace root level 的一個文件，主要是提供 workspace 的配置與 project 的預設配置，供 Angular CLI 中 build 和 development tool 使用。 A file named angular.json at the root level of an Angular workspace provides workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI. Path values given in the configuration are relative to the root workspace folder.

11 升 12 所遇到的坑 cpu 附載過高問題 // service/index.ts server.engine( 'html', ngExpressEngine({ inlineCriticalCss:false, bootstrap: AppServerModule, providers: [

Angular life hoooks constructor 初始化一些參數 放外部的 service 引入 ngOnInit 畫面在一開始進來的時候會執行過一次，建議在此處放 subscribe 的 function，作一些 api 請求動作

首先把你的專案改為 ssr ng add @nguniversal/express-engine ng 會幫你新建立一些資料，資料結構如下 src/ index.html app web page main.ts bootstrapper for client app main.server.ts * bootstrapper for server app

VSCode tool , 可以直接幫忙你測試一個 test ，不用在 npm run test https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest 提示寫法 https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets Basic toBeTruthy()：確認是為為 true 如果為 false, 0, '',null , undefine, NaN，為false Expect · Jest

template 引用 i18n 透過用 pipe <p>{{ 'global.dialog.blacklist.title' | translate }}</p> 透過 js 直接翻譯 this.translate.instant('global.dialog.blacklist.title') 比較不推薦的寫法

Service providers 增加一個 new service $ ng g service [NEW_SERVICE_NAME] 可以看到app.module.ts的providers會增加一個名為UserService的類別 providers: [ UserService ] 在使用上，如果已經有設定好providers後，只要在元件的constructor裡面宣告一個變數是providers裡面設定好的service，就可以在元件裡直接取用了

Angular 路由 建立 component 之後，去 /src/app/app-routing.module.ts 引進 component import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule import { AppComponent } from './app.component'; @NgModule({

Resolver router 轉址後會先經過 resolver 在去到另一個 router ，因此可先在此取得資料，到新頁面時就可直接賦予值 ng generate resolver <folder/name> [options eg. --skip-tests] 在 page 取得值 this.route.data.subscribe((res) => { this.category = res.category.data; });

https://fullstackladder.dev/blog/2022/07/29/speed-up-angular-build-time-by-remove-module-concatenation-plugin/?fbclid=IwAR3vp0PgYzUefL0MQ3pfc19r_BhtOP0TfcUJF0f83VkseGAa9fy8ir3Iyms

這個資料夾通常是放 modules 常用到的 class 用來定義 interface type extend class ，為了方便使用所以特別拉出來 class 可以定義 fields, 也可以有建構子, 可用於檢查資料欄位 const rawPayload = { ... } const payload = new Class(rawPayload) this.apiPostService.subscribe((res) => { console.log(res)

引用 mat 樣式 <mat-form-field> <mat-label>Input</mat-label> <input matInput> </mat-form-field> <mat-form-field> <mat-label>Select</mat-label> <mat-select>

開發時常用的參考資料 強大的文件資料 可查詢 Google Fonts Angular api 常用 command line 大全

Element ng-container ng-content ng-template