Question

我添加了创建此示例应用所需的 ngcordova SQLite插件 。

的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="js/ng-cordova.js"></script>
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">

    <ion-pane>

      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Crud & SQLite</h1>
      </ion-header-bar>

      <ion-content ng-controller="AccountController">

          <form ng-submit="addAccount()">
            <div class="list">
              <label class="item item-input item-stacked-label">
                <span class="input-label">First Name</span>
                <input type="text" placeholder="John" ng-model="firstnameText">
              </label>
              <label class="item item-input item-stacked-label">
                <span class="input-label">Last Name</span>
                <input type="text" placeholder="Suhr" ng-model="lastnameText">
              </label>
              <div class="padding">
                <button class="button button-block button-positive">Create Account</button>
              </div>
            </div>
          </form>

          <ul class="list list-inset">
            <li class="item item-divider">
              {{accounts.length}} records
            </li>
            <li class="item" ng-repeat="account in accounts">
              <i class="icon ion-person"></i>&nbsp; - &nbsp;
              <span>{{account.firstname}} {{account.lastname}}</span>
            </li>
          </ul>

      </ion-content>

    </ion-pane>
  </body>
</html>

app.js

var db = null;

angular.module('starter', ['ionic', 'ngCordova'])

.run(function($ionicPlatform, $cordovaSQLite) {
  $ionicPlatform.ready(function() {

    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    db = $cordovaSQLite.openDB({ name: "my.db" });

    $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXIST people (id integer primary key, firstname text, lastname text)");
  });
})

.controller('AccountController', function($scope, $cordovaSQLite) {

  $scope.accounts = function() {
    var query = "SELECT firstname, lastname FROM people";
    $cordovaSQLite.execute(db, query);
  }

  $scope.addAccount = function(){
    var query = "INSERT INTO people (firstname, lastname) VALUES (?, ?)";
    $cordovaSQLite.execute(db, query, [$scope.firstnameText, $scope.lastnameText]);
    $scope.firstnameText = '';
    $scope.lastnameText = '';
  }

});

我在我的设备上运行了我的应用程序，并没有添加任何内容，这意味着我没有保存任何数据库。有什么帮助吗？三江源

Answer 1

我遇到了这个问题 - 经过一些研究后，我在加载Angular之前等待Cordova的deviceready事件解决了这个问题。查看how to do a manual Angular initialisation

的API文档

基本上，您需要删除ng-app指令，并在Cordova的angular.bootstrap事件触发后对其先前所在的元素调用deviceready

我添加了 delayedAngular.js 文件（请不要忘记将其添加为 index.html 中的<script>）

angular.element(document).ready(function() {
  console.log("BOOTSTRAPPING...");
  if (window.cordova) {
    document.addEventListener('deviceready', function() {
      console.log("window.cordova detected");
      angular.bootstrap(document.body, ['myCoolApp']);
    }, false);
  } else {
    console.log("window.cordova NOT detected");
    angular.bootstrap(document.body, ['myCoolApp']);
  }
});

在上面的代码中，将myCoolApp替换为主应用程序模块的名称。我会试着找到我认为合适的博客文章。

我发现让它回退到WebSQL数据库以便在浏览器中进行测试非常有帮助，因为在设备上进行SQLite调试很麻烦。我在我的应用程序中使用了以下代码 - 它使用Angular承诺，因此请确保您熟悉它们（如果您需要警报，请确保您还注入$window。我没有根植我的手机所以不能直接检查设备上的SQLite数据库： - /）

var initDB = function(dbName){

  $log.log("Opening DB...");
  var q = $q.defer();
  var db;
  if($cordovaSQLite && $window.sqlitePlugin !== undefined){
    $window.alert("SQLite plugin detected");
    db = $cordovaSQLite.openDB({ name: dbName });
    q.resolve(db);
  }
  else {
    db = $window.openDatabase(
      dbName,
      "0.0.1",
      "My DB",
      200000,
      function(){
        $window.alert("Created WebSQL DB!");
      }
    );
    q.resolve(db);
  }
  return q.promise;
};

ionicframework使用SQLite进行CRUD操作

1 个答案: