[從 0 開始的 Angular 生活]No.1 建立專案

發表於 | 更新於 | 分類於

前言

安裝好開發 Angular 需要的環境後，緊接著就是建立起 Angular 專案的骨架了，讓我們一塊來了解如何使用 Angular CLI 建立一個 Angular 的專案吧。

建立 Angular 專案資料夾

那麼，該如何 Angular 專案資料夾呢？

手動建立一個空的資料夾

首先，我們可以先手動替專案建立一個資料夾，像是我在 D 槽建立一個 learnAngular 的資料夾，這樣比較方便管理。

cd 切換到自訂的資料夾

接著打開 CMD 並且輸入以下指令，切換到剛才建立的資料夾內。

1
cd /d D:learnAngular

初始化專案環境

  • ng new 專案名稱 - 透過指令建立 Angular 專案
    1
    ng new firstAngular

輸入後， Angular CLI 會問我們一些事項：

  • 要不要加入 Angular Routing (y/N) [在此我選 N]
  • 要使用哪一種 CSS 預處理器 (多選) [在此我選 SCSS]

接著進入一連串的套件安裝，安裝完後可以發現多了 firstAngular 資料夾，且裡面建立了不少檔案。

執行專案

然後再次使用 cd 指令，進入 firstAngular 資料夾。

1
cd firstAngular

正確切換到這個資料夾後，輸入 npm start 運行 Angular 專案。

如操作正確，應看到如下畫面，可複製網址至瀏覽器網址列貼上觀察。

注意：此時 CMD 視窗不可關閉，因為執行 npm start 指令後，其實是透過 ng serve 的指令啟動 node.js 的 web server ，這樣我們才可以在瀏覽器上看到對應的網頁。

專案正確執行

小結

進行到這個階段，目前我們已經掌握了:

  • 知道開發 Angular 需要那些套件並且安裝他們
  • 使用 Angular CLI 建立一個 Angular 專案
  • 透過 npm start 運行 Angular 的開發伺服器，並透過瀏覽器觀察這個網頁

接下來我們要了解 Angular 專案內的檔案結構。

0%