Question

我一直在努力让我的angular js页面与indexeddb一起使用，我正在努力做到这一点。到目前为止，它进展顺利，但我真的一直在努力让我的承诺像我期望的那样在数据加载方面发挥作用。我遵循了这个other question的建议，我想我明白它正在尝试做什么，但我无法让它发挥作用。我认为问题在于它正在使用routeProvider，它需要ajax请求而我没有这样做，它是所有客户端。我使用的是angular-indexedDB pluging on GitHub here。这些是我正在做的相关内容。

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

当我运行它时，我的控制台会输出以下内容：

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

但是，如果我理解other answer mentioned above，则输出应为：

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

如果有帮助，我的完整代码就在GitHub here，但您需要node.js来运行我在/ www文件夹中的自定义server.js文件，以便正确加载所有内容。如果您将内容从www / pages目录移动到index.html上的占位符，您可以在其他地方以最小的努力工作。或者事实上，你可以完全删除非标准标签，我认为它仍然有效。我怀疑所有这些都是不必要的，我只是不明白这些事情是如何运作的。我对角度很新，但试图学习如何以正确的方式做事。

Answer 1

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

我根本不需要路线提供者，我只是按照我的承诺做了愚蠢的事情。

AngularJS在页面上使用promises和indexeddb-将内容加载到控制器

1 个答案: