---
# System prepended metadata

title: 建立Angular專案及安裝Bootstrap
tags: [前端, angular]

---

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

1. 下載安裝Node.js
    https://nodejs.org/en/
    ![](https://i.imgur.com/eIgSFyG.png)

2. 下載安裝vscode
    https://code.visualstudio.com/
    ![](https://i.imgur.com/KkOWEh5.png)
    
3. 開啟vscode並打開一個新的terminal(終端機)，並輸入以下指令即可開始安裝angular CLI
```
npm install -g @angular/cli
```

4. 安裝完成後可以輸入以下指令來確認angluar是否安裝完成以及版本號。
```
ng version
```
![](https://i.imgur.com/xs5fZTw.png)

5. 安裝完成後就可以使用angular的指令，先移動終端機的位置到要放置這個專案的檔案目錄位置，接著在終端機輸入以下指令，來建立一個新的專案。
    ```
    ng new the_first_angular_app(應用程式名稱)
    ```
    接著他會詢問要不要加入route(路由)，選擇yes即可。
    然後他還會再問要採用哪一中style sheet，如果沒有特別需求，選擇css即可。
    ![](https://i.imgur.com/UkGL7hd.png)
    接著就會開始下載並建立一個新的angular專案。

6. 建立完成後，移動我們終端機的位置到剛剛建立的專案資料夾中，就可以使用以下幾種指令來開啟這個專案(預設的port號是4200)
```
ng serve //啟動
ng serve --open //啟動後自動幫我開啟
ng server --port 4201 //指定用4201port號來開啟
```
7. 成功開啟我們就會看到以下的畫面
![](https://i.imgur.com/AroYefl.png)



---
以下為新建立一個專案後，常會用到的東西
* 產生新的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` `前端`

