私は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);
}
}
}
})();
今、私は、既存のコントローラ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
[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">
迅速な対応をありがとう!これは本当に愚かな間違いだった...しかし、今私は別のエラーが発生します。私は私の答えを編集しました。 – Noir
OK、2番目の問題は、あなたのサービスを再宣言したと思います。 'resolve'部分では、名前は何か異なるものでなければなりません。 – DanEEStar
恐ろしい!それでおしまい。どうもありがとうございました。 :) – Noir