Unknown provider: $ resourceProvider <- $ resource with AngularJS

Question

I announced the following in app.js

 angular.module('adminApp', ['ngGrid','ngResource']); 

in data.js

 angular.module('adminApp', []) .factory('testAccountService', function ($http) { var TestAccount = { 

in GridCtrl.js

 angular.module('adminApp',[]) .controller('GridCtrl', function ($scope, $http, $resource, testAccountService) { $scope.selectedTestAccount = null; 

I load my scripts as follows:

 <script src="~/Scripts/jquery-1.9.1.min.js"></script> <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/angular-resource.min.js"></script> <script src="~/App/admin/services/Data.js"></script> <script src="~/App/admin/controllers/GridCtrl.js"></script> 

When I run this, this results in an error:

 Error: Unknown provider: $resourceProvider <- $resource at Error (<anonymous>) at http://127.0.0.1:81/Scripts/angular.js:2682:15 at Object.getService [as get] (http://127.0.0.1:81/Scripts/angular.js:2810:39) at http://127.0.0.1:81/Scripts/angular.js:2687:45 

Something is wrong with the way I do it. I am confused about how to configure the service, but I do not see what is wrong:

Answer 1

In your data.js and GridCtrl.js, you need to remove [] from the angular.module('adminApp', []) call.

Also: angular.module('adminApp')

Also, first make sure your app.js is loaded.

Answer 2

$resource not part of the AngularJS core.

You must include: angular-resource.js .

---

From the docs :

To use $resource , make sure you include angular-resource.js , which comes with the Angular package. You can also find this file in the Google CDN, gazebo, as well as in code.angularjs.org .

Answer 3

you will also need to include the angular resource module definition of 'ngResource' in your defintion angular.module module ('adminApp', ['ngResource'])