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_;
}]);
});
Related
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.
I added the 'selectionModel' to my TestRateCtrl controller but I get an error:
angular.module('RDash', ['selectionModel'])
.controller('TestRateCtrl', function() {
I get this error:
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.5.11/$controller/ctrlreg?p0=MasterCtrl
MasterCtrl is my master.js file. If I add 'selectionModel' to my master.js I get a different error.
angular.module('RDash', ['selectionModel'])
.controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore', MasterCtrl]);
Now I get this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.11/$injector/unpr?p0=%24cookieStoreProvider%20%3C-%20%24cookieStore%20%3C-%20MasterCtrl
I have the following in my index.html file:
src="components/angular-selection-model/dist/selection-model.js" charset="utf-8">
src="components/angular-selection-model/dist/selection-model.min.js" charset="utf-8">
By doing this would make two different scopes for your application becuase using same name of module if you reinitiallized that module that would be different that the other one which is already declared
say: file A
angular.module("RDash", ['selectionModel']);
This is defined and in file B
var app = angular.module("RDash", ['selectionModel']);
so this would cause to have two different app with same name in one application and that two app with same name in different files so its something like to have two different angular module inside on application.
so,
Replace this
angular.module('RDash', ['selectionModel']) .controller('TestRateCtrl', function() {
by
angular.module('RDash') .controller('TestRateCtrl', function() {
Same thing is happening here again
And here you are creating a MasterCtrl and adding MasterCtrl as dependencies
Replace this
angular.module('RDash', ['selectionModel']) .controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore', MasterCtrl]);
by
angular.module('RDash') .controller('MasterCtrl', ['$rootScope', '$scope', 'configService', '$cookieStore']);
If anyone else is using the RDash framework (from startangular.com), and wants to use the angular-selection-model library, the way I was able to add the 'selectionModel' to the RDash framework is in the modules.js file as follows:
angular.module('RDash', ['ui.bootstrap', 'ui.router', 'ngCookies', 'selectionModel']);
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) {
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.
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'])