---
# System prepended metadata

title: Angular環境建置
tags: [angular]

---

# Angular環境建置
### 先安裝node、nvm [安裝筆記](https://hackmd.io/@jadesnote/Sy6EbEB81e)

### 全域安裝angular
```
npm install -g @angular/cli
```
下載後輸入`ng v` 確認安裝完成

### 建立專案

1.先建立一個資料夾存放之後的專案，並將路徑切換至該資料夾
2.在終端機輸入`ng new` 並選擇Sass(SCSS)
3.專案建立完成後輸入`ng s -o` 打開伺服器看到angular預設畫面就完成了



### 專案中的重要檔案介紹

![螢幕擷取畫面 2025-03-10 165939](https://hackmd.io/_uploads/BJIIc73ikg.png)

* node_modules :存放各個套件檔案(上傳到git後會消失)
* package.json :存放各個套件版本
* src資料夾:存放網頁內容

**src資料夾的內容**
![螢幕擷取畫面 2025-03-10 170602](https://hackmd.io/_uploads/H1hFiQnjke.png)

* app.component.html :存放body+內容
* app.component.scss : html的樣式
* app.component.spec.ts : 撰寫測式案例
* app.routes.ts :存放路由
* index.html :原則上只會修改head裡面的內容

## 新增元件(組件)
```
ng g c 
```
系統會問命名在填入名稱就能自動生成元件(組件)

### 下載保哥延伸套件
![螢幕擷取畫面 2025-03-10 164319](https://hackmd.io/_uploads/SJWrLX3i1g.png)


---



### 讓多個元件的內容同時顯示在同一個畫面
![螢幕擷取畫面 2025-03-13 154534](https://hackmd.io/_uploads/rkLN6Zlh1l.png)

1.進到新建立的元件的ts檔找到**selector**、**class**後方的內容，也就是圖片中的`app-first`、`FirstComponent` 

2.接著進到想加入內容的元件(這裡以app為例)
![螢幕擷取畫面 2025-03-13 154758](https://hackmd.io/_uploads/B1-6TWgnJx.png)

* app-first以標籤形式放在html當中

![螢幕擷取畫面 2025-03-13 154907](https://hackmd.io/_uploads/BktbCbg2yx.png)
* 加入import 
> 要注意有兩個地方需要加
```
import { FirstComponent } from './first/first.component';
imports: [RouterOutlet, FirstComponent,SecondComponent],
```

最後的畫面呈現如下
![螢幕擷取畫面 2025-03-13 155047](https://hackmd.io/_uploads/HJrdCblhkg.png)

## angular裝bootstrap
#### 先npm下載 `npm i bootstrap`

將下面文字貼到angular.json的style當中(要放在scss前面，避免覆蓋自己的設定)
```
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
```

## 安裝@angular/material
在專案的終端機輸入`ng add @angular/material`
即可使用這個網站的套件[material](https://material.angular.io/)

## 指令整理


| 指令    | 功能       |
| ------- | ---------- |
| ng new  | 建立新專案 |
| ng s -o | 打開伺服器 |
| ng g c        |      新增元件      |
