时间：2017-02-25 00:45:53
作者：zhongxia
好吧，剩下的笔者先占坑位，后面写。 先好好学习下如何使用，有一定的掌握程度在来学笔记，才有自己的感悟在里面,不然就是为了写笔记而写笔记了。
更新时间：2017-03-07 17:59:25
闲下来了，然后继续学习，写笔记吧。
一、项目结构分析
继续上一节，根据Ionic2提供的脚手架创建一个项目。
只需要关注 src 目录即可，其他目录不需要我们去修改。
1.1 src一级目录
src
app #入口文件，布局框架
assets #资源目录
pages #模块页面
theme #主题样式
index.html
1.2 src/app 目录
Ionic2开发的HybridApp，其他就是一个SPA页面，因此需要有一个入口文件。 一个布局页面，比如（底部选项卡的布局，右滑出现导航菜单）等布局
app
app.component.ts # 布局页面的控制器
app.html # 布局页面的页面
app.scss # 布局页面的样式
app.module.ts # 所有模块（页面，组件，服务，等）都需要在这里配置
main.ts # 入口文件
注意：所有使用到的页面，组件，服务都需要配置到（app.module.ts）过来哈,否则用不了。就类似要使用某个组件，我们需要先配置
1.3 pages目录
这里面每一个文件夹 就是一个页面。（也就是APP里面的一屏）
创建一个页面，使用命令创建，会自动创建好html，css，js文件
# 生成一个页面
ionic g page hello-ionic
创建好文件，还要集成到项目中
- 在 app.modules.ts 里面配置
- 在 app.component.ts 创建一个新的导航，然后跳转到该页面
具体的代码，可以参考Ionic2生成的项目脚手架代码
二、Ionic2组件的尝试
这里可以去 Ionic2 官网看例子，然后复制代码，到项目中，具体使用下，看效果如何。
这里就不一一列举怎么使用了，大概说下步骤。
//1. 引入组件
import { Platform, ActionSheetController, AlertController, LoadingController } from 'ionic-angular';
...
// 2. 在构建函数传入参数
constructor(
public platform: Platform,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController,
public actionsheetCtrl: ActionSheetController
) { }
...
// 3. 编写对应的方法【如果不是交互组件，则不需要编写操作逻辑，写数据赋值即可】
showAlert() {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['OK']
});
alert.present();
}
2.1 Angular2 的常用知识点
1. 绑定事件
(事件名称)="函数名"
<!--常规方式的事件绑定-->
<button ion-button block (click)="openMenu()">
Show Action Sheet
</button>
<!--事件触发的时候，传递参数-->
<ion-list>
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<ion-icon name="{{item.icon}}" item-left></ion-icon>
{{item.title}}
<div class="item-note" item-right>
{{item.note}}
</div>
</button>
</ion-list>
2. 属性赋值
//在页面对应的js文件里面的构造函数赋值对象
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.list = [];
for (var i = 0; i < 100; i++) {
this.list.push({
img: 'http://ionicframework.com/dist/preview-app/www/assets/img/card-saopaolo.png',
title: '中国' + i,
subtitle: '北京' + i * 2
})
}
<div class="card-title">{{list[0].title}}</div>
3. 判断
<div *ngIf="selectedItem" padding>
You navigated here from <b>{{selectedItem.title}}</b>
</div>
4. 循环
*ngFor="let item for list"
<ion-content padding class="card-background-page">
<ion-card *ngFor="let item of list">
<div class="card-title">{{item.title}}</div>
<div class="card-subtitle">{{item.subtitle}}</div>
</ion-card>
</ion-content>
5. 双向数据绑定[针对表单等组件，有输入的组件]
[(ngModel)]="info.name"
把表单输入的值，绑定到控制器的info对象里面的name字段里面. 记得在控制器的构造函数里面，创建info对象。
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController
) {
this.info = {}
}
<ion-item>
<ion-label>UserName</ion-label>
<ion-input type="text" placeholder="please input username..." [(ngModel)]="info.name" name="name"></ion-input>
</ion-item>
三、路由跳转
// 1. 引入路由控制组件
import { NavController, NavParams } from 'ionic-angular';
// 2. 传递到构造函数
constructor(public navCtrl: NavController, public navParams: NavParams) {
// 3. 使用跳转，参数1，组件 ，参数2：跳转传递的参数
this.navCtrl.push(ItemDetailsPage, {
item: item
});
// 4. 获取传递的参数
this.selectedItem = navParams.get('item');
3.1 打开APP的广告或者宣传图片如何跳转
如果用上面的 this.navCtrl.push 来跳转的话，左上角会又一个 back，返回的按钮。 但是我们从App打开的动画跳转到主页面的时候，当然不希望有back这个按钮了。毕竟是主页面。
因此找了下Ionic路由的方法，又一个
this.navCtrl.setRoot(HelloIonicPage);
四、Ionic页面的生命周期
// 页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在
onPageLoaded() {
console.log('page 1: page loaded.');
}
// 页面即将进入的时候
onPageWillEnter() {
// 在这里可以做页面初始化的一些事情
console.log('page 1: page will enter.');
}
// 页面已经进入的时候
onPageDidEnter() {
console.log('page 1: page did enter.');
}
// 页面即将离开的时候
onPageWillLeave() {
console.log('page 1: page will leave.');
}
// 页面已经离开的时候
onPageDidLeave() {
console.log('page 1: page did leave.');
}
// 从 DOM 中移除的时候执行的生命周期
onPageWillUnload() {
}
// 从 DOM 中移除执行完成的时候
onPageDidUnload() {
}
