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

【问题标题】：AngularJS working with promises and indexeddb- loading content to controller after it is on the pageAngularJS 使用 promises 和 indexeddb- 在页面上加载内容到控制器
【发布时间】：2014-12-15 03:24:30
【问题描述】：

我一直在尝试让我的 Angular js 页面与 indexeddb 一起使用，并且我正在努力做到这一点。到目前为止，一切进展顺利，但在数据加载方面，我真的一直在努力让我的承诺像我预期的那样发挥作用。我听从了other question 的建议，我想我明白它想要做什么，但我无法让它发挥作用。我认为问题在于它使用了需要 ajax 请求的 routeProvider 而我没有这样做，这都是客户端。我正在使用可以在on GitHub here 找到的 angular-indexedDB 插件。这些是我正在做的相关部分。

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 上的占位符中，您可以在其他地方以最小的努力让它工作。或者事实上，您可以一起删除非标准标签，我认为它仍然可以工作。我怀疑所有这些都是不必要的，我只是不明白这些东西是如何工作的。我对 Angular 还很陌生，但我正在努力学习如何以正确的方式做事。

【问题讨论】：

标签： javascript angularjs promise indexeddb

【解决方案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.");
    });
    );
}]);

我根本不需要路由提供者，我只是在用我的承诺做一些愚蠢的事情。

【讨论】：