ionic实战项目从0开始

开始ionic的学习，前置条件：熟悉ES6、nodejs，了解angular2,熟悉html5、ts、css等。
注：angular2的学习教程及其相关可参考大漠穷秋老师的码云：特别感谢大漠老师
ionic的官方网址：ionic官网

下面开始ionic项目的正式开发：
（这个项目是一个视频播放的app，暂定为纯前端，开发环境win8）

1

安装ionic的全局环境（关于nodejs的可以看一下这个网站：快速安装到使用npm）
新建一个文件夹，在该文件夹中的命令行窗口执行cnpm install -g cordova ionic,将ionic安装到全局环境(也可以npm install -g cordova ionic，当然前提是你要科学的上网)

2

继续执行命令ionic start videoProject tabs，创建一个ionic项目(tebs是这个项目的类型，道友们也可以ionic start videoProject，命令行会告诉你ionic的几个类型)

3

到此，项目建立完成，可以看一下目录结构。github上我的项目对照一下，
修改app.component.ts、app.module.ts、app.html,
pages下的文件可以删了

4讲解一下相关文件

app.module:
declarations中引入项目中所有的component，imports中导入的支持app运行的模块，bootstrap中是app的入口，entryComponents这个是重点，区别于angular2的路由导航，ionic有这玩意儿进行页面跳转（后面会细讲，同样把app中的所有component导入），providers中放app会用到的provider。
app.component:
recommendPage: any = RecommendPage;
listPage: any = ListPage;
mePage: any = MePage;对应app.html上的root。
app.html:
<ion-tabs class="tabs-icon-text" [color]='primary'>
<ion-tab tabIcon="home" tabTitle="推荐" [root]="recommendPage"></ion-tab>
<ion-tab tabIcon="flame" tabTitle="热点" [root]="listPage"></ion-tab>
<ion-tab tabIcon="apps" tabTitle="分类" [root]="listPage"></ion-tab>
*
</ion-tabs>
[root]是angular2的属性绑定写法，[root]="recommendPage"指这一页是recommendPage对应的页面。
页面的编写规范：（html）
普通页面：<ion-header></ion-header>头、<ion-content></ion-content>主体、<ion-footer></ion-footer>脚
模态页面：segment切换的页面直接写<ion-content></ion-content>主体部分
recommendPage.html:
<ion-segment [(ngModel)]="types" color="primary">
<ion-segment-button value="choiceness">
精选
</ion-segment-button>
<ion-segment-button value="opera">
番剧
</ion-segment-button>
</ion-segment>
通过绑定types，选取不同的segment来控制下面的主体中显示对应的内容。
<ion-content>
<div *ngIf="types == 'choiceness'">
<choiceness></choiceness>
</div>
<div *ngIf="types == 'opera'">
<opera></opera>
</div>
</ion-content>
me.html、me.ts:(click)=”xxx”是angular2 中的事件绑定，通过点击调用component中的函数完成相应动作。
ex：public register() {
console.log("register...");
let registerModal = this.modalCtrl.create(RegisterPage, { userId: 8675309 });
registerModal.present();
}
点击（click）=“register()”，创建一个名为RegisterPage的模态页面，并打开该模态页面；
register.html
<ion-header>
<ion-navbar>
<ion-buttons>
<button ion-button (click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>注册账号</ion-title>
</ion-navbar>
</ion-header>
<ion-content></ion-content>
register.ts
`public register() {
console.log(“register…”);
//执行http请求
}

public dismiss() {
    this.viewCtrl.dismiss();
    //关闭模态页面
}`

目前就完成了这么多，后续完善吧，道友们有问题指出有不懂提出来哦，第一次写博客，感觉和写游戏攻略一点不一样啊