新做的项目采用了angular4.0和ionic3.0，所以就总结一下对ionic3.0的一些认识。
首先先认识一下ionic3.0的生命周期钩子，生命周期钩子又叫生命周期事件，它们分别会在页面生命周期的各个阶段被触发，我们来简单了解一下。
1.ionViewDidLoad
当页面加载完毕时触发。它只会在新页面被创建时触发一次，如页面被缓存再一次触发，它不会有任何反应。
页面加载完成触发，这里的“加载完成”指的是页面所需的资源已经加载完成，但还没进入这个页面的状态（用户看到的还是上一个页面）。
需要注意的是它是一个很傲娇的钩子，全程只会调用一次，即第一次进入页面时被调用，重新进入这个软件（在网页调试的时候按刷新也是可以的）。
因此这个钩子适合你做一些一次性的处理，比如从服务器拉取用户数据存到缓存中。
2.ionViewWillEnter
这个时候页面刚刚开始切换，也就是将进入页面但是还没有进来的时候。你可以在这时对页面的数据进行预处理，这个钩子是每次都会调用的。
3.ionViewDidEnter
用户已经进入到新页面了（页面处于激活状态），同样也是每次都会调用。
4.ionViewWillLeave
页面准备离开时触发，这时用户刚刚触发了返回按钮或者相关事件。（准备离开这个页面但是还没有离开的时候），每次离开的时候触发
5.ionViewDidLeave
页面已经离开的时候触发，页面处于非激活状态了，每次离开后触发
6.ionViewWillUnload
页面中的资源即将被销毁时触发，每次都要触发
7.ionViewCanEnter
在一个需要授权的页面进入之前，它会触发。用于检查当前用户的资格
8.ionViewCanLeave
在一个需要授权的页面离开之前，它会触发。用于检查当前用户的资格。
这些生命周期钩子（生命周期事件）需要在项目中灵活使用添加。
其次是装饰器
什么是装饰器呢？
装饰器是提供元数据，即描述数据的数据、对数据及信息资源的描述
元数据（Metadata）是描述其它数据的数据（data about other data），或者说是用于提供某种资源的有关信息的结构数据（structured data）。元数据是描述信息资源或数据等对象的数据，其使用目的在于：识别资源；评价资源；追踪资源在使用过程中的变化；实现简单高效地管理大量网络化数据；实现信息资源的有效发现、查找、一体化组织和对使用资源的有效管理。（来自百度）
我的个人理解是存放数据和提供数据的数据结构（类似于存放数据的对象）
常用的装饰器有：
1.@Component({…})
class MyComponent() {} ：组件装饰器，声明一个类是组件，并提供提供有关组件的元数据，对属性进行描述。
具体使用方法如下：
Ionic中的纯ts文件中，会有
@IonicPage()
@Component({
selector: ‘check-list’,
templateUrl: ‘./check-list.html’,
})
//接下来是export导出
这里简单讲讲@Component({ })
@Component({
selector: ‘check-list’,
templateUrl: ‘./check-list.html’,
})
1.1.首先，你必须把Component这个东西导入进来（导包）：
import {Component, OnInit} from “@angular/core”;
这里导了两个模块，【Component】是我们关心的；
1.2.接下来，你要使用这个【Component】,在其前面加入@即可；
1.3.@Component（{内容}）
中的内容有两个：一个是【selector】，另一个是t【emplateUrl】；
1.4.【selector】：是选择器，选择html页面中标签类型【class】；比如【html】页面中的【class】为：
那么，我们如果要选择这个页面，selector后面就要写【‘check-list’】，中间用冒号隔开；
1.5.【templateUrl】表示需要选择的样板页面，就是我们【class】对应的那个页面，例如我class所在的那个html页面为【check-list.html】,那么我的templateUrl后面就要写：【‘./check-list.html’】，这里我的ts文件和我所需要的html这个文件在同一个文件夹中，所以前面有【./】,中间用冒号隔开；
2.@NgModule
模块装饰器 其实严格来说这个是angular2.0及以上版本里面的内容，因为ionic是基于angular封装的，所以就在这里就写下来了。
在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。
模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Rc5之后，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。
NgModule的主要属性如下：
declarations：模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员
providers：指定应用程序的根级别需要使用的service。（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中）
imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
exports：用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。
bootstrap：通常是app启动的根组件，一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。
entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用，一般是bootstrap组件或者路由组件，ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中，否则不会用到这个属性。
每个Angular2的应用都至少有一个模块即跟模块。
import {NgModule} from ‘@angular/core’;
import {BrowserModule} from ‘@angular/platform-borwser’;
import {AppComponent} from ‘./AppComponent’;
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
bootstrap: [AppComponent]
})
export class AppModule{}
3.@Directive
指令定义装饰器
这个可以看下面的这个链接
@Directive的讲解
4.@Pipe
管道定义装饰器
在新的Angular中有各种各样的类修饰器，比如：@App，@Component，@input，@output等等，最近需要用到数据过滤用到了管道@Pipe，下面记录简单@Pipe的简单用法。
Pipe（管道）官网传送门
什么是@Pipe（管道）？
其实这是一个过滤器的修饰声明，和Angular1中的filter的作用是一样的，有了filter能对数据处理提供强大的通用性和便利性，不过从Angular1到Angular2发生了巨大的转变，到了Angular2使用@Pipe是等同于Angular1中的filter，名字变化了而已。
@Pipe基本语法
import { Pipe } from ‘angular2/core’
@Pipe({
name: ‘pipe’ // 使用时的名称
})
export class TestPipe{
/**
* @description 具体处理方法的实现
* @param value 待处理的数据
* @param args 附加参数
* @return 处理完成的数据
*/
transform(value, args) {
return value;
}
}
和下面的angular1中的filter功能相似
Angular1中的filter
.filter(‘hello’, function() {
return function(value) {
return ‘Hello ’ + value;
}
});
Angular2中的@Pipe
import { Pipe } from ‘angular2/core’
@Pipe({
name: ‘Neo’
})
export class HelloPipe {
transform( value ) {
return “Hello ” + value;
}
}
两者在页面中使用基本一致
{{ ‘Neo’ | hello }}
完整的Angular2@Pipe的使用方法如下：
1、声明一个管道ts，用于进行运算( calculate.pipe.ts )
// 导入模块
import {Pipe, PipeTransform} from “@angular/core”;
// 管道名称
@Pipe({
name: “calculatePipe”
})
export class CalculatePipe implements PipeTransform {
// 参数说明:
// value是在使用管道的时候,获取的所在对象的值
// 后面可以跟若干个参数
// arg: 自定义参数, 数字类型, 使用的时候, 使用冒号添加在管道名称后面
transform(value:number, arg:number) {
return value * 10 * arg;
}
}
2、在app.module.ts主模块中引入管道
…
import { CalculatePipe } from "../pipe/calculate.pipe";
@ngModule({
declarations: [
CalculatePipe
]
})3、组件模板中使用
<p>@Pipe管道的例子</p>
<p>
<input type="text" [(ngModel)]="number" name="number" class="form-control"/>
</p>
<!-- 不仅获取当前值，而且传递了一个参数，使用冒号添加到后面 -->
<p>{{ number | calculatePipe : 10 }}</p>pipe
Angular2 中的一些内置管道:
五种内置管道，以及Angular官方的介绍
Pipe Usage Example
1，DatePipe date {{ dateObj | date }} // output is ‘December 8, 2017’
2，UpperCasePipe uppercase {{ value | uppercase }} // output is ‘SOME TEXT’
3，LowerCasePipe lowercase {{ value | lowercase }} // output is ‘some text’
4，CurrencyPipe currency {{ 30.00 | currency:’USD’:true }} // output is ‘$30’
5，PercentPipe percent {{ 0.1 | percent }} //output is 10%
参考资料如下：
https://angular.io/guide/pipes
http://blog.csdn.net/u010730126/article/details/60370716
https://segmentfault.com/a/1190000008262691
5.@PipeTransform
管道接口
6.@Injectable
服务定义装饰器
7.ElmentRef
元素引用
8.@ViewChild
获取子元素
9.Render
渲染
10.Input
接受参数输入
11.Output
事件输出
12.EventEmitter
触发自定义事件