AngularJS Error :Module 'ngResource' is not available! You either misspelled the module name or forgot to load it

E

3

7

I'm trying to make a service call from angular js. I downloaded the angular seed project.And inside the view1.js wrote the following code to call the service:

'use strict';

angular.module('myApp.view1', ['ngRoute','ngResource'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {
    templateUrl: 'view1/view1.html',
    controller: 'View1Ctrl'
  });
}])
.factory('Entry', ['$resource',function($resource) {
  return $resource('http://localhost:8000/emp/'); // Note the full endpoint address
}])
.controller('View1Ctrl', ['Entry',function(Entry) {
  var entries = Entry.query(function() {
    console.log(entries);
  });
}]);

Here is the index.html where I have included the required scripts:

    <!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="angular-resource.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

But on running the app, it shows the following error in the browser console:

    Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.view1 due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
Error: [$injector:nomod] Module 'ngResource' 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.

Exit answered 12/10, 2014 at 5:40 Comment(6)

try ['Entry',function(Entry) { – Rickrack 12/10, 2014 at 5:41

well that seems to throw another error Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- Entry – Exit 12/10, 2014 at 5:47

add ngResource to angular.module('myApp.view1', ['ngRoute','ngResource']) – Rickrack 12/10, 2014 at 5:48

Can you include the HTML code in the question. – Curricle 12/10, 2014 at 5:51

Try angular.module('myApp', ['ngRoute','ngResource']) – Curricle 12/10, 2014 at 7:13

@ArunGhosh thnks I got it working ...actually it was spelling mistake in app.js :) – Exit 12/10, 2014 at 7:13

M

9

<script src="angular-resource.js"></script>

should be:

<script src="bower_components/angular-resource/angular-resource.js"></script>

Monikamoniker answered 11/2, 2015 at 4:20 Comment(0)

T

1

The only thing that makes sense is that the angular-resource.js file isn't loaded properly, can you have a look at the network tab and see what file is actually loaded and what the name of the module is? to make sure you typed it in correctly.

(Sorry for not commenting, not enough rep yet).

Transcendent answered 12/10, 2014 at 7:54 Comment(0)

T

0

You're missing dependency list.

If you're passing an array as dependeny to be injected, you need to tell angular.

['Entry', function (Entry) { }]; should do the trick, or just do function (Entry) { }.

the reason why Entry is undefined, is because angular does not know what u need to be injected (you're passing an array notation to the angular's DI system)

ps: sry for bad english

Tia answered 12/10, 2014 at 5:49 Comment(1)

@iJay sry for late reply, i see <script src="angular-resource.js"></script> is it the right path? because most of angularjs path in your html seems to be in bower_components directory :) – Tia 12/10, 2014 at 13:21

Recommended topics

Hot tags