Question

我一直在为一个类的项目工作，即使在声明了module.js文件之后我也收到了[$ injector：nomod]错误。我仍然是棱角分明的新人，我仍然去检查所有与我有同样问题的其他问题，但他们没有回答/为我的问题工作。这是我的代码，请帮忙。

错误：

Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.5/$injector/nomod?p0=MenuAppX
at angular.min.js:7
at angular.min.js:26
at b (angular.min.js:25)
at Object.module (angular.min.js:26)
at categories.component.js:4
at categories.component.js:12

Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.5/$injector/nomod?p0=MenuAppX
at angular.min.js:7
at angular.min.js:26
at b (angular.min.js:25)
at Object.module (angular.min.js:26)
at items.component.js:4
at items.component.js:12

Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.6.5/$injector/nomod?p0=MenuAppX
at angular.min.js:7
at angular.min.js:26
at b (angular.min.js:25)
at Object.module (angular.min.js:26)
at routes.js:4
at routes.js:25


Uncaught Error: [$injector:modulerr] 
http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=MenuAppX&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Fnomod%3Fp0%3DMenuAppX%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A26%3A408%0A%20%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A25%3A439)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A26%3A182%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A290%0A%20%20%20%20at%20p%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20gb%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A46%3A251)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular.min.js%3A22%3A332)
at angular.min.js:7
at angular.min.js:43
at p (angular.min.js:8)
at g (angular.min.js:42)
at gb (angular.min.js:46)
at c (angular.min.js:22)
at Uc (angular.min.js:22)
at xe (angular.min.js:21)
at angular.min.js:333
at HTMLDocument.b (angular.min.js:38)

索引

 <!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/menuapp.module.js"></script>
<script src="src/MenuApp/data.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>
<!-- Routes -->
<script src="src/routes.js"></script>

menuapp模块

(function () {
 'use strict';

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

});

数据模块

(function () {
'use strict';

angular.module('data', ['MenuDataService'])

});

menuapp服务

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

  MenuDataService.$inject = ['$http'];
  MenuDataService = function($http) {
    var service = this;
    // var categoryPromise = service.getAllCategory();
    // var itemPromise = service.getItemsForCategory();
    // get later

    service.getAllCategory = function() {
      var deferred = $q.defer();
      var categoriesResult =  $http({
        method: "GET",
        url: ('https://davids-restaurant.herokuapp.com/categories.json'),
      });
      deferred.resolve(categoriesResult);
    }
    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
    }
  });
  deferred.resolve(itemsResult);
}
  };

});

类别组件

(function () {
'use strict';

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

})();

项目组件

(function () {
'use strict';

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

})();

路由

(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'
   })
   .state('items', {
     url: '/menuItems',
     templateUrl: 'src/MenuApp/template/items.template.html'
   })
 }
})();

Answer 1

您需要首先加载 data 模块才能加载 MenuAppX 模块，因为它是一个依赖项，将您的引用顺序更改为< / p>

<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>
<!-- Routes -->
<script src="src/routes.js"></script>

组件

1 个答案: