本文转自: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

[转]ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)的更多相关文章

  1. ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)

    首先声明,本教程参考国外网站(http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/) ...

  2. [转]App离线本地存储方案

    App离线本地存储方案 原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localsto ...

  3. [转]Dcloud App离线本地存储方案

    原文地址:http://ask.dcloud.net.cn/article/166 HTML5+的离线本地存储有如下多种方案:HTML5标准方案:cookie.localstorage.session ...

  4. ionic 运用pouchdb/sqlite 数据库做本地存储

    配置数据库环境需要3步: 1.安装slqite插件 在ionic 工程目录对应终端执行一下命令: npm install cordova-plugin-sqlite 2.安装pouchdb 在ioni ...

  5. Wijmo 5 + Ionic Framework之:费用跟踪 App

    Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...

  6. Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App

    费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...

  7. ionic react-native和native开发移动app那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  8. ionic react-native和native开发移动app到底那个好

    ionic react-native和native开发移动app那个好 ? 移动端开发如何选型?这里介绍一下我眼中的ionic,react-native,native 三种移动端开发选型对比.欢迎大家 ...

  9. ionic构建APP--简单操作实现APP制作

    ionic--基于AngularJS的app框架 1安装ionic .HBuilder创建APP项目,导入ionic的css,js(fonts)文件. .导入ionic.css和ionic.bundl ...

随机推荐

  1. 404 Not Found错误页面的解决方法和注意事项

    最近这段时间一直忙于整理网站的错误页面,期间整理了很多关于404 Not Found错误页面的知识,加之最近也在帮团队新来的人员培训seo优化知识,所以在此借助马海祥博客的平台就拿出来跟大家一起分享一 ...

  2. string.join加引号

    columnsGen = string.Join(",", modelDictionary.Keys); valueGen = modelDictionary.Values.Agg ...

  3. u-boot移植总结(一)start.S分析

    本次移植u-boot-2010.09是基于S3C2440的FL440板子,板子自带NANDFLASH而没有NORFLASH,所以在U-BOOT启动的过程中必须实现从NANDFLASH到SDRAM的重定 ...

  4. .Net开发人员有趣的Podcast

            如果你是一个.Net开发人员,那么一定不要错过这些Podcasts,它们可是即可以了解IT业态,又可以锻炼英文听力.有采访很多开源人员,涉及项目等等.先尽力听他们说什么,然后再看Tra ...

  5. PowerShell与CMD在路径解析上的一点不同

    对于路径含有空格的文件夹,在加入PATH环境变量时,前后往往会加上引号.这种情况,CMD可以正确识别:但是Powershell却不能加上引号,否则无法定位路径. 例如,在PS中,$env:path查看 ...

  6. 改变mvc web api 支持android ,ios ,ajax等方式跨域调用

    公司一个移动后端的项目用到了 webapi 项目搭建到外网环境共app开发者调用测试接口时遇到了一个问题 接口不允许跨域调用 .查阅资料明白 同源策略原则根据请求报头值 Origin 与回应报头值 A ...

  7. js中创建对象的几种方式

    创建对象指创建一个object并给这个对象添加属性和方法,有以下几个方式: 最基本的: var Person={}; Person.name='tom'; Person.age='20'; Perso ...

  8. HTML 块元素

    分为3类 1. 结构块 只能包含块级元素.它们包含结构含义,但没有语义含义,也就是,不能说明内容是什么,只能说明其组织方式. <ol> <ul> <dl> < ...

  9. 破解 “PEDIY CrackMe 2007” 之 KeygenMe_1_by_boonz

    系统 : Windows xp 程序 :KeygenMe_1_by_boonz 程序下载地址 :http://www.crackmes.de/users/boonz/keygenme_1_by_boo ...

  10. oracle10g 统计信息查看、收集

      1. 统计信息查看 1.1 单个表的全局统计信息.统计效果查看 2. 统计信息分析(收集) 2.1 分析工具选择 2.2 分析前做index重建 2.3 分析某数据表,可以在PL/SQL的comm ...