ionic2基础（二）
上回说道如何创建项目以及注意事项还有项目结构，这回来介绍下如何创建页面和添加页面
首先我们在pages里面创建一个名为"home"的文件夹，然后再在这里面创建home.html、home.scss、home.ts这三个文件，就像这样：
然后我们在home.ts文件里写下这样的代码：
import { Component } from '@angular/core'; //这个是导入angular的组件
import { NavController } from 'ionic-angular';//这个是引入导航控制器，跳转页面时用的
@Component({
selector:'page-home', //这个是选择器，作用是注册你要使用的样式文件，比如home.scss
templateUrl:'home.html' //这个是文件地址，作用是注册你要用到的html页面
}) //将你导入的组件注册在这里，这相当于把home.ts与home.html以及home.scss联系在了一起
export class homePage{
constructor(public navCtrl:NavController){} //这是个构造器，参数就是你引入的控制器，不过你需要创建一个参数名来接收控制器，前面的public是你给予的权限，表示在此构造器之外你也可以用到它，如果设置为static就说明只能在构造器里使用
}//创建一个类，所有方法需要在这里面实现
当然，导入的组件和控制器不止这些，根据需求来选择，但是最基本也是最重要的就是这两个，如果你需要页面跳转就要导入NavController。
home.ts设置好了以后，我们来看下home.scss，他可以像使用css那样来定义类选择器和ID选择器，不过在此之前，你需要给他们包在一个全局里面，就像这样：
page-home{ .list .item{ ...... } ...... }
这个名称你可以随便起，但一定要和home.ts里的selector的名称要一致，否则........你懂得，会报错，而不是出现样式混乱，在服务器环境下出现错误或者html结构错误，都会报错，甚至白屏，所以你要非常细心才行。
这些设置完毕后我们可以来搭建页面结构了，这里事先说明一下，除index.html外需要用到文档标识标签和body外，其余所有子页面都要用ionic的组件来构建，就像这样：
<ion-header> ...... </ion-header> <ion-content> ...... </ion-content> <ion-footer> ...... </ion-footer>
首先首页可以没有头部，可以没有页脚，但是千万不能没有ion-content，否则会这样：
是的，除了header以外，下面是黑的，然而你并没有做错什么，所以，你需要在每个页面里加上这个组件，并且，主要结构要在这里面搭建，不然会白屏，要么就出错，要么就会出其不意的在某个地方出现一条黑....
页面编辑完毕以后我们找到app.model.ts，来配置页面和组件，像这样：
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home'; //这个是你要注册的页面，前面的Hompage，是你在home.ts里创建的那个类的名称，而后面则是对应的文件路径，记住一定要添加.html页面的路径，否则会报错
@NgModule({
declarations: [
MyApp,
HomePage //在这里需要添加你所创建的类
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage//在这里需要添加你所创建的类
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}
配置好了以后，我们来启动服务来看下，启动服务的命令为
ionic serve
然后稍等片刻，比较慢，像这样：
这里要说明的是：在启动服务之前，你需要在项目的根目录安装node_model包，这样才可以成功启动服务，不然会报错，安装node包的命令为：
cnpm install
一定是要安装在项目的根目录，否则会报错，成功启动以后会是这样：
以上就是我给大家分享的关于ionic2页面的创建和添加，希望对你有用哦~~~
