Issue using SQLite request into a factory in Ionic/AngularJS


#1

Hi. I’m writing an app with AngularJS/Ionic using SQLite database. I’ve first opened my database in the app.js

APP.JS

var db = null;

    angular.module('starter', ['ionic', 'starter.controllers', 'ui.router', 'ngCordova', 'leaflet-directive', 'igTruncate'])

    .run(function ($ionicPlatform, $cordovaSQLite) {
        $ionicPlatform.ready(function () {
            // 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.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
            db = $cordovaSQLite.openDB("salt.db", 1);

            // Création de la table community
            $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS community_t (id_community integer primary key, " +
            "community_name text, address text, description text, is_locked integer, website text)");

            // Création de la table news
            $cordovaSQLite.execute(db, "CREATE TABLE IF NOT EXISTS news_t (news_id integer primary key, " +
            "news_title text, news_content text, url_news text, community_id integer, publication_date text, " +
            "expiration_date text, category text)");

        });
    })

I have then in another file created a factory that insert a value in my table news. Here it is :

NewsService.JS

angular.module('starter')

    .factory('NewsService', [ function ($cordovaSQLite) {

        return {
            "addNews" : function(news_content){

                //var db = $cordovaSQLite.openDB("salt.db");
                alert(db.toString);
                // Logique d'ajout de news dans la base SQLite
                var query = "INSERT INTO salt_com_news_t (news_content) VALUES (?)";

                $cordovaSQLite.execute(db, query, [news_content])
                    .then(function (res) {
                        console.log("INSERT ID -> " + res.insertId);
                    }, function(error) {
                        console.error("Erreur : " + error);
                    });
            }
        }
    }]);

That service is use in a controller named NewsController this way :

NewsController.JS

angular.module('starter')
    .controller('NewsController', ['$scope', 'NewsService', function($scope, NewsService){

        $scope.news_content = "";

        $scope.saveNews = function() {
            NewsService.addNews($scope.news_content);
        }

    }]);

But when I’m trying to execute my app in the Android emulator, I see that the database is opened but whenever I add a news Im having that error :

It feels like that database is not instantiate which I did pretty well I’m sure. One might know what can cause that please because it bothers me a lot. Thanks a lot.


#2

Have you tried to implement in browser fall back (just to see if the issue came from the $cordovaSqlite plugin or from your logic.)

I’ve successfully used $cordovaSqlite for a project. I’ve just rewarped the service in a factory and implement an in browser fall back. Like this i can see the sqlite in the chrome resource tab.

Here is a gist that show the implementation this is exactlly the code is use for my project.

Hope is help.


#3

Thanks for your response Rockerz. Actually when I first execute my app with the database not created it works fine (it creates the database as asked in my app.js and insert what I want). But for the second execution it seems like the variable holding my database is null and I get an error.


#4

Are you trying it in device/ simulator ?


#5

I’m trying with the emulator. Using your gist method it’s working fine now :smile:

Thanks a lot.

But don’t you know why using $http won’t work with the emulator ?


#6

If your using the IOS simuator with custom header, you can facing this issue.
Or you can checking CORS config. Add this line at the top of the app’s config function

$httpProvider.defaults.useXDomain = true;

That allow your application to make call to any other domain.
Did you have the same issue in chrome or safari ?