Question

我正在学习Angular的课程，我有这个错误，不知道为什么，因为模块的名称对我来说似乎很好。这是错误：

angular.js:80 Uncaught Error: [$injector:modulerr] Failed to instantiate module hotelsApp due to:
Error: [$injector:nomod] Module 'hotelsApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

这是我的index.html

 <!DOCTYPE html>
<html lang="en-us" ng-app="hotelsApp">
<head>
    <title>Hotels app</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">

    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
</head>
<body ng-controller="HotelsController">
<div>
  <h1>{{ room.size }}</h1>
  <h3>{{ room.beds }}</h3>
  <h3>{{ room.kitchen }}</h3>
  <h3>{{ room.price }}</h3>
</div>

  <script src="//code.angularjs.org/1.3.0-rc.2/angular.js"></script>
  <script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
  <script src="hotels.js" />
 </body>
</html>

这是我的hotels.js文件：

'use strict';

//MODULE
var app = angular.module('hotelsApp', ['ngRoute', 'ngResource'])

app.controller('HotelsController', ['$scope', function($scope){
  $scope.room = mockRoom;
}]);

var mockRoom = {
  "size": "studio",
  "beds": 1,
  "kitchen": true,
  "price": "25$"
};

Answer 1

请参阅此处的代码：

<html ng-app="hotelsApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.min.js"></script>
</head>
<body ng-controller="HotelsController">
<div>
  <h1>{{ room.size }}</h1>
  <h3>{{ room.beds }}</h3>
  <h3>{{ room.kitchen }}</h3>
  <h3>{{ room.price }}</h3>
</div>
<script>
var app = angular.module('hotelsApp', ['ngRoute'])
app.controller('HotelsController', ['$scope', function($scope){
var mockRoom = {
  "size": "studio",
  "beds": 1,
  "kitchen": true,
  "price": "25$"
};
  $scope.room = mockRoom;
}]);
</script>
</body>
</html>

希望它能解决你的问题！另外，

* I've included your hotel's file in html. You may keep it separtely.     
* Routes need server to run. Kindly, use xampp or wamp server.    
* No need to use ng-Resource in this case.    
* Correct the link of your cdn's. They are messed up!

Answer 2

 <script src="hotels.js" />

位置对吗？ BTW不要忘记包括angular-route.js和angular-resource.js，因为你告诉angular你将使用ng-Route和ng-Resource

AngularJS [$ injector：modulerr]无法实例化模块

2 个答案: