本文轉自：http://www.cnblogs.com/ailen226/p/ionic.html
首先聲明，本教程參考國外網站（http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/）
代碼書寫格式上不一樣！
1. ionic是跨平台app開發的工具（Cordova）的一個框架！
2.PouchDB是操作SQLite數據庫的javascript庫（跟mongoose操作mongodb一樣）！
3.SQLite是一種輕量級的嵌入式數據庫（數據庫不需要你安裝的，手機系統自帶，你需要安裝的就是SQLite插件）！
第一步 ：安裝Cordova 和 ionic 命令如下：
npm install -g cordova ionic
第二步：創建工程 命令如下：
ionic start birthday
第三步：安裝SQLite插件和pouchdb.js庫，並將pouchdb引入到index.html中。
|
1
2
3
4
5
6
7
8
|
//安裝SQLite插件
cordova plugin add io.litehelpers.cordova.sqlitestorage
//安裝pouchdb庫
bower install pouchdb
//在index.html引入pouchdb
<script src=
"lib/pouchdb/dist/pouchdb.min.js"
></script>
|
第四步：環境基本OK了！接下來開始寫代碼了！
首先配置service你也可以用factory，我用的service。在www/js/services.js 末尾去掉分號，添加一下代碼。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
.service(
'birthday'
,
function
() {
var
_db;
//dateFix 函數是用來處理SQLite讀出的數據的，因為SQLite的存儲的數據結構層次優點不同，
//感興趣的同學可以把數據打印出來研究下
function
dateFix (result) {
var
data = [];<br> result.forEach(
function
(each) {<br> data.push(each.doc);<br> });
return
data
};
return
{
initDB:
function
() {
_db =
new
PouchDB(
'birthday'
, {adapter:
'websql'
});
},
getAllBirthday:
function
(callback) {
_db.allDocs({include_docs:
true
}).then(
function
(result) {
callback(dateFix(result.rows));
})
},
addBirthday:
function
(birthday) {
_db.post(birthday);
},
removeBirthday:
function
(birthday) {
_db.remove(birthday);
}
}
});
|
第五步：項目啟動時我們要初始化數據庫，所以我們在.run()方法里初始化數據庫；
有顏色的地方就是加的代碼，第一處時注入我們之前定義的service('birthday')。現在注入進去。
第二處表示$ionicPlatform准備好之后初始化數據庫
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.run(
function
($ionicPlatform<span style=
"background-color: rgb(255, 0, 255);"
>, birthday</span>) {
$ionicPlatform.ready(
function
() {
<span style=
"background-color: rgb(255, 0, 255);"
>birthday.initDB();</span>
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if
(window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(
true
);
cordova.plugins.Keyboard.disableScroll(
true
);
}
if
(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
}
|
第六步：開始controller里和views里的代碼了
工程中的路由都已經配置好了，我們直接修改她的controller和views就行了！
展示生日我們用tab-dash.html， 對應的controller是DashCtrl；
tab-dash.html中的代碼修改如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<ion-view view-title=
"Dashboard"
>
<ion-content
class
=
"padding"
>
<div
class
=
"list card"
ng-repeat=
"birthday in birthdays"
>
<div
class
=
"item item-divider"
>{{birthday.date}}</div>
<div
class
=
"item item-body"
>
<div>
{{birthday.name}}
</div>
</div>
</div>
</ion-content>
</ion-view>
|
DashCtrl中修改如下：
|
1
2
3
4
5
6
7
8
9
10
|
.controller(
'DashCtrl'
,
function
($scope, birthday) {
$scope.birthdays = [];
$scope.init =
function
() {
birthday.getAllBirthday(
function
(data) {
console.log(data);
//還沒保存數據目前打印的是空數組
$scope.birthdays = data;
})
};
$scope.init();
})
|
第七步：開始保存數據頁面的controller和views編寫了！
存儲數據的頁面就用tab-account.html, controller就用AccountCtrl。
tab-account.html的頁面代碼改成這樣
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<ion-view view-title=
"Account"
>
<ion-content>
<ion-list>
<div
class
=
"row"
>
<div
class
=
"col col-100"
style=
"height:100px;"
></div>
</div>
<div
class
=
"row"
>
<div
class
=
"col col-10"
>{{name}}</div>
<div
class
=
"col col-80"
></div>
<div
class
=
"col col-10"
>{{date}}</div>
</div>
<div
class
=
"row"
>
<div
class
=
"col col-20"
>
姓名:
</div>
<div
class
=
"col col-80"
>
<input type=
"text"
ng-model=
"a.name"
style=
"border:1px solid black"
>
</div>
</div>
<div
class
=
"row"
>
<div
class
=
"col col-20"
>
生日:
</div>
<div
class
=
"col col-80"
>
<input type=
"text"
ng-model=
"a.date"
style=
"border:1px solid black"
>
</div>
</div>
<div
class
=
"row"
>
<div
class
=
"col col-20"
></div>
<div
class
=
"col col-20"
>
<button ng-click=
"psotBirthday()"
>保存</button>
</div>
<div
class
=
"col col-60"
></div>
</div>
</ion-list>
</ion-content>
</ion-view>
|
接下來修改AccountCtrl
代碼改成這樣：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.controller(
'AccountCtrl'
,
function
($scope, birthday) {
$scope.a = {}
$scope.psotBirthday =
function
() {
console.log($scope.a);
if
(!$scope.a.name && !$scope.a.date) {
alert(
"姓名和日期不能為空!"
);
return
;
};
birthday.addBirthday($scope.a);
$scope.a.name =
''
;
$scope.a.date =
''
;
}
});
|
效果圖：在此頁面輸入 再點擊Status顯示如下：
OK到現在，我已經把通過pouchdb和SQLite在手機本地存儲數據，取出數據的過程已經演示完成。至於刪除也很簡單的。
我相信你可以自己去查看官方文檔，自己去實現的！
pouchdb官方API地址：http://pouchdb.com/api.html#delete_document