iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
0
自我挑戰組

Angular 學習雜記系列 第 3

Angular 學習雜記-Angular開發工具與環境建置(續)

在上一篇完成基本的安裝後,要用Visual Studio Code,開啟程式之前,要先利用Angular的指令來建立個基本Angular專案的架構,順便執行看看。安裝是否正常。

首先,回到Dos命令列,最好建立一個新的目錄,來當工作區域。放置所有的Angular程式。在Dos命令列,可以先切換到工作目錄。在下命令:
Ng new HiAngular
來建立一個叫HiAngular的新專案,等一段時間,它會出現「?Would you like to add Angular routing?」的選項,就按「y」來建立Angular routing檔案。會再出現「?Which style sheet format would you like to use?」的選項,就先選預設的CSS即可。就是執行一段不長的時間來建立Angular專案。

如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20190919/20000953ulmCgu6PVu.png

https://ithelp.ithome.com.tw/upload/images/20190919/20000953Bt8tEI7IZX.png

切換目錄到HiAngular,執行ng serve,就會跑網頁伺服器。
https://ithelp.ithome.com.tw/upload/images/20190919/20000953I1BIDV5UAC.png

等到出現下述畫面,有出現「Compiled successfully.」就成功了。
https://ithelp.ithome.com.tw/upload/images/20190919/20000953MQzZZd1d5s.png

在任何一個瀏覽器,輸入http://localhost:4200/ ,就會出現Angular的預設畫面。就表示Angular安裝完成。可以開始開發程式了。
https://ithelp.ithome.com.tw/upload/images/20190919/20000953HMu5ngZTuu.png

安裝Visual Studio Code,可以參考 https://code.visualstudio.com/download 網站。下載完成安裝,就可以將全部的程式載入,來說明專案的檔案架構。


上一篇
Angular 學習雜記-Angular開發工具與環境建置
下一篇
Angular 學習雜記-Angular資料夾、檔案說明
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言