2016-04-18 7 views
0

私はAngularJSの新機能で、AngularJS style guide by John Papaに準拠するアプリケーションを作成したいと考えています。この習慣についてよく理解するために、私はHotTowel skeletonを使用しています。AngularJSでの共有データサービスの初期化が失敗する

私のアプリケーションでは、認証されたユーザーに関する情報を取得するHTTP APIエンドポイントを消費したいと考えています。それをexample.com/api/users/meと呼ぶことができます。このデータは多くのコントローラで使用する必要がありますので、ここで必要なのは共有データサービスです。重要な要件は、APIを2回呼び出さないことです。このため、私は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); 
      } 
     } 
    } 
})(); 

今、私は、既存のコントローラDashboardControllerShellControllerでこのサービスを利用したいと思います。私の最初のステップは、私のサービスの約束を解決するために、ダッシュボードのルートを設定することです:

//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 
[email protected]://localhost:3000/src/client/app/dashboard/dashboard.controller.js:33:14 
[email protected]://localhost:3000/src/client/app/dashboard/dashboard.controller.js:24:4 
[email protected]://localhost:3000/src/client/app/dashboard/dashboard.controller.js:21:3 
[email protected]://localhost:3000/bower_components/angular/angular.js:4640:14 
[email protected]://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 
[email protected]://localhost:3000/bower_components/angular/angular.js:9623:9 
[email protected]://localhost:3000/bower_components/angular/angular.js:9022:11 
[email protected]://localhost:3000/bower_components/angular/angular.js:8333:13 
[email protected]://localhost:3000/bower_components/angular/angular.js:8213:30 
[email protected]://localhost:3000/bower_components/angular/angular.js:8551:16 
[email protected]://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</[email protected]://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 
[email protected]://localhost:3000/bower_components/angular/angular.js:15757:28 
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17025:16 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:16841:15 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17133:13 
[email protected]://localhost:3000/bower_components/angular/angular.js:11454:36 
[email protected]://localhost:3000/bower_components/angular/angular.js:11652:7 
[email protected]://localhost:3000/bower_components/angular/angular.js:11593:9 
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/bower_components/angular/angular.js:11576:7 
[email protected]://localhost:3000/bower_components/angular/angular.js:11423:9 
$http/[email protected]://localhost:3000/bower_components/angular/angular.js:11133:16 
[email protected]://localhost:3000/bower_components/angular/angular.js:15757:28 
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17025:16 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:16841:15 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17133:13 
[email protected]://localhost:3000/bower_components/angular/angular.js:1713:9 
[email protected]://localhost:3000/bower_components/angular/angular.js:4625:16 
bootstrap/[email protected]://localhost:3000/bower_components/angular/angular.js:1711:5 
[email protected]://localhost:3000/bower_components/angular/angular.js:1731:12 
[email protected]://localhost:3000/bower_components/angular/angular.js:1616:5 
@http://localhost:3000/bower_components/angular/angular.js:30709:5 
jQuery.Callbacks/[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3187:11 
jQuery.Callbacks/[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3317:7 
[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3536:3 
[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3552:2 
EventListener.handleEvent*[email protected]://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以外のメソッド私のコードで何が間違っていますか?

// EDIT:@DanEEStarからの回答しようとしましたが、現在は別のエラーがあります:あなたはinitメソッドを呼び出す必要がありますし、それをアクセスできませんあなたの状態の解決一部で

Error: [ ] currentUserDataService is undefined 
[email protected]://localhost:3000/src/client/app/dashboard/dashboard.controller.js:33:4 
[email protected]://localhost:3000/src/client/app/dashboard/dashboard.controller.js:24:4 
[email protected]://localhost:3000/src/client/app/dashboard/dashboard.controller.js:21:3 
[email protected]://localhost:3000/bower_components/angular/angular.js:4640:14 
[email protected]://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 
[email protected]://localhost:3000/bower_components/angular/angular.js:9623:9 
[email protected]://localhost:3000/bower_components/angular/angular.js:9022:11 
[email protected]://localhost:3000/bower_components/angular/angular.js:8333:13 
[email protected]://localhost:3000/bower_components/angular/angular.js:8213:30 
[email protected]://localhost:3000/bower_components/angular/angular.js:8551:16 
[email protected]://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</[email protected]://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 
[email protected]://localhost:3000/bower_components/angular/angular.js:15757:28 
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17025:16 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:16841:15 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17133:13 
[email protected]://localhost:3000/bower_components/angular/angular.js:11454:36 
[email protected]://localhost:3000/bower_components/angular/angular.js:11652:7 
[email protected]://localhost:3000/bower_components/angular/angular.js:11593:9 
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/bower_components/angular/angular.js:11576:7 
[email protected]://localhost:3000/bower_components/angular/angular.js:11423:9 
$http/[email protected]://localhost:3000/bower_components/angular/angular.js:11133:16 
[email protected]://localhost:3000/bower_components/angular/angular.js:15757:28 
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17025:16 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:16841:15 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17133:13 
EventHandlerNonNull*createHttpBackend/<@http://localhost:3000/bower_components/angular/angular.js:11576:7 
[email protected]://localhost:3000/bower_components/angular/angular.js:11423:9 
$http/[email protected]://localhost:3000/bower_components/angular/angular.js:11133:16 
[email protected]://localhost:3000/bower_components/angular/angular.js:15757:28 
scheduleProcessQueue/<@http://localhost:3000/bower_components/angular/angular.js:15773:27 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17025:16 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:16841:15 
$RootScopeProvider/this.$get</[email protected]://localhost:3000/bower_components/angular/angular.js:17133:13 
[email protected]://localhost:3000/bower_components/angular/angular.js:1713:9 
[email protected]://localhost:3000/bower_components/angular/angular.js:4625:16 
bootstrap/[email protected]://localhost:3000/bower_components/angular/angular.js:1711:5 
[email protected]://localhost:3000/bower_components/angular/angular.js:1731:12 
[email protected]://localhost:3000/bower_components/angular/angular.js:1616:5 
@http://localhost:3000/bower_components/angular/angular.js:30709:5 
jQuery.Callbacks/[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3187:11 
jQuery.Callbacks/[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3317:7 
[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3536:3 
[email protected]://localhost:3000/bower_components/jquery/dist/jquery.js:3552:2 
EventListener.handleEvent*[email protected]://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

resolve: { 
    'initData': function(currentUserDataService){ 
     // here seems to be the error 
     return currentUserDataService.init(); 
    } 
} 
+0

迅速な対応をありがとう!これは本当に愚かな間違いだった...しかし、今私は別のエラーが発生します。私は私の答えを編集しました。 – Noir

+0

OK、2番目の問題は、あなたのサービスを再宣言したと思います。 'resolve'部分では、名前は何か異なるものでなければなりません。 – DanEEStar

+0

恐ろしい!それでおしまい。どうもありがとうございました。 :) – Noir

関連する問題