Question

我一直在为一个我正在攻读Angular JS的课程编写一个编码项目。我遇到了错误：[$ injector：unpr]（下面的具体错误）我查看了堆栈溢出和Angular JS网站，但找不到修复程序。请提前帮助并表示感谢。代码和错误如下。

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

错误

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

索引

$fillable

Answer 1

我认为您需要在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 个答案: