ionicframework CRUD operation using SQLite

Question

I have added the ngcordova SQLite plugin required to create this sample app.

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 = '';
  }

});

I've running my app on my device, and nothing was added to list which mean im not saving anything to the database. Any help please? Thankyou

cortexlock · Accepted Answer · 2015-01-29 11:02:08Z

I had this problem - after some research I solved it by waiting for Cordova's deviceready event before loading Angular. Check the API docs for how to do a manual Angular initialisation

Basically you need to remove your ng-app directive, and call angular.bootstrap on the element that it was previously on once Cordova's deviceready event has fired

I added a delayedAngular.js file like so (don't forget to add it as a <script> in your index.html)

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']);
  }
});

In the above code replace myCoolApp with the name of your main app module. I'll try to find the blog post where I found this for due credit.

I found it very helpful to have it fall back to a WebSQL database for testing in the browser as well, as SQLite debugging on device is a pain. I used the code below in my app - it uses Angular promises so make sure you are familiar with them (make sure you also inject $window if you want the alerts. I haven't rooted my phone so couldn't directly check the SQLite database on device :-/)

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;
};

Collectives™ on Stack Overflow

ionicframework CRUD operation using SQLite

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related