W_Angular 個人筆記

以下筆記內容標記

• 大寫 A 代表 Angular
• 大寫 compo 代表 component

A 基礎大架構

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

src

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

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

app 的 compo

一般來說在 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 的繼承與實作來使用

疑問

• 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