1. 程式人生 > >基於TypeScript的Angular6.X系列學習筆記-建立第一個Angular應用

基於TypeScript的Angular6.X系列學習筆記-建立第一個Angular應用

在上一節中,Angular框架的開發環境已經搭建完畢,在終端輸入命令:ng -v 檢查Angular框架的版本號,執行如下:

 

 繼續使用Angular CLI腳手架建立專案,開啟VS-Code在終端輸入命令:ng new [專案名稱] 建立一個專案,操作如下:

 1.桌面新建資料夾Demo\AngularDemo(正式開發環境根據專案要求把程式碼存放相應的碟符,此處只做演示);

2.兩種方式新建Angular專案:

2.1 方式一:在剛才新建好的資料夾地址中輸入命令:cmd,如下操作:

輸入 cmd 命令鍵盤上點選回車鍵(Enter),顯示如下終端:

 再使用命令:ng new my-app 建立第一個Angular專案my-app,操作顯示:(等待專案建立)

 2.2 方式二:使用VS-Code載入剛才桌面新建的資料夾,操作如下:

 

 因上面【方式一】已經建立專案【my-app】,所以開啟AngularDemo資料夾中會有 my-app 專案資料夾,為了演示方式二,新建專案【my-app2】,在VS-Code終端輸入命令:ng new my-app2,顯示如下:

同上等待專案【my-app2】建立完畢。(此時可以聽聽音樂,放鬆(☄⊙ω⊙)☄)

3. 安裝依賴,輸入命令:npm install 或者使用淘寶映象 cnpm install;此處為了演示,刪除剛才建立的專案【my-app2】,使用【my-app】繼續演示。

4.

進入剛才建立的專案【my-app】啟動服務,輸入命令:ng serve(或者ng server --open)編譯專案;

 此時新建專案-啟動服務成功。

注:輸入命令啟動服務時, 終端會輸出連結提示資訊: