我一直在为一个我正在攻读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
答案 0 :(得分:0)
我认为您需要在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>