# 建立Angular專案及安裝Bootstrap(bootstrap安裝發法已過期)

1. 下載安裝Node.js
https://nodejs.org/en/

2. 下載安裝vscode
https://code.visualstudio.com/

3. 開啟vscode並打開一個新的terminal(終端機)，並輸入以下指令即可開始安裝angular CLI

npm install -g @angular/cli

4. 安裝完成後可以輸入以下指令來確認angluar是否安裝完成以及版本號。

ng version


5. 安裝完成後就可以使用angular的指令，先移動終端機的位置到要放置這個專案的檔案目錄位置，接著在終端機輸入以下指令，來建立一個新的專案。

    ng new the_first_angular_app(應用程式名稱)

接著他會詢問要不要加入route(路由)，選擇yes即可。
然後他還會再問要採用哪一中style sheet，如果沒有特別需求，選擇css即可。
接著就會開始下載並建立一個新的angular專案。

6. 建立完成後，移動我們終端機的位置到剛剛建立的專案資料夾中，就可以使用以下幾種指令來開啟這個專案(預設的port號是4200)

ng serve //啟動
ng serve --open //啟動後自動幫我開啟
ng server --port 4201 //指定用4201port號來開啟

7. 成功開啟我們就會看到以下的畫面

---
以下為新建立一個專案後，常會用到的東西
* 產生新的component。

ng generate component component名稱 
ng g c component名稱

* 產生新的service。

ng generate service service名稱
ng g s service名稱

* 產生新的class。

ng generate class class名稱
ng g c class名稱

* 安裝並匯入bootstrap，使用以下指令後，找到最外層一個名為angular.json的檔案，並貼入以下資料。
此檔案提供了全工作區級的配置和具體專案的預設配置，供 Angular CLI 中的建構工具和開發工具使用。 此配置中所提供的路徑值都是相對於工作區根目錄的。

npm install bootstrap@5 @popperjs/core

- 以下的東西貼在 projects > project-name > architect

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/@popperjs/core/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

---

###### tags: `angular` `前端`