Windows環境下從無到有建立第一個Angular專案的紀錄。
步驟:
● 下載nodejs並安裝,為啥要下載nodejs?
因為需要裡面的NPM(Node Package Manager)套件管理工具,
連至nodejs官網,選擇LTS(Long Term Support)版本下載安裝,目前LTS版本為10.16.0。
● 安裝好nodejs後,打開命令提示字元,輸入node -v,安裝成功會顯示nodejs的版本,
再輸入npm -v確認一下:
● 打指令:npm install -g @angular/cli,會問是否分享使用資料給Google的Angular team:
● 安裝結束後,一樣下指令ng v,若出現下圖就沒問題了:
● 接著來建立第一個Angular專案吧,切換好目標目錄後,
打指令:ng new(或n) <name> [options],name為專案名稱,options則是選擇性的設定,
這個指令會產生新的workspace與default project。不過安裝一開始,CLI就問了:
- Would you like to add Angular routing? 可選No(default值)
- Which stylesheet format would you like to user? 可選CSS(default值)
● 簡單講一下建立了那些檔案:
- angular.json:預設的CLI組態,提供CLI在建置、服務或測試專案所使用的設定。
- package.json:npm管理套件用。
- README.md:如大家所知,就是預設專案的說明檔。
- tsconfig.json:預設TypeScript組態。
- tslint.json:預設TSLint(linter for TS)組態。
● 建立完成後,cd到專案下,打指令:ng serve,就會開始建置專案並開啟server,
● 本來以為會自動開啟瀏覽器並開好網頁,不過應該是VS用太久,讓我有錯覺...請自行打開瀏覽器並貼上http://localhost:4200/:
● 本來以為會自動開啟瀏覽器並開好網頁,不過應該是VS用太久,讓我有錯覺...請自行打開瀏覽器並貼上http://localhost:4200/:
參考資料:
https://nodejs.org/en/
https://cli.angular.io/
https://angular.io/guide/file-structure
https://ithelp.ithome.com.tw/articles/10203185
https://jonny-huang.github.io/angular/training/01_creating_first_project/
沒有留言:
張貼留言