ionicframework Работа с CRUD с использованием SQLite

Я добавил ngcordova SQLite плагин, необходимый для создания этого примера приложения.ionicframework Работа с CRUD с использованием 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 = ''; 
    } 

});

Я работает мое приложение на устройстве, и ничего не было добавлено в список, который означает, im не сохраняя ничего в базе данных. Любая помощь, пожалуйста? Thankyou

источник

2015-01-29 junior

У меня была эта проблема - после некоторого исследования я решил это, дождавшись события Cordova deviceready перед загрузкой углового. Проверьте API документацию для how to do a manual Angular initialisation

В основном вам нужно удалить ng-app директивы, и вызвать angular.bootstrap на элементе, который он ранее был на раз deviceready события Кордовы уволило

Я добавил delayedAngular.js файла как так (не забудьте добавить его в качестве <script> в вашем 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']); 
    } 
});

в приведенном выше коде замените myCoolApp с именем вашего основного модуля приложения. Я постараюсь найти сообщение в блоге, где я нашел это для должного кредита.

Мне очень помогло вернуть его обратно в базу данных WebSQL для тестирования в браузере, так как отладка SQLite на устройстве - это боль. Я использовал код ниже в своем приложении - он использует Угловые обещания, поэтому убедитесь, что вы знакомы с ними (убедитесь, что вы также вводите $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; 
};

источник

2015-01-29 10:48:53 drjimmie1976

ionicframework Работа с CRUD с использованием SQLite

ответ

Смежные вопросы