Angular ngResource still not recognising $resource

Question

My app has this line at the top, like most angular apps. I assume here it's pulling in ngRoute and ngResource

var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngResource']);

how ever I create a service below:

myApp.factory('NewsService', function($resource) {
    return $resource('/api/news/:id', {id: '@id'}, {update: {method: 'PUT'}})
})

and in my console I get this message:

Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- NewsService

In my angular folder I have all the js files associated with angular, from angular-animate.js through to angular-touch.js including obviously angular-resource.js , I'm wondering why it is complaining, or what I can do to narrow down to the specific error.

I'm not using the min files at the moment because the errors aren't verbose enough.

In my controllers I just do this:

function newsCreateController($scope, NewsService) {}

Answer 1

You need to make sure you include the appropriate angular files, and application files in your index.html, eg:

<!-- angular related files -->
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular-resource/angular-resource.js"></script>

<!-- application related files -->
<script src="/apps/myapp/services/newsservice.js"></script>
<script src="/apps/myapp/app.js"></script>

Obviously this is an example, and depends on your file structure.

Once everything is included, you need to make sure your modules are setup correctly, and injected accordingly.