CODEWITHSUNDEEP
angularjsdependency-injectionmodule
Ludwig
Ludwig

Reputation: 1781

AngularJS [$injector:modulerr] Failed to instantiate module

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

Upvotes: 1

Views: 2196

Answers (2)

Deadpool
Deadpool

Reputation: 8240

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!

Upvotes: 1

Arturo Monta&#241;o
Arturo Monta&#241;o

Reputation: 121

 <script src="hotels.js" />

is the location right? BTW dont forget to include the angular-route.js and angular-resource.js, since you are telling angular that you will be using ng-Route and ng-Resource

Upvotes: 0

Related Questions