1. 創建Angular 項目

ng version			// 查看下angular 是否安裝成功了ng new  HelloWorld        // 使用這種方式創建新項目，最終沒有app.modules.ts 這個文件（對剛入口的人員不友好，因為要學習到這個文件的用法）ng new HelloWorldAngular --no-standalone --routing --ssr=false  // 這種方式創建的包含app.modules.ts文件（應該是Angular 17 最新版才需要這樣）// 為什么最新版Angular 沒有app.module.ts文件，可參考如下link
// https://github.com/angular/angular/issues/52751npm start  		// 直接啟動Angular 項目，不會自動打開瀏覽器ng serve --open  // 啟動Angular 項目 并通過瀏覽器自動打開angular 入口頁面

step1： ng new HelloWorldAngular --no-standalone --routing --ssr=false

step2： 在VS code 中打開項目文件夾，并在terminal中執行npm start啟動項目

step3： 點擊terminal中的local 的網址，或copy 到瀏覽器中，即可看到angular 入口頁面

step4： 啟動完項目，如果想進行簡單的服務操作，輸入h + enter 即可看到如下命令提示

press r + enter to force reload browserpress u + enter to show server urlpress o + enter to open in browserpress c + enter to clear consolepress q + enter to quit

2.對Angular架構的最基本了解

• 入口文件會一直存在，方便加載新建的頁面
• app.component.ts 文件復制加載不同的組件，以及執行某個文件使用的模板文件、樣式文件
• 強化理解，可以通過如下幾個step了解和實踐

step1.上面看到的入口頁面,index.html頁面加載的流程介紹：

step2.將項目的入口文件變更為新建的html文件：app.simplepage.html效果

3.創建并引用新的組件（component）

ng g c my-new-component  		// 創建新的組件（generate component）

step1： 創建新的組件

step2： 查看組件選擇器（selector）的名字：app-my-new-component’

step3： 引用組件：app-my-new-component’

下圖說明，新建的組件如果希望被引用，需要找到一個組件（app.component）去引用這個新組件（my-new-component）才可以。

step4： 修改新組件：將CSS文件& HTML文件修改

step5： 修改新組件：啟動項目，最終看到的效果

4.對Angular架構新的認識（多組件）

5.組件中業務邏輯文件的編輯（ts文件）

step1: 修改新組件html文件、TS文件。并在ts文件中引入新的變量name&在構造器中打印內容

constructor & ngOnInit可參考如下文章，目前階段不需要完全看懂

Angular 生命周期（constructor & ngOnInit）的作用

step2: 最終看到的效果

step3: 花括號語法支持的其他類型：

最終展示的效果如下：

6.標簽中屬性的綁定

(1) ID的綁定

看到的最終效果：

(2) class的綁定

(3) 樣式的綁定

(4) ng內部樣式的綁定

(5)條件判斷