开始使用Ionic2

0、介绍

紧随angular的步伐,ionic也推出了2.0版本(beta),把ng1换成了ng2,ui上也增加了material design和window phone的风格,组件上并没有太多的变化。因为ng2,代码风格完全不一样了,熟悉es6的童鞋应该很容易就能上手,而也因为ng2,让整个项目更组建化、模块化了。路由配置也更加简单。

ionic 2Ionic 2


1、技术栈

  • Angular 2.0
  • TypeScript
  • Webpack Gulp
  • ES6
  • Sass

2、目录结构

这样的目录结构,更能体现模块化。

1
2
3
4
5
6
7
8
9
10
|____app.html
|____app.ts
|____pages
| |____page1
| | |____page1.html
| | |____page1.scss
| | |____page1.ts
|____services
| |____service.ts
|____theme

3、配置

1、app配置:app/app.ts作为入口文件(查看webpack.config.js),需要使用@app()来指定初始页面,同时还有相关的配置选项。doc

1
2
3
4
5
6
@App({
templateUrl: './build/app.html'
})
class DemoApp {
constructor () {}
}

2、路由配置:非常简单明了,不像1.0版本的ui-router,若需要在路由跳转时传递参数,并不用在配置时标明。跳转路由时,引入NavController模块,把新的页面push进去并带上需要传递的参数。而被跳转的页面,可以引入NavParams模块获取传递的参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import {RouteConfig, Location} from 'angular2/router'; // 引入路由模块
// 配置路由
const ROUTES = [
{ path: '/list', component: ListPage, useAsDefault: true },
{ path: '/detail', component: DetailPage }
];
@App({
templateUrl: './build/app.html'
})
@RouteConfig(ROUTES) //传入
class DemoApp {
constructor () {}
}
// 跳转页面
goDetail (item) {
this.nav.push(DetailPage, {
id: item.id
});
}

4、@page

每一个页面都当成是一个component,这@page是由ng2的@component演变过来的,providers属性是要注入的服务。

1
2
3
4
5
6
7
8
9
10
11
12
13
@Page({
templateUrl: './build/pages/list/list.html',
providers: [TopicService]
})
export class ListPage {
constructor () {
this.topics = []; //绑定到页面的数据
}
//这里可以写各种方法
getTopics () {
this.topics.push({title: 'test'});
}
}

绑定数据的方法也有了一点改变,详情可以看ng2的官方文档。页面渲染时,数据必须存在,不然会报错,或者渲染成undefined,这点感觉跟ng1有点不一样,没去深入研究。

1
2
3
4
5
6
7
8
9
10
<ion-list>
<ion-item *ngFor="#t of topic" (click)="goDetail(t)">
<ion-avatar item-left>
<img src="{{t.author.avatar_url}}">
</ion-avatar>
<h2>{{t.author.loginname}}</h2>
<h3>{{t.title}}</h3>
<p>{{t.create_at}}</p>
</ion-item>
</ion-list>

5、http

在网上搜了几种方法,唯独就这种写法可以,rxjs/add/operator/map这个必须引入,不然下面的map方法不会执行,但是也不报错,一个坑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//service.ts
import { Inject } from 'angular2/core';
import { Http } from 'angular2/http';
import 'rxjs/add/operator/map';
export class TopicService {
constructor(@Inject(Http) http: Http) { // 注意此处的@Inject()
this.http = http
}
getTopics () {
var url = 'http://api.url.com';
return this.http.get(url).map(res => res.json());
}
}

6、项目地址