理解ionic2 + angular2开发方案
看了下ionic2的官方文档，做了简单的分析理解。
1. 安装使用
& &ionic2的安装运行基本和前版本的ionic基本一致，非常简单。
&& npm install -g ionic& & # 安装ionic工具集
& &ionic start projectName --v2& & # --v2表示使用ionic2 + angular2的组合方式创建项目，否则使用ionic + angular创建项目，此时ionic会下载所需要的相关包
& &cd projectName&&# 进入创建的项目名称目录
& & ionic serve # 启用浏览器调试应用页面，这时通过浏览器打开默认端口页面http://localhost:8100/#/tab/dash就可以打开应用页面了
当然这里需要保证你的开发环境SDK已经安装成功了，例如Android打包平台的运行环境，可以参考Ionic Hybrid跨终端应用程序开发方案研究
如果需要在移动设备上打包运行，则需要添加相对应的插件模块。
npm install -g cordova&&# 如果没有真实设备，可以通过这个命令来安装模拟环境
ionic platform add ios # 添加ios运行支持
ionic emulate ios& &# 模拟运行ios环境
ionic platform add android&&# 添加Android运行环境支持
ionic run android& &# 使用Android运行应用
正常情况下，这里ionic会将打包的文件安装到设备或调试模拟器上运行打开应用。
2. 和ionic的区别
ionic2是建立在angular 2上的，angular 2推荐使用typescript进行项目的开发，所以到了ionic2，就可以这样来开发我们的项目了。一般情况下，我们创建应用完成后，www/目录为我们页面的源代码。其目录结构如下：
& & + css/
& & + img/
& & + lib/
& & + templates/
& & + index.html
& & + manifest.json
& & + service-worker.js
我们以www/js/app.js为例。
// 入口JavaScript文件，配置页面路由与加载的视图
// ionic版本写法 .config(function($stateProvider, $urlRouterProvider) {
& & $stateProvider.state('tab', {
& && &&&url: '/tab',
& && &&&abstract: true,
& && &&&templateUrl: 'templates/tabs.html'
& & }).controller('MainCtrl', function($scope){
& && &&&$scope.data ={
& && && && &text: 'Hello World'
// ionic 2写法 @Component({
& & templateUrl:'main/main.html'
export class MainCmp {
& & constructor(){
& && &&&this.data ={
& && && && &text: 'Hello World'
templates/tabs.html的内容如下。
&ion-content ng-controller=&MainCtrl&&
& & &ion-item&
& & &/ion-item&
&/ion-content&
ionic2里面里可以这样来适应原来的版本：
&ion-content ng-controller=&MainCtrl as main&&
& & &ion-item&
& & &/ion-item&
&/ion-content&
值得注意的是，这里&ion-content&等为ionic-angular提供的组件模块，它类似于Webcomponent的方式，能被angular识别解析。通俗的理解就是一个类似bootstrap的UI组件库。
ionic2除了提供统一便捷式APP打包的解决方案，还提供了一个用于移动端的UI组件库。其实类似的组件库有很多，bootstrap、frozenui、wui等等，但是与其它框架提供UI组件不同的是，ionic2提供的组件规范是面向未来Webcomponent的方式实现的。
例如对于一个对话框组件，一般的UI框架可能这样来实现，相信类似的框架大家多少用过。这里以frozenui为例，一般通过对元素添加不同的class名称来控制组件的样式和显示，而像ui-dialog这些类名是UI库统一定义好的。
&div class=&ui-dialog&&
& & &div class=&ui-dialog-cnt&&
& && &&header class=&ui-dialog-hd ui-border-b&&
& && && && && && &&h3&新手任务&/h3&
& && && && && && &&i class=&ui-dialog-close& data-role=&button&&&/i&
& && && && &&&&/header&
& && &&&&div class=&ui-dialog-bd&&
& && && && &&h4&标题标题&/h4&
& && && && &&div&这是标题的内容！&/div&
& && &&&&/div&
& && &&&&div class=&ui-dialog-ft&&
& && && && &&button type=&button& data-role=&button&&取消&/button&
& && && && &&button type=&button& data-role=&button&&开通&/button&
& && &&&&/div&
& & &/div&& && &&&
&script class=&demo-script&&
$(&.ui-dialog&).dialog(&show&);
但是使用ionic2，你可能会这样来使用，在这里，我们没有去对模块元素添加一些样式的类，因为angular2将自定义组件标签ion-header对应的CSS已经通过Webcomponent的形式引入了，那么我们只用管怎样使用结构层结构就可以了，但是这里注意的是primary block等类名没有添加到class中。
&ion-header&
& & &ion-navbar&
& && &&&&ion-title&Confirm&/ion-title&
& & &/ion-navbar&
&/ion-header&
&ion-content padding&
& & &button primary block (click)=&doConfirm()&&确认对话框&/button&
&/ion-content&
import { AlertController } from 'ionic-angular';
export class MyPage {
& & constructor(public alertCtrl: AlertController) {}
& & showConfirm() {
& && &&&let confirm = this.alertCtrl.create({
& && && && &title: '标题标题',
& && && && &message: '这是标题的内容',
& && && && &buttons: [{
& && && && && & text: '取消',
& && && && && & handler: () =& {
& && && && && && &&&console.log('取消');
& && && && && & }
& && && && &}, {
& && && && && & text: '确定',
& && && && && & handler: () =& {
& && && && && && &&&console.log('A确定');
& && && && && & }
& && && && &}]& && &&&});
& && &&&confirm.present();
其它的相关组件的方式类似，同时你也可以去自定义遵循Webcomponent的element 组件。
更多API: /docs/v2/components/#alert-prompt
4、native交互
当然，ionic2还提供了与Native客户端的相互调用能力，前端相关的一套JavaScript调用库被称为Ionic Native。如果在你的APP需要调用Native调用能力。现需要安装引入对应的模块，一边在分析打包时引入。
npm install ionic-native --save
调用时就可以这样来使用。
import {Geolocation} from 'ionic-native';
Geolocation.getCurrentPosition().then(pos =& {
& & console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
let watch = Geolocation.watchPosition().subscribe(pos =& {
& & console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude);
// to stop watching
watch.unsubscribe();
使用ionic2也可以使用ES6+的方式来实现。
// ES6 / TypeScript / Ionic 2 / Angular 2
import {Camera} from 'ionic-native';
this.platform().then(() =& {
& & Camera.getPicture().then(
& && &&&res =& console.log(&We have taken a picture!&),
& && &&&err =& console.error(&Error taking picture&, err)
具体更多API: /docs/v2/native/
5、主题与图标
如果你需要改变ionic2 UI组件库的显示风格，你也可以自定义自己的APP样式。方法也很简单，ionic2 的UI组件库样式引用了通用的样式变量，在app/theme/app.variables.scss里面修改响应的颜色和字体值就可以了。这点和其它UI框架是一样的。当然你也可以修改保存多个主题风格的变量文件，以供选择使用。
$colors: (
& & primary:& & #387ef5;
& & secondary:&&#32db64;
& & danger:& &&&#f53d3d;
& & light:& && &#f4f4f4;
& & dark:& && & #222;
对于图标的话就没什么讲的了，和fontawsome一样，ionic2给了UI框架自带的可选图标，大家可以根据下面的文档说明选择使用。
图标参考: /docs/v2/ionicons/
总结来看，ionic2不仅为我们提供了打包前端页面应用的解决方案，还为我们提供了一整套的UI组件库，而且组件均使用Web Component规范来实现，开发体验有了较好的改善。
更多API: /docs/v2/
装好安卓环境。 //：怎么打包成apk的啊，我试了2次都失败了 //：确实。 //：Angular2中秋才正式发布，以前玩过一段时间，还是觉得React好。
怎么打包成apk的啊，我试了2次都失败了 //：确实。 //：Angular2中秋才正式发布，以前玩过一段时间，还是觉得React好。
确实。 //：Angular2中秋才正式发布，以前玩过一段时间，还是觉得React好。
Angular2中秋才正式发布，以前玩过一段时间，还是觉得React好。
6 总笔记数
9113 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：使用Ionic2开发Todo应用 - tedeum - ITeye技术网站
本文使用Ionic2从头建立一个简单的Todo应用，让用户可以做以下事情：
查看todo列表
添加新的todo项
查看todo详情
保存 todo到持久化存储
0 开始之前
本教程需要你了解基本的Ionic 2概念。已经在电脑上安装了Ionic 2。如果没有，先去安装和学习吧。
1 创建新的Ionic 2工程
我们将通过生成一个基于“空白”模板的新项目开始。这是一个空的项目框架，但有一些示例代码供我们使用。
运行以下命令创建新项目
ionic start ionic-todo blank
一旦代码生成,在文本编辑器打开项目。可以看到Ionic 2项目的基本结构， 这些是由Ionic CLI生成的代码。
基本上,我们的应用程序中的所有组件(我们的应用程序将由不同的组件组成)将在 src 文件夹中(包括app文件夹中的根组件和在pages文件夹中我们所有的页面组件)。一个组件将包括一个模板（.html文件)，类定义(.ts文件)，或者一些样式(.scss文件)。同组件类似，您还可能创建诸如服务services(如稍后我们将创建的数据服务)，但没有模板和样式，但在结构上类似一个正常的组件。这些服务也被称作“providers”将被放置在一个providers文件夹。
现在,只有一个HomePage组件,设置一个虚拟视图。在我们的应用程序中我们要修改这个来显示的所有待办事项列表。
先从自动生成的**src/ponent.ts文件开始来看一下：
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';
@Component({
template: `&ion-nav [root]="rootPage"&&/ion-nav&`
export class MyApp {
rootPage = HomeP
constructor(platform: Platform) {
platform.ready().then(() =& {
StatusBar.styleDefault();
ponent.ts文件中定义了根组件（root component）。相比其他组件该组件是特殊的,因为它是第一个组件被加载到应用程序,从那里我们可以显示更多的组件,可以添加更多的组件等等。基本上,我们的应用程序结构就像一棵树，根组件就是树的根。
因此,重要的是我们的根组件（root component）知道在哪里可以找到我们的HomePage主页,因为需要将它设置为root page根页面。注意,我们导入(importing)HomePage 在这个文件主页的顶部,然后在下面的代码中设置它作为根页面（ root page**）:
rootPage: any = HomePage;
我们可以在构造函数上面声明变量，像上面这样的使其成员变量 member variables,这意味着他们可以通过引用this.myVal在整个类中被被访问，同时，它也将在您的模板中可用。 ： any 只是一个TypeScript语言的内容，意味着rootPage可以是任何(any)类型。如果你不适应 TypeScript，并感到困惑，那也不用担心——你可以把类型抛开，您的应用程序仍然会工作的很好。我不会在本教程中使用类型，除了依赖注入是不可替代的地方(我们将稍后介入)。如果你想知道更多关于在Ionic 2中使用类型，应该学习TypeScript或ECMAScript 6相关知识。root page 根页面是您应用程序显示的第一个页面,然后你可以从这里导航到其他页面。改变Ionic 2应用程序中的视图可以通过改变这一根页面,或 push 推或 pop弹出视图。推一个视图将会改变展现，弹出它将删除当前视图并回到前面的视图。关于导航的更详细的解释,我推荐看看一个相关的Ionic 2导航指南。
2. 设置主页（Home page）
现在我们已经建立了基本的应用程序，让故事开始吧。首先,让我们建立todo列表模板。
2.1 创建模板
按照下面的内容修改 src/pages/home/home.html ：
color="secondary"&
ion-button icon-only (click)="addItem()"& name="add-circle"&&&
*ngFor="let item of items" (click)="viewItem(item)"&{{item.title}}&
注意这里使用的语法在列表中使用*ngFor*，创建了一个速记到嵌入的模板中。这样就不用迭代输出了:
*ngFor="let item of items" (click)="viewItem(item)"&{{item.title}}&
根据DOM(文档对象模型)，嵌入式模板将会为每个项（items）创建特定的数据。所以,如果我们的items数组(稍后将定义在类定义)有4项，那么& ion-item &将渲染四次。还要注意,我们使用的 let item ，循环分配一个items数组项给item。这允许我们引用其属性,并传递到viewItem函数。
我们将标题设置为Todos（待办事项）!我们设计一个按钮使用& ion-buttons &。因为这里有个end属性，按钮将被放置在end的位置。不同属性的行为可能会有所不同，取决于在什么平台上运行，以iOS为例,将end会将按钮放到导航栏的右边。还要注意,按钮本身我们给它一个属性的ion-button将会使用Ionic 2 的按钮样式，而icon-only样式将会让按钮只包含一个图标没有文本。
我们使用 (click) 来附加一个点击监听器到这个元素，这里将在在home.ts中调用addItem()函数。
2.2 创建类
按如下修改src/pages/home/home.ts：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
constructor(public navCtrl: NavController) {
ionViewDidLoad(){
this.items = [
{title: 'hi1', description: 'test1'},
{title: 'hi2', description: 'test2'},
{title: 'hi3', description: 'test3'}
addItem(){
viewItem(){
还记得大明湖畔的夏雨荷吗？哦不是，还记得之前我们如何给homePage分配一个any类型变量吗?现在我们在构造函数中分配一个NavController类型给navCtrl参数。这就是Ionic 2 的依赖注入工作模式，基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字在它面前,它会自动创建一个成员变量。这意味着我们现在可以引用NavController通过在类里任意使用this.navCtrl。
现在我们已经建立了一些假的数据(我们使用ionViewDidLoad生命周期钩子，这将在页面加载时被触发)，您应该能够看到它已经在列表中渲染了：
Todos 列表页面
在运行 ionic serve 时，因为既然我们导入了NavController服务，我们就可以在这个组件push或pop视图，如下所示：
.navCtrl.push();
ionic g page AddItemPage
我们已经创建了添加和查看项目的方法，在更进一步之前我们不得不先创建 AddItemPage andItemDetailPage 组件。
2.3 添加项目
我们将要创建一个新组件让我们添加新的todo项。当然，这只是一个简单的表单提供了标题和描述来创建todo。
运行如下命令来生成一个add-item页面
ionic g page AddItemPage
任何时候当我们创建一个新页面，我们需要确保该页面被导入（imported）到我们的 app.module.ts，然后在entryComponents和declarations数组中被声明。
按如下修改 src/app/app.module.ts ：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './ponent';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
@NgModule({
declarations: [
AddItemPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage
providers: []
export class AppModule {}
就像上次，我们先创建组件的模版。
2.4 建立新增项目模版
按如下内容修改 src/pages/add-item-page/add-item-page.html :
color="secondary"&
ion-button icon-only (click)="close()"& name="close"&&&
floating&Title&
type="text" [(ngModel)]="title"&&
floating&Description&
type="text" [(ngModel)]="description"&&
full ion-button color="secondary" (click)="saveItem()"&Save&
这里没有什么太疯狂的开始。这次我们定义了另一个按钮,简单地调用了定义在add-item-page.ts中的saveItem函数。我们还有另一个按钮指向一个close方法——因为这个页面作为一个Mode模式的页面，我们希望能把页面关闭，所以我们也会在add-item-page.ts定义这个方法。现在我们有一些输入框了，它们又有[(ngModel)]属性，这个就是双向绑定。任何作用到title字段的改变都将立即影响到add-tiem-page.ts（我们马上要讲到）里面的this.title成员变量。反之亦然，任何this.title上的改变都将立即影响到模版。同样注意到我们的保存按钮上使用了full属性，这个方便的小属性帮助我们设置按钮宽度为full。
2.5 建立添加项的类
现在我们将要建立一个类给我们的添加项组件。
按如下内容修改 add-item-page.ts：
import { Component } from '@angular/core';
import { NavController, ViewController } from 'ionic-angular';
@Component({
selector: 'page-add-item-page',
templateUrl: 'add-item-page.html'
export class AddItemPage {
constructor(public navCtrl: NavController, public view: ViewController) {
saveItem(){
let newItem = {
title: this.title,
description: this.description
this.view.dismiss(newItem);
this.view.dismiss();
这里我们导入了一个怪异的服务：ViewController，可以用于模态（Modals）页面的关闭（dismiss）。
除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前的标题和描述值(即我们建立双向数据绑定，无论用户输入什么)，然后我们关闭视图，同时我们也传入了newItem在dismiss方法中。这将允许我们建立一个侦听器，当回到主页(就是那个启动这个页面的另外一个页面)时获取数据。通过这种方式,我们可以从一个页面传递数据到另一个页面(然而，记住，模态不需要在页面之间传递数据)。
2.6 在主页保存新增项
就像我提到的，我们把要保存的数据返回发送给HomePage。我们现在导入import我们新增的AddItemPage组件到HomePage，当用户点击新增时我们就创建出该视图。
按如下内容修改 src/pages/home/home.ts :
import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item-page/add-item-page'
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
ionViewDidLoad(){
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) =& {
this.saveItem(item);
addModal.present();
saveItem(item){
this.items.push(item);
viewItem(item){
你看上面这个文件的顶部，可以发现我们现在导入import了AddItemPage组件。这时我们就可以用这个页面创建模态页面了，具体看addItem方法。注意我们这里建立了一个onDidDismiss监听器，这样就可以获取模态关闭时回传的数据，并通过saveItem方法保存。现在，我们仅通过将数据push到items数组，最终，我们将保存到数据库。我们已经移除了假数据，因为现在用户输入通过saveItem方法被添加到了this.items。我们将items初始为空。
2.7 查看项目
现在，我们想要一个功能，就是用户点击todo列表里面的某一项，然后可以看到该项的细节信息（例如：这里只有描述可以看了，实际可以根据需要扩展，呵呵）。要做这个我们应该知道这是又要创建一个新组件了啊。
还记得如何创建页面吗，运行下面的代码创建一个 item-detail 页面:
ionic g page ItemDetailPage
time and time again，我们需要在 app.module.ts 文件中设置一下，三件事：import，declarations， entryComponents：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './ponent';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
import { ItemDetailPage } from '../pages/item-detail-page/item-detail-page';
@NgModule({
declarations: [
AddItemPage,
ItemDetailPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage,
ItemDetailPage
providers: []
export class AppModule {}
按照顺序是该写模版了，开始：
千篇一律，按照下面的内容自行修改 src/pages/item-detail-page/item-detail-page.html :
color="secondary"&
{{description}}
相比其他模版，这里相当的直白。我们只是使用& ion-card &指令简单装饰下，并输出标题和描述，值将在item-detail-page.ts中定义。
好，继续按照下面的内容自行修改 src/pages/item-detail-page/item-detail-page.ts ：
import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';
@Component({
selector: 'page-item-detail-page',
templateUrl: 'item-detail-page.html'
export class ItemDetailPage {
constructor(public navParams: NavParams){
ionViewDidLoad() {
this.title = this.navParams.get('item').
this.description = this.navParams.get('item').
当我们把这个页面将传入的数据项,点击,然后我们把物品的标题和描述,使用NavParams。
现在我们要做的是在home.ts 内设置 viewItem 函数和导入新的细节页面。
src/pages/home/home.ts 修改如下：
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
添加的导入代码放在 src/pages/home/home.ts 的顶部：
import { ItemDetailPage } from '../item-detail-page/item-detail-page';
这时就可以push出项目的细节页面，然后传入被点击的项目。如果你现在点击存在于列表中的项目，你可能看到如下界面：
项目细节页面
3 持久化数据保存
Todo应用程序现在将基本工作,但数据没有被存储在任何地方只要你刷新应用程序你将失去你所有的数据(不理想)。
现在我们要做的是创建一个服务被称为Data用来处理存储和检索数据。我们将使用Ionic 2提供的Stroage服务来帮助我们做到这一点。Stroage服务是Ionic 2的通用存储服务,它负责存储数据的最佳方式,同时提供了一致的API供我们使用。
这意味着,如果您正在设备上运行，安装了SQLite插件，那么它将使用一个本地SQLite数据库进行存储，否则它将退回到使用基于浏览器的存储(可能被操作系统擦除)。
运行下面代码创建服务
ionic g provider Data
data.ts 代码修改如下：
import { Storage } from '@ionic/storage';
import {Injectable} from '@angular/core';
@Injectable()
export class Data {
constructor(public storage: Storage){
getData() {
return this.storage.get('todos');
save(data){
let newData = JSON.stringify(data);
this.storage.set('todos', newData);
这个是有点不同于我们已经创建的组件(它可能更合适认为是service)。我们不使用@component装饰，而使用@Injectable声明这个类。
在构造函数中,我们建立一个 Storage 服务的引用。
数组中save函数简单地将所有的项放入数组并保存到存储，每当项目变化我们将调用这个函数。
我们还将需要设置的Storage服务,以及 Data provider,在我们 app.module.ts 文件。
src/app/app.module.ts 修改如下：
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './ponent';
import { HomePage } from '../pages/home/home';
import { AddItemPage } from '../pages/add-item-page/add-item-page';
import { ItemDetailPage } from '../pages/item-detail-page/item-detail-page';
import { Storage } from '@ionic/storage';
import { Data } from '../providers/data';
@NgModule({
declarations: [
AddItemPage,
ItemDetailPage
imports: [
IonicModule.forRoot(MyApp)
bootstrap: [IonicApp],
entryComponents: [
AddItemPage,
ItemDetailPage
providers: [Storage, Data]
export class AppModule {}
请注意,我们已经声明这些在providers的数组,而不是declarations或entryComponents数组。
现在我们需要更新。ts使用这项新服务。
src/pages/home/home.ts 文件修改如下：
import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import { AddItemPage } from '../add-item-page/add-item-page'
import { ItemDetailPage } from '../item-detail-page/item-detail-page';
import { Data } from '../../providers/data';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
export class HomePage {
public items = [];
constructor(public navCtrl: NavController, public modalCtrl: ModalController, public dataService: Data) {
this.dataService.getData().then((todos) =& {
if(todos){
this.items = JSON.parse(todos);
ionViewDidLoad(){
addItem(){
let addModal = this.modalCtrl.create(AddItemPage);
addModal.onDidDismiss((item) =& {
this.saveItem(item);
addModal.present();
saveItem(item){
this.items.push(item);
this.dataService.save(this.items);
viewItem(item){
this.navCtrl.push(ItemDetailPage, {
item: item
这是我们最后的一些代码。再次,我们importing数据服务,通过传递给构造函数。我们依然设置 items 开始是空的，使用数据服务获取数据。重要的是要注意getData 返回promise而不是数据本身。抓取的数据存储是异步的，这意味着我们的应用程序将继续运行当数据加载时。promise让我们数据完成加载时执行一些操作,而不需要暂停整个应用程序。
最后,我们还添加一个调用save 函数保存在数据服务当一个新的条目被添加。现在该函数将马上更新我们的新数据条目数组，但items也将被复制保存到数据服务,以便下次我们回到应用程序是可用。
在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能：
监听和处理事件
视图之间的导航
在视图之间传递数据
建立双向数据绑定
显然还有很多我们可以做，使这个应用程序更漂亮，添加删除和编辑笔记的能力等等。
浏览: 302891 次
来自: 昆明
我们https://yunba.io/也是基于MQTT协议实现 ...
GoEasyweb 推送基于websocket 和pollin ...
tedeum 写道produces 注意版本问题，老的版本不支 ...
并没有下载地址啊
请教一下博主，Geoserver的相关开发资料从哪找得到，官方 ...}