Ionic2学习笔记(1):新建一个页面


作者: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

------

上一篇:Ionic2学习笔记(0):HelloWorld

下一篇:Ionic2学习笔记(2):自定义Component


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM