W_Angular note

以下筆記內容標記

大寫 A 代表 Angular
compo 代表 component
2025 07 03 紀錄/基本上我所有學習紀錄都在=> Sheet 學習紀錄本

A 專案基礎大架構

public file
src file
pile json
- angular.json 是專案的設定檔

src

分成 app, assets, environments 等其他為全域尚未研究

app 資料夾裡面是 compo
assets 資料夾裡面是圖片，影片等等元素放置處
styles.css 是全域 css 可以直接套用到專案 compo，預設會出現在 angular.json 中綁定
index 就是專案頁面

app 的 compoA

一般來說在 A CLI 輸入 ng g c compo名稱就會產生一個 compo 資料夾，包含:

html
ts
css

其中在 ts 檔案的 @compo 裡面的 import 主要功用是拉取別人的 compo，並且使用其功能。A 的 compo 會封裝，不會汙染到外部，所以只能用這個方法去抓取，記得要 import{ 檔案 }，export 在建立 compo 就會自動生成

Router

懶載入

目前已知懶載入就是為了減省資源，讓網頁不用一次加載完畢






{
    //可以看到.Homecompo 這是要載入的檔案
    path:""
    loadcompo:()=>import('/home/home.compo').then(m=>m.Homecompo)
}

environment

這是 A 的環境變數，而這裡有分 prod.ts 跟 ts，差別是 ts 是測試站

*angular.json

這是在 A 裡面很重要的檔案，他可以代表這個專案的設定檔案，有趣得是你可以透過設定檔了解此專案基礎架構

A 架構與傳遞關係 by YenWen

依據彥文所說，在 app.config.ts 裡面，provider 是提供網址給 <routes-outlet></routes-outlet> 時時監控用的，所以在 A 架構中，基礎傳遞資料關係如下

首先 index.html 為主要顯示前端的介面，裡面會有一個 tag 叫做 <app-root> (可以自己取 tag 名稱，從 app.compo.ts 裡面改)
<app-root>會偵測 app.compo.ts
app.compo.ts 裡面的 @compo ({selector:"app.root"}) 代表的就是使用在 index 裡的 tag
而這個 selector 會去吃 templateUrl: './app.compo.html'，裡的內容也就是<routes-outlet></routes-outlet>`
而<routes-outlet></routes-outlet>是從app.config.ts裡面擷取，其中有一個方法，provideRouter(routes)，他會推給 outlet 去吃，參數就是擷取 routes，來自app.routes.ts import

ts 裡面的繼承與 A 的關係

目前可以理解為提供給使用 A 的方法。在 A 官網有很多方法可使用，但如果要使用他的方法，就需要使用 ts 的繼承與實作來使用

A Material

Pipes

這是一個 A 方法，主旨是改變前端畫面用，資料轉換工具，在模板中作用。

| 是pips的規則，後面再加上參數。
| 後方的屬性和方法，是 A 內建，當然也可以自己寫邏輯


<div>{{ "hello" | uppercase }}</div>
//輸出 HELLO

疑問

standalone 獨立的意義?
router 怎搞
目前我看此專案 style 好像是直接寫在 ts ? 如下方範例，
一般來說 ng g c XXX 建置完後 src/app/XXX 裡面就會有css嗎? 我這邊是沒有看到
compo.ts 裡面可以寫甚麼目前疑似看到 style ts router 等等是可以都寫嗎?
- 已知都可寫
- syle可能就要寫一個style:['h1{color:red;']在 @compo 裡面
我目前版本是angular 18 假設今天我正常compo 結構有 html, ts, css 那css 要如讓html使用呢
-load

關於關注點分離

這是一個寫程式的觀念:
我有 component 跟 service，一般來說 service 理應只關注在串接 API(寫一個 function for CRUD)，這樣就好，沒其他事。當 compo 內需要使用到 API 時，將 service 依賴注入後，compo 直接調用其 function，然後不需要去在意 service 寫了甚麼方法(這時 funtion 名稱至關重要)。














// ArticalComponent
//這裡先依賴注入 service
apiService = inject(ApiService)

//這裡是存資料的陣列
artical: Artical[] = []

//這事生命週期，裡面處理的事情就是從 service 取的其 get 方法
//然後將取的的 data 傳至上面的陣列儲存
ngOnInit(){
    this.apiService.getData().subscribe(data=>{
        this artical = data
    })
}

這 compo 我們可以藉由 function getData() 的知，他是負責取資料，就這樣。這個 compo 就關注取資料存資料。

關於動態屬性綁定這件事

為甚麼叫做動態屬性，就表示這裏面的值可能會改變，他是響應式的，所以需要以下方法綁定








//第一種範例
let key = 'name';
let obj = { name: 'Watson' };
console.log(obj[key]); // 'Watson'

//第二種範例，也是 js 動態屬性存取
value['name']