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

新建一个页面:

上一篇中的HelloWorld,我们可以新建一个页面,并把页面内容展示出来:

  • 进入项目目录:

命令:cd MyFirstApp

  • 新建页面:

命令:ionic g page NewPage

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

控制台提示一句话:

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";

    

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

    

自此,我们就新建了一个页面,在项目目录下,你会找到这样一个文件夹:

    

我们在new-page.html中写一些东西:

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

找到.\MyFirstApp\app\app.ts文件,修改app.ts页面的内容为:

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

展示页面的内容:

命令:ionic serve -l,

在Chrome浏览器中模拟的效果:

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

我们还可以在页面中增加更多的元素,ionic2提供了丰富的组件和样式供选择

比如:

修改new-page.html页面:

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

重新运行程序:

命令:ionic serve -l

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

更多样式:Ionic Component Documentation - Ionic Framework