エラー：[$ injector：unpr]移行拒否

私はAngular JSを使用しているクラスのコーディングプロジェクトに取り組んでいます。私はエラー：[$ injector：unpr]（以下の特定のエラー）に遭遇しました。スタックオーバフローとAngular JSウェブサイトを見ましたが、修正が見つかりませんでした。事前にお手伝いしていただきありがとうございます。コードとエラーは以下の通りです。

PS：私は、角-UI-ルータのバージョン1.0.3を使用して、バージョン1.6.5

エラー

Transition Rejection($id: 0 type: 6, message: The transition errored, 
detail: Error: [$injector:unpr] 
http://errors.angularjs.org/1.6.5/$injector/unpr? 
p0=MenuDataServiceProvider%20%3C-%20MenuDataService) 
_defaultErrorHandler @ angular-ui-router.min.js:13 
(anonymous) @ angular-ui-router.min.js:13 
(anonymous) @ angular.min.js:136 
$digest @ angular.min.js:147 
$apply @ angular.min.js:150 
(anonymous) @ angular.min.js:163 
e @ angular.min.js:48 
(anonymous) @ angular.min.js:51 
setTimeout (async) 
h.defer @ angular.min.js:51 
f @ angular.min.js:163 
(anonymous) @ angular-ui-router.min.js:11 
kg @ angular.min.js:39 
d @ angular.min.js:39 


angular-ui-router.min.js:13 Error: [$injector:unpr] 
http://errors.angularjs.org/1.6.5/$injector/unpr?p0=MenuDataServiceProvider%20%3C-%20MenuDataService 
at angular.min.js:7 
at angular.min.js:46 
at Object.d [as get] (angular.min.js:43) 
at angular.min.js:46 
at Object.d [as get] (angular.min.js:43) 
at t.getNative (angular-ui-router.min.js:12) 
at o (angular-ui-router.min.js:12) 
at Array.map (<anonymous>) 
at t.getDependencies (angular-ui-router.min.js:12) 
at i (angular-ui-router.min.js:12)

コントローラ

(function() { 
'use strict'; 

angular.module('MenuAppX') 
.controller('categoriesXController', categoriesXController); 


categoriesXController.$inject = ['categoriesResult']; 
function categoriesXController(categoriesResult) { 
    var categoriesX = this; 
categoriesX.cat = categoriesResult; 
}; 
})();

コンポーネント

(function() { 
'use strict'; 

angular.module('MenuAppX') 
.component('categoriesX', { 
    templateUrl: 'src/MenuApp/template/categories.template.html', 
    bindings: { 
    categoriesResult: '<' 
    } 
}); 

})();

をangularjsよ

サービス電子

(function() { 
    'use strict' 
    angular.module('data') 
    .service('MenuDataService', MenuDataService); 

    MenuDataService.$inject = ['$http', '$q', '$timeout']; 
    MenuDataService = function($http, $q, $timeout) { 
    var service = this; 

    service.getAllCategory = function() { 
     var deferred = $q.defer(); 
     var categoriesResult = $http({ 
     method: "GET", 
     url: ('https://davids-restaurant.herokuapp.com/categories.json'), 
     }); 
     $timeout(function() { 
    deferred.resolve(categoriesResult); 
    }, 800); 
    return deferred.promise; 
    } 
    // service.getItemsForCategory = function(categoryShortName) { 
// var deferred = $q.defer(); 
// var itemsResult = $http({ 
//  method: "GET", 
//  url: (' https://davids-restaurant.herokuapp.com/menu_items.json?category='), 
//  params: { 
//  category: categoryShortName 
//  } 
// }); 
// console.log(itemsResult); 
// deferred.resolve(itemsResult); 
// } 
    }; 

});

メニューアプリモジュール

(function() { 
'use strict'; 

angular.module('MenuAppX', ['ui.router', 'data']); 

})();

データモジュール

(function() { 
'use strict'; 

angular.module('data', []) 

})();

ルート

(function() { 
'use strict'; 

angular.module('MenuAppX') 
.config(RoutesConfig); 

RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider']; 
function RoutesConfig($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider 
    .state('home', { 
    url: '/', 
    templateUrl: 'src/MenuApp/template/home.template.html' 
    }) 
    .state('category', { 
    url: '/menuCategory', 
    templateUrl: 'src/MenuApp/template/categories.template.html', 
    controller: 'categoriesXController as categoriesX', 
    resolve: { 
     categories: ['MenuDataService', function (MenuDataService) { 
     return MenuDataService.getAllCategory(); 
     }] 
    } 
    }) 

    .state('items', { 
    url: '/menuItems', 
    templateUrl: 'src/MenuApp/template/items.template.html' 
    }) 
} 
})();

インデックス

<!DOCTYPE html> 
<html ng-app="MenuAppX"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Menu App</title> 
    </head> 
    <body> 
    <h1>Welcome to the Chinese Menu Website</h1> 

<ui-view></ui-view> 

<!-- Libraries --> 
<script src="lib/angular.min.js"></script> 
<script src="lib/angular-ui-router.min.js"></script> 
<!-- Modules --> 
<script src="src/MenuApp/data.module.js"></script> 
<script src="src/MenuApp/menuapp.module.js"></script> 
<!-- 'menuapp' modules artifacts --> 
<script src="src/MenuApp/menudata.service.js"></script> 
<script src="src/MenuApp/categories.component.js"></script> 
<script src="src/MenuApp/items.component.js"></script> 
<script src="src/MenuApp/categories.controller.js"></script> 
<script src="src/MenuApp/item.controller.js"></script> 
<!-- Routes --> 
<script src="src/routes.js"></script>

出典

2017-09-13 Luca Ciancanelli

私はあなたがmenuapp.module.js

<script src="lib/angular.min.js"></script> 
<script src="lib/angular-ui-router.min.js"></script> 
<!-- Modules --> 
<script src="src/MenuApp/data.module.js"></script> 
<script src="src/MenuApp/data.service.js"></script> // MenuDataService serivce script 
<script src="src/MenuApp/menuapp.module.js"></script> 
<!-- 'menuapp' modules artifacts --> 
<script src="src/MenuApp/menudata.service.js"></script> 
<script src="src/MenuApp/categories.component.js"></script> 
<script src="src/MenuApp/items.component.js"></script> 
<script src="src/MenuApp/categories.controller.js"></script> 
<script src="src/MenuApp/item.controller.js"></script> 
<!-- Routes --> 
<script src="src/routes.js"></script>

出典

2017-09-13 03:43:59

前MenuDataServiceサービスが含まれているスクリプトを追加する必要があると思う私はそれを試してみましたが、それでも同じエラーを得た、任意の他のアイデア？ –

エラー：[$ injector：unpr]移行拒否

答えて

関連する問題