AngularJS中共享数据服务的初始化失败

时间：2016-04-18 13:53:30

标签： javascript angularjs angular-ui-router hottowel

我是AngularJS的新手，我想构建一个符合AngularJS style guide by John Papa的应用程序。为了更好地理解这种做法，我正在使用HotTowel skeleton。

在我的应用程序中，我想使用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">

1 个答案:

答案 0 :(得分：1)

在您所在州的解决方案中，您必须调用init方法，而不仅仅是访问它：

resolve: {
    'initData': function(currentUserDataService){
        // here seems to be the error
        return currentUserDataService.init();
    }
}
相关问题
最新问题