錯誤：[$ injector：unpr]轉換拒絕

Question

我一直在為我在Angular JS上學習的類編寫代碼項目。 我遇到了錯誤：[$ injector：unpr]（下面是特定錯誤），我查看了堆棧溢出和Angular JS網站，但找不到修復程序。 請幫助並提前感謝您。 代碼和錯誤如下。

PS：我正在使用1.0.3版的angular-ui-router和1.6.5版的angularjs

錯誤

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: '<'
  }
 });

})();

服務

(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>

Answer 1

我認為您需要在menuapp.module.js之前添加包含MenuDataService服務的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>

錯誤：[$ injector：unpr]轉換拒絕

問題描述

1 個解決方案

解決方案1
0 2017-09-13 03:43:59

錯誤：[$ injector：unpr]轉換拒絕

問題描述

1 個解決方案

解決方案1 0 2017-09-13 03:43:59

解決方案1
0 2017-09-13 03:43:59