作者:Grey
原文地址: http://www.cnblogs.com/greyzeng/p/5532323.html
新建一個頁面:
借上一篇中的HelloWorld,我們可以新建一個頁面,並把頁面內容展示出來:
- 進入項目目錄:
命令:cd MyFirstApp
- 新建頁面:
命令:ionic g page NewPage
控制台提示一句話:
Don't forget to add an import for new-page.scss in app\themes\app.core.scss:
@import "..\pages\new-page\new-page.scss";
我們在項目目錄下找到:.\app\theme\app.core.scss 這個文件,
在里面增加一句:
@import "../pages/new-page/new-page.scss";
自此,我們就新建了一個頁面,在項目目錄下,你會找到這樣一個文件夾:
我們在new-page.html中寫一些東西:
找到.\MyFirstApp\app\app.ts文件,修改app.ts頁面的內容為:
展示頁面的內容:
命令:ionic serve -l,
在Chrome瀏覽器中模擬的效果:
我們還可以在頁面中增加更多的元素,ionic2提供了豐富的組件和樣式供選擇
比如:
修改new-page.html頁面:
重新運行程序:
命令:ionic serve -l
更多樣式:Ionic Component Documentation - Ionic Framework
------