---
# System prepended metadata

title: Angular 遇上 Ionic
tags: [Ionic, Angular]

---

###### tags: `Angular` `Ionic`

# Angular 遇上 Ionic

## 指令比較

Ionic | Angular | 用途 |
| ------- | ------- | :------- |
| ionic version | ng -v | 檢視OOO版本號  |
| ---- | ng update | 更新OOO版本 |
| ionic serve --open | ng serve --open   | 啟用serve並直接於視窗開啟 |
| ionic serve --port=`ＯＯＯＯ` --open| ng serne --port=`ＯＯＯＯ` --open | 啟用serve並指向`ＯＯＯＯ` port號並直接於視窗開啟 |
| ionic start `專案名稱` | ng new `專案名稱` | 建立`專案名稱`之專案 |
| ---- | ng n `專案名稱` | 建立`專案名稱`之專案 |
| ---- | ng generate `專案名稱` | 建立`專案名稱`建立資料夾及模組 |
| ionic generate component `組件名稱` | ng generate component `組件名稱` | 建立`組件名稱`之組件 |
| ---- | ng g c `組件名稱` | 建立`組件名稱`之組件 |
| ionic generate component `資料夾名稱`/`組件名稱` | ng g c `資料夾名稱`/`組件名稱` | 在`資料夾名稱`下 建立`組件名稱`之組件 |
| ---- | ng g `專案名稱`| 建立`專案名稱`建立資料夾及模組 |
| ionic build | ng build | 建立專案封裝檔 |

## 專案-創建組件-注意事項

1. 打開終端機
```
ionic g c
```

2. 使用ionic在專案中創建組建時，如無法正常創建，先檢查版本是否為最新版！

```
npm i
```

成功時會看見終端機顯示
![](https://i.imgur.com/NTTOlLN.png)
並在左側目錄可以看見對應的四隻檔案
![](https://i.imgur.com/YTZWACC.png)

3. 打開 **組件名稱.component.spec.ts**

這隻檔案務必立刻修改
這隻檔案務必立刻修改
這隻檔案務必立刻修改

千萬不要把事情留到明天

![](https://i.imgur.com/TmWLRlS.png)

> win 利用ctrl + D
> OS 利用 command + D

4. 將所有page選起來改為component

* 該是大寫就大寫 該是小寫就小寫

![](https://i.imgur.com/2TVkfYu.png)

![](https://i.imgur.com/HYmUi4v.png)

> 恭喜你學會在ionic專案下創建組件（component）

## 專案-建立RouterLink

>
 
![](https://i.imgur.com/xoRkPtD.jpg)

![](https://i.imgur.com/vnaGBAB.jpg)

![](https://i.imgur.com/h3YYalD.png)

![](https://i.imgur.com/xpsJnxT.png)







