AngularJS [$injector:modulerr] Failed to instantiate module

Question

I am following a course on Angular, and I have this error, can't see why, since the name of the module seems good to me. This is the error:

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.

This is my 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>

And this is my hotels.js file:

'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$"
};

Deadpool Deadpool · Accepted Answer · 2016-04-13T12:40:09

See the code here :

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

Hope it solves your problem! Also,

* 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!

AngularJS [$injector:modulerr] Failed to instantiate module

2 Answers