CODEWITHSUNDEEP
angularjsrestresources
Developus
Developus

Reputation: 1462

Unknown resource provider in AngularJS

I'm creating an angular app using scaffold from Yeomen. I want o to send and get data from my REST service, but I have a problem with resource provider.

I have a simple controller:

angular.module('fronterApp')
  .controller('ClubCtrl', function ($scope, ClubService) {
    $scope.find = function(){
     $scope.club = ClubService.find();
    };
  });

Service: 

var app = angular.module('fronterApp');
app.service('ClubService',  function (ClubResource) {

    var find = function(){
      return ClubResource.find({id: 1});
    };

    return{
      find: find
    };
  });

My resource provider:

var app = angular.module('fronterApp', ['ngResource', 'ngRoute']);
var server = 'http://localhost:8080';
app.run(function($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});
app.factory('ClubResource',  function($resource) {
  return $resource(server + '/api/clubs/:id', {id: '@id'});
});

And now I want to get data in controller, using service which using a provider. But after run application, js console says: 

Error: [$injector:unpr] Unknown provider: ClubResourceProvider <- ClubResource <- ClubService

I have added <script src="bower_components/angular-resource/angular-resource.js"></script> to the index.html, I tried to use ['ngResource'] in service, but nothing works. Moreover, if I add ['ngResource'] I do not get this error in console, but no html from club.html (that html only show item from server) is shown. I mean, that no view is loaded. I do not know, why my service cannot inject the resource provider here.

UPDATE: Now, I changed my service to:

angular.module('fronterApp')
  .service('ClubService', function (ClubResource) {

  var get = function () {
    return ClubResource.get({id: 1});
  };

  return {
    get: get
  };
});

and resource to (but GET is from default, so I think it is unnecessary):

var app = angular.module('fronterApp');
var server = 'http://localhost:8080';
app.run(function ($http) {
  $http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
  $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
});
app.factory('ClubResource', function ($resource) {
  return $resource(server + '/api/clubs/:id', {id: '@id'}, {
    get: {
      method: 'GET'
    }
  });
});

Upvotes: 0

Views: 808

Answers (1)

Developus
Developus

Reputation: 1462

Ok, I have already solved this problem... I am stupid, because I have my factory in other file, named routing.js 

var app = angular.module('fronterApp');
var server = 'http://localhost:8080';

app.factory('ClubResource', ['$resource', function ($resource) {
  return $resource(server + '/api/clubs/:id', {id: '@_id'}, {
  });
}]);

and I haven't add this file into index.html, so I got this error because Angular could not find script with needed code. Now everything works fine.

Upvotes: 1

Related Questions