Javascript AngularJS处理promises和indexeddb-在内容出现在页面上后将其加载到控制器
我一直在尝试让我的angular js页面与indexeddb一起工作,我正在尝试正确地完成它。到目前为止进展顺利,但我一直在努力实现我的承诺,在数据加载方面如我所期望的那样工作。我听从了这个建议,我想我理解它的意图,但我无法让它发挥作用。我认为问题在于它使用的是routeProvider,它需要ajax请求,而我并没有这样做,它完全是客户端的。我使用的是可以找到的angular indexedDB插件。这些是我正在做的相关部分Javascript AngularJS处理promises和indexeddb-在内容出现在页面上后将其加载到控制器,javascript,angularjs,promise,indexeddb,Javascript,Angularjs,Promise,Indexeddb,我一直在尝试让我的angular js页面与indexeddb一起工作,我正在尝试正确地完成它。到目前为止进展顺利,但我一直在努力实现我的承诺,在数据加载方面如我所期望的那样工作。我听从了这个建议,我想我理解它的意图,但我无法让它发挥作用。我认为问题在于它使用的是routeProvider,它需要ajax请求,而我并没有这样做,它完全是客户端的。我使用的是可以找到的angular indexedDB插件。这些是我正在做的相关部分 angular.module('characterApp',['n
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.
但是,如果我理解,输出应该是:
Configuring route
characterApp.js:52 Promise created
characterApp.js:50 DB Objects loaded.
characterController.js:2 Promise is now resolved:
如果有帮助,我的完整代码是打开的,但是您需要node.js来运行/www文件夹中的自定义server.js文件,以便正确加载所有内容。但是,如果您将内容从www/pages目录移动到index.html上的占位符中,就可以在其他地方以最小的工作量使其工作。或者事实上,你可以一起删除非标准标签,我认为它仍然可以工作。我怀疑所有这些都是不必要的,我只是不明白这些东西是如何工作的。我是个新手,但我正在努力学习如何用正确的方式做事
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.");
});
);
}]);
我根本不需要routeprovider,我只是在用我的承诺做傻事