# 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預設畫面就完成了

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


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

**src資料夾的內容**

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

## 新增元件(組件)

ng g c 

系統會問命名在填入名稱就能自動生成元件(組件)

### 下載保哥延伸套件

---

### 讓多個元件的內容同時顯示在同一個畫面

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

2.接著進到想加入內容的元件(這裡以app為例)

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

* 加入import
> 要注意有兩個地方需要加

import { FirstComponent } from './first/first.component';
imports: [RouterOutlet, FirstComponent,SecondComponent],

最後的畫面呈現如下

## 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 | 新增元件 |