上方廣告

Lady Kukki 手作糖霜餅乾

2017年5月23日 星期二

[Angular學習紀錄] 開發工具和基礎設定介紹

本篇文章無任何說明,僅紀錄要開發 Angular 必要的安裝項目和幾個常用的指令,有興趣也可參考保哥的文章 Angular 4 開發環境說明



安裝項目清單如下

  • Git 工具,根據使用習慣自行選擇,並無特定指定哪套工具。
  • Node.js,必要安裝項目,請至少安裝 7.x 或 8.x 版本。
  • Npm,會隨Node一併安裝。
  • Visual Studio Code
  • VSCode 擴充套件,視個人需求安裝。
  • TypeScript,透過Npm安裝。
  • Angular CLI,透過Npm安裝。


Git 常用相關指令

  • git config --global user.name:您的名稱:第一次使用前設定
  • git config --global user.email:您的電子郵件,第一次使用前設定
  • git remote add origin https://xxx.git :將本地端git加入到遠端。
  • git clone https://xxx.git:將遠端版本複製到本地端。

Npm 常用相關指令

  • npm -v:查詢版本號碼,npm會跟著Node.js安裝好後一併安裝。
  • npm install:在專案路徑執行,會去把專案所需的npm套件全部抓回來。
  • npm install -g 套件名稱@0.0.0 套件名稱 --save-dev :安裝某工具,可空格後接續多個要一起安裝的工具, -g(選填) 參數代表安裝到全域, @0.0.0(選填) 代表指定版本號安裝,若不指定自動安裝最新版本。
  • npm install -g typescript:安裝TypeScript。
  • npm install -g rimraf:處理node_modules名稱太長無法刪除的問題,使用方式執行rimraf node_modules。
  • npm install -g @angular/cli:安裝Angular CLI。
  • npm uninstall -g 套件名稱:移除工具。
  • npm ls -g --depth=0 : 查詢目前已安裝的npm模組。
  • npm cache clean:清除Npm中的快取套件,建議移除完某個工具後執行。
  • npm init -y:建立package.json檔案。
  • npm 指令:執行package.json檔案內在Scripts區域內定義的執行命令。

Angular CLI 常用相關指令

  • ng new ProjectName:建立新專案(同時初始化Git & 安裝npm相依套件),需到專案的上層路徑執行該語法。
  • ng serve --host 0.0.0.0 --port 4201 --prod:指定不同Port號開啟開發伺服器 --host --port為可選,預設Port 4200,參數 prod(選填) 若有指定該參數會將所有的 js 檔案合併。
  • ng g c ComponentName:產生新的Component檔案,g 為 generate 的簡寫,c 為 component 的縮寫。
  • ng g m ModuleName:產生新的Module檔案,g 為 generate 的簡寫, m 為 module 的縮寫。
  • ng g m ModuleName --routing:建立含有路由的模組。
  • ng build --prod:建置專案(預設dev版),會將程式建置到dist目錄底下,參數 prod(選填)為正式版。

其它 常用相關指令

  • where 工具 : 查詢執行檔所在位置,例如 where node。 
  • code .:使用Visual  Studio Code 開啟當前目錄。
  • node -v:查詢 Node.js 安裝版本。
  • npm -v:查詢 Npm 安裝版本。
  • tsc -v:查詢 TypeScript 安裝版本。
  • tsc -w xxx.ts:編譯並監控某個檔案的變化。