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