Geek Answers Handbook

AngularJS error: 'ngResource' module is not available! You either mistakenly wrote the name of the module, or forgot to load it

I am trying to make a service call from angular js. I downloaded the angular project. And inside 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 index.html , where I included the necessary 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/xxx/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 when the application starts, the following error is displayed in the browser:

  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.
+7
javascript angularjs ngresource
source share
3 answers
 <script src="angular-resource.js"></script>

it should be:

 <script src="bower_components/angular-resource/angular-resource.js"></script>
+8
source share

The only thing that makes sense is that the angular -resource.js file is not loaded correctly, can you look at the network tab and see which file is really loaded and what module name? to make sure you entered it correctly.

(Sorry for not commenting, as long as the reputation is not enough).

+1
source share

Missing dependency list.

If you pass the array as dependent for input, you need to tell angular.

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

the reason that Entry is undefined is because angular does not know what you need to enter (you pass the array notation to the angular DI system)

ps: sry for bad english

0
source share

More articles:


All Articles