# W_Angular note
以下筆記內容標記
- 大寫 A 代表 Angular
- compo 代表 component
- 2025 07 03 紀錄/基本上我所有學習紀錄都在=> [Sheet 學習紀錄本](https://docs.google.com/spreadsheets/d/1AKCMKKwK_8U1l6kmdwRVv2fxIbukYNCCMSAiMc46Ods/edit?gid=176097093#gid=176097093)

## 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

### export default
這個作用是可以讓懶載入更加簡短，元件的 ts 檔案...
`export class AppComponent{}`改成`export default class AppComponent{}`加上 `default`就完成了，這是在 route 檔案的懶載入可以捨棄`.then`

{
    path:""
    //改造前
    loadcompo:()=>import('/home/home.compo').then(m=>m.Homecompo)
    //改造後
    loadcompo:()=>import('/home/home.compo')

}

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

{
    //可以看到.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']

## @angular/common
### ngClass
他是一個

## @angular/core
### Renderer2
簡單來說就是 Angular 內建操作 DOM 元素的類
[完整操作](https://blog.csdn.net/wjyyhhxit/article/details/102225638)