Default route + sqlite database = do not want to work together


#1

Hi there,

I’m using the default tabs app.

The routing part looks the next way:

    $stateProvider
        .state('tab', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
        })
        .state('tab.places', {
          url: '/places',
          views: {
            'tab-places': {
              templateUrl: 'templates/tab-places.html',
              controller: 'PlacesCtrl'
            }
          }
        });

$urlRouterProvider.otherwise('/tab/places');

I’ve updated my controller to use the database in a synchronous way, and trying to get the list of the places from it.

But, during the first application load, it looks like the controller is not executed at all. And I see the blank screen.

The controller content is the next:

.controller('PlacesCtrl', function($scope, Places) {
	
	console.log("And I'm here");
	
	Places.all().then(function(places) {
                console.log("Controller");
                console.log(places);
                $scope.places = places;
            });
	
})

If I would click the other tab and then back to the desired controllers tab - the content would be loaded then.

If I would use the Safari Web inspector to reload the page after the first load - the content would be there as well. So I can confirm that the controller works well.

I found the direct correlation of the behaviour with this string in the Places service (the database opening procedure):

var db = $cordovaSQLite.openDBBackground("database.db");
    console.log("db opened");

    return {
        all: function() {
            
            // ultra q
            var uq = $q.defer();

            (function() {
                var q = $q.defer();
                $cordovaSQLite.execute(db, 'SELECT * FROM places', []).then(function(res) {
                    var places = [];
                    for (var i = 0; i < res.rows.length; i++) {
                        places.push(res.rows.item(i));
                    }
                    q.resolve(places);
                }, function(err) {
                    console.error(err);
                    q.reject();
                });

                return q.promise;
            })().then(function(places) {
                console.log("Inside the service");
                console.log(places);
                uq.resolve(places);
            });

            return uq.promise;
        },
        get: function(placeId) {
            return places[placeId];
        }
    }

As soon as I initialize the database, I see the blank screen.

If I would comment it out and provide the prepared array in the controller - I would see the screen with the content then. If the db initialisation would stay there - I would see the blank one.

Could anyone explain me how should I overcome that?

Regards,