Angular 新增專案+開發環境設定+常用快速鍵(02)

由於使用Visual Studio Code跟之前使用Visual Studio有點不太一樣
在Visual Studio圖形界面化的方式可新增專案很方便
Visual Studio Code中可能需要打些指令來新增在此筆記一下
1.cmd
2.建立一個資料夾來放專案用，因有些公司可能在C：無法執行所以此次在D：建立一個projects資料夾，使用Angular Cli來建立Angular的專案（請使用英文或數字命名）

cd\
d:
md projects
cd projects
ng new firstapp

3.測試是否有建置成功，至剛新增的資料夾使用npm

cd firstapp
npm start

4.開啟瀏覽器看看網站是否有成功，有跑起來會有Welcome to app!

http://localhost:4200/

5.如何發佈

一般
ng build
加參數--prod
ng build --prod
壓縮整的專案js變小

===============================================================
A.如何改變npm的Port

找到package.json
"start": "ng serve"
改
"start": "ng serve --port 8080"

B.如何關閉npm Server

ctrl + c
y

C.開啟VS Code，在專案下輸入

code .

D.如果Angular版本更新了要如何升級

專案目錄下
ng update

會出現以下表示升級完成

 We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       1.2.3 -> 6.0.2           ng update @angular/cli
      @angular/core                      4.4.7 -> 6.0.2           ng update @angular/core
      rxjs                               5.5.10 -> 6.1.0          ng update rxjs


    There might be additional packages that are outdated.
    Or run ng update --all to try to update all at the same time.

E.以述為單一專案升級，升級Global Agnular Cli版本方式

看目前版本
 npm list -g --depth=0
檢查最新版本
npm outdated -g
沒出現文字為目前最新版
有出現代表有新版
Package       Current  Wanted  Latest  Location
@angular/cli    6.0.1   6.0.3   6.0.3
若有新版可執行下列安裝最新版
npm install -g @angular/cli

===============================================================
1.格式化文件

shift + alt + f

2.ts html 快速切換

alt + o

3.註解

ctrl + /

===============================================================
參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網