关于angular-webSQL的使用

来源:互联网 发布:软件技术服务包括什么 编辑:程序博客网 时间:2024/06/14 17:41

最近在用angular写一个移动端的项目,其中某模块用到了模糊查询功能,说是要在前端来实现此功能,而且查询的数据体量较大,所以就想到用webSQL可以存储,听说angular封装了一个webSQL的模块,于是就决定采用angular-websql用于存储数据,下面来说下其使用的具体方法:

1.安装

1.1 可以采用bower来安装,前提是你已经安装过bower,或者可以在此下载安装:bower下载地址 

安装命令:bower install angular-websql 

       1. 2 引入文件:安装好后将angular-websql.js/angular-websql.min.js文件引入bower.json配置文件中

1.3 将angular-websql模块注入到你的angular应用中:

Example:angular.module(' modlue ',[ ' angular-wensql ' ] )

2.使用

2.1 将$webSQL添加到你所用的controller中:

 Example:angular.module(' modlue ',[ ' angular-wensql ' ] ).controller("controller-name",function($scope,$webSQL) {......})

下面就可以正常的使用其对应的Methods了,所有的Methods都支持异步调用!

     2.2 Methods

2.2.1 创建数据库:

    Example:

$scope.db = $webSql.openDatabase('localdb', '1.0', 'Test DB', 2 * 1024 * 1024,callback);

    其中有5个参数,参数说明

参数1 ----> 数据库名称

                        参数2 ----> 当前数据库版本号

                        参数3 ----> 对当前数据库的描述

参数4 ----> 数据库的容量

参数5 ----> 回调函数

 2.2.2 创建表

Example:

$scope.db.createTable('localDB', {  "id":{    "type": "INTEGER",    "null": "NOT NULL",     "primary": true,    "auto_increment": true   },  "created":{    "type": "TIMESTAMP",    "null": "NOT NULL",    "default": "CURRENT_TIMESTAMP"   },  "username":{    "type": "TEXT",    "null": "NOT NULL"  },  "password": {    "type": "TEXT",    "null": "NOT NULL"  },  "age": {    "type": "INTEGER"  }})

2.2.3 插入数据

Example:

$scope.db.insert('localDB', {"username": 'pc', "password": '1234', 'age': 22}).then(function(results) {  console.log(results.insertId);})

2.2.6 批量插入数据

Example:

$scope.db.insert('localDB', [{"username": 'pc1', "password": '1234', 'age': 22},{"username": 'pc2', "password": '5678', 'age': 23},{"username": 'pc3', "password": '9101', 'age': 24},{"username": 'pc4', "password": '1213', 'age': 25},]).then(function(results) {  console.log(results.insertId);})

2.2.5 移除表

Example:

$scope.db.dropTable('localDB')
2.2.7 更新数据库

Example:

$scope.db.update("localDB", {"username": 'paulo.caldeira'}, {  'id': 1})
或者

$scope.db.update("localDB", {"age": 23}, {  "username": {    "operator":'LIKE',    "value":'paulo.*',    "union":'AND'  },  "age": 22})

 2.2.8 删除数据

Example:删除id为1的这行数据

$scope.db.del("user", {"id": 1})
 2.2.9 查询数据  有5种方法

 方法一  select(string tableName, object where)

 Example: 查询age 为空 username不为空的数据,并且在后面.then()中可读取查询到的数据

$scope.db.select("localDB", {  "age": {    "value":'IS NULL',    "union":'AND'  },  "username":'IS NOT NULL'}).then(function(results) {  $scope.users = [];  for(i=0; i < results.rows.length; i++){    $scope.users.push(results.rows.item(i));  }})
  方法二   selectAllLimit(string tableName, int limit)

   Example:查询前100个数据

$scope.db.selectAllLimit("localDB", 100).then(function(results) {  $scope.users = [];  for(var i=0; i < results.rows.length; i++){    $scope.users.push(results.rows.item(i));  }})

        方法三  selectLimit(string table, object where, int limit)

  Example:在数据库前100条数据中查询age 为空 username不为空的数据

$scope.db.selectLimit("localDB", {  "age": {    "value":'IS NULL',    "union":'AND'  },  "username":'IS NOT NULL'}, 100).then(function(results) {  $scope.users = [];  for(i=0; i < results.rows.length; i++){    $scope.users.push(results.rows.item(i));  }})
  方法四    selectAll(string tableName, [{operator:"string",postOperator:"string        optionnal",columns["string column","string column"]}] Array/Object)

           Example: 按年龄、用户名称从用户组中查询 

$scope.db.selectAll("user", [{operator:"GROUP BY",columns:['age','username']}]).then(function(results) {  $scope.users = [];  for(var i=0; i < results.rows.length; i++){    $scope.users.push(results.rows.item(i));  }})
  方法五  selectOne(string tableName)

 Example:查询1条数据

$scope.db.selectOne("localDB")
       operator:当然可以使用常用运算符,如=,> =,<=和LIKE。也可以使用IS NULL和NOT NULL作为条件值来 查询!

 

以上对数据库的操作很是方便明了,并且不用自己写查询的语句,是不是很nice!