AngularJS中共享数据服务初始化失败
Initialization of shared data service in AngularJS fails
我是AngularJS的新手，我想构建一个符合John Papa的AngularJS风格指南的应用程序。为了更好地了解这种做法，我使用了HotTowel骨架。
在我的应用程序中，我想要使用一个HTTP API端点，该端点获取有关已验证用户的信息。让我们称之为example.com/api/users/me。这些数据应该被许多控制器使用，所以我在这里需要的是共享数据服务。一个重要的要求是API不应被调用两次。出于这个原因，我实现了一个方法，用API调用初始化服务一次。我使用了HotTowel的core/dataservice.js作为参考，并实现了这样的服务：
//File: currentUserDataService.js
(function() {
'use strict';
angular
.module('app.core')
.factory('currentUserDataService', currentUserDataService);
currentUserDataService.$inject = ['$http', '$q', 'exception', 'logger', 'config'];
/* @ngInject */
function currentUserDataService($http, $q, exception, logger, config) {
var user = {};
var service = {
init: init,
getData: getData
};
return service;
function getData(){
return user;
}
function init() {
return $http.get(config.apiBaseUrl + '/users/me')
.then(success)
.catch(fail);
function success(response) {
console.log(response.data);
user = response.data.data;
}
function fail(e) {
console.log(e);
return exception.catcher('XHR Failed for getPeople')(e);
}
}
}
})();
现在我想在现有的控制器DashboardController和ShellController中使用此服务。我的第一步是配置仪表板路由，以解决我的服务承诺：
//File: dashboard.route.js
(function() {
'use strict';
angular
.module('app.dashboard')
.run(appRun);
appRun.$inject = ['routerHelper','currentUserDataService'];
/* @ngInject */
function appRun(routerHelper,currentUserDataService) {
routerHelper.configureStates(getStates(currentUserDataService));
}
function getStates(currentUserDataService) {
return [
{
state: 'dashboard',
config: {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'DashboardController',
controllerAs: 'vm',
title: 'dashboard',
settings: {
nav: 1,
content: '<i class="fa fa-dashboard"></i> Dashboard'
},
resolve: {
'currentUserDataService': function(currentUserDataService){
return currentUserDataService.init;
}
}
}
}
];
}
})();
据我所知，我现在应该能够使用服务的getData功能从我的控制器检索数据：
//File dashboad.controller.js
(function() {
'use strict';
angular
.module('app.dashboard')
.controller('DashboardController', DashboardController);
DashboardController.$inject = ['$q', 'currentUserDataService', 'logger'];
/* @ngInject */
function DashboardController($q, currentUserDataService, logger) {
var vm = this;
vm.user = {};
vm.title = 'Dashboard';
vm.getFullName = getFullName;
activate();
function activate() {
getCurrentUser();
logger.info('Activated Dashboard View');
}
function getCurrentUser() {
console.log(currentUserDataService);
//Interestingly I only get the init() function logged on the console
vm.user = currentUserDataService.getData(); //It fails here
console.log(vm.user);
return vm.user;
}
function getFullName(){
return vm.user.name + ' ' + vm.user.lastName;
}
}
})();
当我尝试运行应用程序时，我得到以下错误
Error: currentUserDataService.getData is not a function
getCurrentUser@http://localhost:3000/src/client/app/dashboard/dashboard.controller.js:33:14
activate@http://localhost:3000/src/client/app/dashboard/dashboard.controller.js:24:4
DashboardController@http://localhost:3000/src/client/app/dashboard/dashboard.controller.js:21:3
instantiate@http://localhost:3000/bower_components/angular/angular.js:4640:14
$controller@http://localhost:3000/bower_components/angular/angular.js:10042:18
$ViewDirectiveFill/<.compile/<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4081:28
invokeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/bower_components/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/bower_components/angular/angular.js:8213:30
lazyCompilation@http://localhost:3000/bower_components/angular/angular.js:8551:16
updateView@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4021:23
$ViewDirective/directive.compile/</<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3959:11
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:3000/bower_components/angular/angular.js:17348:15
transitionTo/$state.transition<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3352:11
processQueue@http://localhost:3000/bower_components/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:17133:13
done@http://localhost:3000/bower_components/angular/angular.js:11454:36
completeRequest@http://localhost:3000/bower_components/angular/angular.js:11652:7
requestLoaded@http://localhost:3000/bower_components/angular/angular.js:11593:9
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/bower_components/angular/angular.js:11576:7
sendReq@http://localhost:3000/bower_components/angular/angular.js:11423:9
$http/serverRequest@http://localhost:3000/bower_components/angular/angular.js:11133:16
processQueue@http://localhost:3000/bower_components/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:17133:13
bootstrapApply@http://localhost:3000/bower_components/angular/angular.js:1713:9
invoke@http://localhost:3000/bower_components/angular/angular.js:4625:16
bootstrap/doBootstrap@http://localhost:3000/bower_components/angular/angular.js:1711:5
bootstrap@http://localhost:3000/bower_components/angular/angular.js:1731:12
angularInit@http://localhost:3000/bower_components/angular/angular.js:1616:5
@http://localhost:3000/bower_components/angular/angular.js:30709:5
jQuery.Callbacks/fire@http://localhost:3000/bower_components/jquery/dist/jquery.js:3187:11
jQuery.Callbacks/self.fireWith@http://localhost:3000/bower_components/jquery/dist/jquery.js:3317:7
.ready@http://localhost:3000/bower_components/jquery/dist/jquery.js:3536:3
completed@http://localhost:3000/bower_components/jquery/dist/jquery.js:3552:2
EventListener.handleEvent*jQuery.ready.promise@http://localhost:3000/bower_components/jquery/dist/jquery.js:3573:4
@http://localhost:3000/bower_components/jquery/dist/jquery.js:3583:1
@http://localhost:3000/bower_components/jquery/dist/jquery.js:34:3
@http://localhost:3000/bower_components/jquery/dist/jquery.js:15:2
<div ui-view="" class="shuffle-animation ng-scope">
从我的服务返回的对象似乎不包括init以外的其他方法。我的代码出了什么问题？
//编辑：尝试了@DanEEStar的答案，但现在出现了另一个错误：
Error: [ ] currentUserDataService is undefined
getCurrentUser@http://localhost:3000/src/client/app/dashboard/dashboard.controller.js:33:4
activate@http://localhost:3000/src/client/app/dashboard/dashboard.controller.js:24:4
DashboardController@http://localhost:3000/src/client/app/dashboard/dashboard.controller.js:21:3
instantiate@http://localhost:3000/bower_components/angular/angular.js:4640:14
$controller@http://localhost:3000/bower_components/angular/angular.js:10042:18
$ViewDirectiveFill/<.compile/<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4081:28
invokeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9623:9
nodeLinkFn@http://localhost:3000/bower_components/angular/angular.js:9022:11
compositeLinkFn@http://localhost:3000/bower_components/angular/angular.js:8333:13
publicLinkFn@http://localhost:3000/bower_components/angular/angular.js:8213:30
lazyCompilation@http://localhost:3000/bower_components/angular/angular.js:8551:16
updateView@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4021:23
$ViewDirective/directive.compile/</<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3959:11
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://localhost:3000/bower_components/angular/angular.js:17348:15
transitionTo/$state.transition<@http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:3352:11
processQueue@http://localhost:3000/bower_components/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:17133:13
done@http://localhost:3000/bower_components/angular/angular.js:11454:36
completeRequest@http://localhost:3000/bower_components/angular/angular.js:11652:7
requestLoaded@http://localhost:3000/bower_components/angular/angular.js:11593:9
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/bower_components/angular/angular.js:11576:7
sendReq@http://localhost:3000/bower_components/angular/angular.js:11423:9
$http/serverRequest@http://localhost:3000/bower_components/angular/angular.js:11133:16
processQueue@http://localhost:3000/bower_components/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:17133:13
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/bower_components/angular/angular.js:11576:7
sendReq@http://localhost:3000/bower_components/angular/angular.js:11423:9
$http/serverRequest@http://localhost:3000/bower_components/angular/angular.js:11133:16
processQueue@http://localhost:3000/bower_components/angular/angular.js:15757:28
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://localhost:3000/bower_components/angular/angular.js:17025:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost:3000/bower_components/angular/angular.js:16841:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost:3000/bower_components/angular/angular.js:17133:13
bootstrapApply@http://localhost:3000/bower_components/angular/angular.js:1713:9
invoke@http://localhost:3000/bower_components/angular/angular.js:4625:16
bootstrap/doBootstrap@http://localhost:3000/bower_components/angular/angular.js:1711:5
bootstrap@http://localhost:3000/bower_components/angular/angular.js:1731:12
angularInit@http://localhost:3000/bower_components/angular/angular.js:1616:5
@http://localhost:3000/bower_components/angular/angular.js:30709:5
jQuery.Callbacks/fire@http://localhost:3000/bower_components/jquery/dist/jquery.js:3187:11
jQuery.Callbacks/self.fireWith@http://localhost:3000/bower_components/jquery/dist/jquery.js:3317:7
.ready@http://localhost:3000/bower_components/jquery/dist/jquery.js:3536:3
completed@http://localhost:3000/bower_components/jquery/dist/jquery.js:3552:2
EventListener.handleEvent*jQuery.ready.promise@http://localhost:3000/bower_components/jquery/dist/jquery.js:3573:4
@http://localhost:3000/bower_components/jquery/dist/jquery.js:3583:1
@http://localhost:3000/bower_components/jquery/dist/jquery.js:34:3
@http://localhost:3000/bower_components/jquery/dist/jquery.js:15:2
<div data-ng-animate="1" ui-view="" class="shuffle-animation ng-scope">
在状态的解析部分，您必须调用init方法，而不仅仅是访问它：
resolve: {
'initData': function(currentUserDataService){
// here seems to be the error
return currentUserDataService.init();
}
}
相关文章：
- 使用javascript函数在页面初始化后加载jquery
- 未捕获错误:无法在初始化之前调用方法;
- 如何在剑道网格初始化后设置pageSizes
- React redux初始化功能，无论状态变化如何
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular
- 尝试初始化(）Spine's控制器和故障
- Angular.js延迟控制器初始化
- 对插件初始化后动态加载的元素进行样式设置
- Angular JS控制器初始化错误
- AngularJS中共享数据服务初始化失败
- blueimp Gallery JS初始化失败
- 日期时间选取器初始化失败
- 为什么当我使用变量而不是整数或字符串时初始化日期对象失败
- 在IE8中初始化另一个对象内部的对象失败
- AngularJS-$rootScope变量初始化失败
- 调用“”的函数;新谷歌地图圈;from初始化失败
- 在sails.js下使用SSL时，Passport.js初始化失败
- 变量初始化器失败的类型
- jQuery插件datetimepicker仅在ajax加载时初始化失败
- 组件初始化失败，导致NoProvider异常
