1 pouchDB的介绍
个人感觉比storage(http://ionicframework.com/docs/storage/)好用多了，同是具有sqlite的一些特点，
PouchDB(https://pouchdb.com)是一个开源JavaScript项目,来自Apache CouchDB数据库设计运行在浏览器中。PouchDB帮助web开发人员构建应用程序创建工作离线在线一样。它允许应用程序在本地存储数据离线,然后同步CouchDB和兼容的服务器应用程序重新上线时,保持用户的数据同步不管他们下一个登录。
在ionic2中的使用可以参开这篇文章
https://www.joshmorony.com/offline-syncing-in-ionic-2-with-pouchdb-couchdb/
再是先不用云储存couchDB，
1)安装
npm install @types/pouchdb --save
2)在app.module.ts配置
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Todos } from '../providers/todos';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, Todos]
})
export class AppModule {}
3)创建一个provider(todo.ts)中输入
import { Injectable } from '@angular/core';
import PouchDB from 'pouchdb';
@Injectable()
export class Todos {
data: any;
db: any;
remote: any;
constructor() {
this.db = new PouchDB('cloudo');//相当于创建一个数据表，类似于关系型数据库的表，一个应用最好创建一个表
}
//获取所有储存的数据
getTodos() {
if (this.data) {
return Promise.resolve(this.data);
}
return new Promise(resolve => {
this.db.allDocs({
include_docs: true
}).then((result) => {
this.data = [];
let docs = result.rows.map((row) => {
this.data.push(row.doc);
});
resolve(this.data);
this.db.changes({live: true, since: 'now', include_docs: true}).on('change', (change) => {
this.handleChange(change);
});
}).catch((error) => {
console.log(error);
});
});
}
//插入数据插入之后会自动生成一个_id和_rev两个参数与
createTodo(todo){
this.db.post(todo);
}
//修改数据
updateTodo(todo){
this.db.put(todo).catch((err) => {
console.log(err);
});
}
//删除数据
deleteTodo(todo){
this.db.remove(todo).catch((err) => {
console.log(err);
});
}
}
4)在home.ts中使用
import { Component } from "@angular/core";
import { NavController, AlertController } from 'ionic-angular';
import { Todos } from '../../providers/todos';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
todos: any;
constructor(public navCtrl: NavController, public todoService: Todos, public alertCtrl: AlertController) {
}
ionViewDidLoad(){
this.todoService.getTodos().then((data) => {
this.todos = data;
});
}
createTodo(){
let prompt = this.alertCtrl.create({
title: 'Add',
message: 'What do you need to do?',
inputs: [
{
name: 'title'
}
],
buttons: [
{
text: 'Cancel'
},
{
text: 'Save',
handler: data => {
this.todoService.createTodo({title: data.title});
}
}
]
});
prompt.present();
}
updateTodo(todo){
let prompt = this.alertCtrl.create({
title: 'Edit',
message: 'Change your mind?',
inputs: [
{
name: 'title'
}
],
buttons: [
{
text: 'Cancel'
},
{
text: 'Save',
handler: data => {
this.todoService.updateTodo({
_id: todo._id,
_rev: todo._rev,
title: data.title
});
}
}
]
});
prompt.present();
}
deleteTodo(todo){
this.todoService.deleteTodo(todo);
}
}
5)home.html
<ion-header no-border>
<ion-navbar color="secondary">
<ion-title>
ClouDO
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="createTodo()"><ion-icon name="cloud-upload"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list no-lines>
<ion-item-sliding *ngFor="let todo of todos">
<ion-item>
{{todo.title}}
</ion-item>
<ion-item-options>
<button ion-button icon-only color="light" (click)="updateTodo(todo)">
<ion-icon name="create"></ion-icon>
</button>
<button ion-button icon-only color="primary" (click)="deleteTodo(todo)">
<ion-icon name="checkmark"></ion-icon>
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
6）home.scss
.ios, .md {
page-home {
.scroll-content {
background-color: #ecf0f1;
display: flex !important;
justify-content: center;
}
ion-list {
width: 90%;
}
ion-item-sliding {
margin-top: 20px;
border-radius: 20px;
}
ion-item {
border: none !important;
font-weight: bold !important;
}
}
}
7)src/theme/variables.scss
$colors: (
primary: #95a5a6,
secondary: #3498db,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
favorite: #69BB7B
);
