care about us: 跟著網頁做~~Angular 學徒之路 feat. TypeScript系列

2023年4月27日星期四

來試試看Angular，感謝ABow的分享

Day1：看了他的分享，好想要學Vue喔@@

Day2：ng version(不是 --version)就出現錯誤，幸好第十五天有解釋，微軟也有相關資訊。

Day3：即使有開XAMPP，還是可以運行耶~~

Day4：沒有karma.conf.js、environments 資料夾、polyfills.ts、test.ts

Day5：在想說，AngularJS 及 Angular哪個直接放入租用空間就可以使用了呢???

Day6：集中火力說明Angular

Day7：Angular 官方建議使用兩種語言來開發，一是 Dart（也是一種由 Google 開發的語言）這邊要介紹的 TypeScript（由微軟開發的程式語言），

Day8：介紹模組樣版

Day9：糟糕，這樣還有可能將資料夾複製到網站就可以跑嗎???
Webpack 除了幫我們封裝 JS，同時也動態的修改了 index.html，且自動在 body 標籤結尾前，自動加入了合併之後的 JS 檔案，因為這些檔案是動態載入的。

Day10：

Angular 執行時，進入點是 main.ts ，
main.ts 這個檔案裡面，會啟動 AppModule，
AppModule 裡面又去啟動 Angular 應用程式的根元件 AppComponent，
AppComponent 會開始執行 AppComponent 這個 class，並找到相對應的 template，接著載入這個 component 的 CSS 樣式檔（如果有設定的話）。
所有內容呈現在網頁上。
突然發現CPU竟然滿載@@VScode兩個佔100%，關掉angular就好了@@隔天開起就沒事@@再觀察看看

Day11：

可以用指令新增component，ng generate component page1
但對著App按右鍵，找不到"Angular: Gernerate a component
刪除除了刪除資料夾之外，還要去app.module.ts 裡去刪掉被移除元件的相關內容

Day12：

Day13：沒有範本檔(API、assets、drama-blog.html)，所以無法練習。

Day14：安裝bootstrap@4，但只有下載檔案(到哪裡不知)，還要到angular.json 這個檔案，並且找到 build 底下的 styles 這個區塊(不是 test 底下的 styles 哦！)引入bootstrap.mini.css

Day15：幸好有先快速瀏覽全部，不然第二天做的時候就出問題@@

Day16：將範例檔變成首頁

Day17：部屬成為應用程式，用舊的範例，沒有顯示component.html內容。

Day18：

Day19：

Day20：

注意：只有此網誌的成員可以留言。