2019年6月23日 星期日

[Angular] 建立第一個Angular專案(Windows環境)

前言:
Windows環境下從無到有建立第一個Angular專案的紀錄。


步驟:
● 下載nodejs並安裝,為啥要下載nodejs?
    因為需要裡面的NPM(Node Package Manager)套件管理工具,
    連至nodejs官網,選擇LTS(Long Term Support)版本下載安裝,目前LTS版本為10.16.0。

● 安裝好nodejs後,打開命令提示字元,輸入node -v,安裝成功會顯示nodejs的版本,
    再輸入npm -v確認一下:

● 接著要透過NPM安裝Angular CLI,Angular CLI提供很多指令,讓developer開發Angular application更方便快速:

● 打指令:npm install -g @angular/cli,會問是否分享使用資料給Google的Angular team:

● 安裝結束後,一樣下指令ng v,若出現下圖就沒問題了:

● 接著來建立第一個Angular專案吧,切換好目標目錄後,
    打指令:ng new(或n) <name> [options],name為專案名稱,options則是選擇性的設定,
    這個指令會產生新的workspace與default project。不過安裝一開始,CLI就問了:
  1. Would you like to add Angular routing? 可選No(default值)
  2. Which stylesheet format would you like to user? 可選CSS(default值)
或是依各自狀況選擇囉,接著就開始建立專案與安裝套件了,可參考下圖:

●  簡單講一下建立了那些檔案:
  1. angular.json:預設的CLI組態,提供CLI在建置、服務或測試專案所使用的設定。
  2. package.json:npm管理套件用。
  3. README.md:如大家所知,就是預設專案的說明檔。
  4. tsconfig.json:預設TypeScript組態。
  5. tslint.json:預設TSLint(linter for TS)組態。
●  建立完成後,cd到專案下,打指令:ng serve,就會開始建置專案並開啟server,

● 本來以為會自動開啟瀏覽器並開好網頁,不過應該是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/