AngularJS working with promises and indexeddb- loading content to controller after it is on the page

Question

I've been trying to get my angular js page to work with indexeddb, and I'm trying to do it right. So far it's going smoothly but I've really been struggling getting my promises to work as I expect in regards to my data loading. I followed the advice of this other question and I think I understand what it's trying to do, but I can't get it to work. I think the issue is that it is using the routeProvider which expects ajax requests and I'm not doing that, it's all client side. I am using the angular-indexedDB pluging that can be found on GitHub here. These are the relevant bits of what I'm doing.

angular.module('characterApp',['ngRoute','xc.indexedDB'])
.constant('dbName', 'character')
.constant('storeName', 'character')
.constant('version', 1)
.constant('emptyCharacter', {})
.value('jsPlumbInstance', {})
.config(function($indexedDBProvider, dbName, storeName, version) {
    $indexedDBProvider.connection(dbName)
    .upgradeDatabase(version, function(event, db, tx){
        db.createObjectStore(storeName, {keyPath: 'guid'});
    });
})
.config(function($routeProvider){
    console.log('Configuring route');
    $routeProvider
    .when('/js/angular/controllers/characterController.js', {
        controller:'characterController',
        resolve:{
            'characterData':function(DataService){
                console.log('resolving promise');
                return DataService.promise;
            }
        }
    })
})
.service('DataService', ['$indexedDB', 'storeName', 'emptyCharacter', function($indexedDB, storeName, newObject){

    var objects = [];
    var index = 0;

    var objectStore = $indexedDB.objectStore(storeName);
    var promise = objectStore.getAll().then(function(results) {
        objects = results;
        console.log("DB Objects loaded.");
    });
    console.log("Promise created");

    function getControllerObject(propertyName){
        return objects;
    }

    return {
        getControllerObject : getControllerObject,
        promise : promise
    };
}])
.controller('characterController', ['$scope', 'DataService', function($scope, DataService) {
    console.log('Promise is now resolved: ' + DataService.getControllerObject()
    );
}]);

When I run it my console outputs the following:

Configuring route
characterApp.js:52 Promise created
characterController.js:2 Promise is now resolved: 
characterApp.js:50 DB Objects loaded.

However if I understand the other answer mentioned above, the output should be:

Configuring route
characterApp.js:52 Promise created
characterApp.js:50 DB Objects loaded.
characterController.js:2 Promise is now resolved:

If it helps, my full code is on GitHub here, but you will need node.js to run the custom server.js file I have in the /www folder for all the content to load properly. You could get it to work with minimal effort elsewhere if you moved the content from the www/pages directory into their placeholders on the index.html though. Or infact, you could remove the nonstandard tags alltogether, I think it would still work. I suspect all of that is unnecessary and I just don't understand how these things work. I'm fairly new to angular but trying to learn how to do things the right way.

score 0 · Accepted Answer · answered Dec 16 '14 at 04:10

angular.module('characterApp',['ngRoute','xc.indexedDB'])
.constant('dbName', 'character')
.constant('storeName', 'character')
.constant('version', 1)
.constant('emptyCharacter', {})
.config(function($indexedDBProvider, dbName, storeName, version) {
    $indexedDBProvider.connection(dbName)
    .upgradeDatabase(version, function(event, db, tx){
        db.createObjectStore(storeName, {keyPath: 'guid'});
    });
})
.service('DataService', ['$indexedDB', 'storeName', 'emptyCharacter', function($indexedDB, storeName, newObject){

    var objects = [];
    var index = 0;

    var objectStore = $indexedDB.objectStore(storeName);
    var promise = objectStore.getAll()
    console.log("Promise created");

    function getControllerObject(propertyName){
        return objects;
    }

    return {
        getControllerObject : getControllerObject,
        promise : promise
    };
}])
.controller('characterController', ['$scope', 'DataService', function($scope, DataService) {
    var characters = [];
    DataService.promise.then(function(results){
        characters = results;
        $scope.character = characters[0];
        console.log("DB Objects loaded.");
    });
    );
}]);

I didn't need the routeprovider at all, I just was doing stupid things with my promises.

AngularJS working with promises and indexeddb- loading content to controller after it is on the page

1 Answers1