开始使用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、项目地址