###### 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=`OOOO` --open| ng serne --port=`OOOO` --open | 啟用serve並指向`OOOO` 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)