Unknown provider: $resourceProvider <- $resource with AngularJS - javascript

I have declared 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 am loading my scripts like this:
<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 it gives me an error saying:
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
Is there something wrong with the way I am doing this. I am confused about how to set up the service but I can't see what's wrong:

$resource is not part of AngularJS Core.
You have to include: angular-resource.js.
From the docs:
To use $resource make sure you have included the angular-resource.js that comes in Angular package. You can also find this file on Google CDN, bower as well as at code.angularjs.org.

In your data.js and GridCtrl.js, you need to remove the [] from the angular.module('adminApp', []) call.
Like so: angular.module('adminApp')
Also, make sure your app.js is loaded first.

you would also need to include angular resource module definition 'ngResource' on your module defintion angular.module('adminApp', ['ngResource'])

Related

Unknown provider: $cookies angularjs

I have tried everything I can think of and I am still receiving this error.
app.js:
angular.module('myApp', [
'ngCookies'
]).
config(['$cookies', function($cookies) {
var cookie = $cookies.getObject();
console.log(cookie);
}])
index.html:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
bower.json:
"dependencies": {
"angular": "~1.5.0",
"angular-cookies": "~1.5.0"
}
what could seriously be going wrong? I've tried looking at everything on stackoverflow/google regarding how to fix these bugs but I still receive
Unknown provider: $cookies
When I do not add $cookies into the .config() of my app.js file, I receive no error.
You are getting this error because you cannot inject a service into the configuration section as the services won't be initialized yet. So instead of $cookies, you should use $cookiesProvider inside .config block. And for some reason if you want to use $cookies inside your config, you can inject it manually. Give this a try
app.config(function() {
var $cookies;
angular.injector(['ngCookies']).invoke(['$cookies', function(_$cookies_) {
$cookies = _$cookies_;
}]);
});

Injecting dependency angularMoment returning error

I'm trying to access moment.js API, injecting angularMoment as a dependency into my module but it's returning error:
Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=momentProvider%20%3C-%20moment%20%3C-%20transCtrl
I'm following the docs provided by https://github.com/urish/angular-moment but an error keeps being returned. Any idea why?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<script src="scripts/app.js"></script>
var app = angular.module('myApp', ['ngRoute', 'angularMoment']);
app.controller('transCtrl', ['moment', function(moment){
$scope.date = new moment();
}]);
Here is the detail on how to use angular-moment
https://github.com/urish/angular-moment
You have to include both moment.js and angular-moment.js in your application.
Well, after you included the moment.js script before angular-moment.min.js as I suggested in the comments to your question - You now have a simple error in your controller:
app.controller('transCtrl', ['$scope', 'moment', function($scope, moment){
You just need to inject $scope into your controller.

Failed to instantiate module firebase

Not sure what I'm doing wrong here. I'm requiring my modules via npm. Everything seems to be loading in correctly (angular etc.) except for Firebase. I'm getting this error:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' 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.
I'm requiring Firebase just like my other modules. This is what my code looks like:
(function() {
'use strict';
var angular = require('angular');
var angularRoute = require('angular-route');
var angularTouch = require('angular-touch');
var Firebase = require('firebase');
angular.module('outcomesApp', ['ngTouch', 'ngRoute', 'firebase'])
.controller('UnitController', ['$scope', '$http', 'FBURL', function($scope, $http, FBURL){
}])
.constant('FBURL', 'https://new-outcomes.firebaseio.com/')
})();
Any idea what I'm doing wrong? Any help is appreciated. Thanks in advance!
You need to include a reference to the AngularFire library. That is where the angular module is defined.

Angular $resource: Unknown Provider error, loading dependancies and angular elements

Been doing rails for about a year but this is my first real angular app. So far I've been mostly piecing things together from tutorials, but I'm having troubles. I've searched through other SO questions, but I haven't found a scenario like this.
I'm getting the following error when I load the page. I believe it has to do with how I'm requiring modules / injecting dependancies. Any illumination here is greatly appreciated!
Error: [$injector:unpr] Unknown provider: ReleaseProvider <- Release
my main app - mighty.js:
var mightyReal = angular.module('mightyReal', ['ngResource']);
mightyReal.factory ('Release', ['Resource', function($resource) {
return $resource('/api/releases/all');
}]);
my controller - releaseController.js:
angular.module('mightyReal').controller('releaseController', [ '$scope', 'Release', function($scope, Release){
$scope.releases = Release.query();
}]);
my order of loading js scripts - index.erb:
<script src="js/angular.js"></script>
<script src="js/resource.js"></script>
<script src="js/mighty.js"></script> <!-- main app -->
<script src="js/auth.js"></script>
<script src="js/releaseController.js"></script>
and my sinatra API route - index.rb
get '/api/releases/all' do
content_type :json
Release.all.to_json
end
I think you need to change this:
mightyReal.factory ('Release', ['Resource', function($resource) {
to this:
mightyReal.factory ('Release', ['$resource', function($resource) {

Angular ngResource still not recognising $resource

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) {}
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.

Categories