I've included this line to use ngStorage
<script src="js/angularjs/ngStorage.min.js"></script>
and injected it to my controller named bookController like I always do
.controller('bookController', ['$scope', 'bookService', '$location', '$sessionStorage', function($scope, bookService, $location, $sessionStorage)
Why am I still getting injector error like this?
angular.min.js:118 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=<div ng-view="" class="ng-scope">essionStorageProvider%20%3C-%20%24sessionStorage%20%3C-%20bookController
at http://localhost/cm0665/js/angularjs/angular.min.js:6:412
at http://localhost/cm0665/js/angularjs/angular.min.js:43:174
at Object.d [as get] (http://localhost/cm0665/js/angularjs/angular.min.js:40:432)
at http://localhost/cm0665/js/angularjs/angular.min.js:43:236
at d (http://localhost/cm0665/js/angularjs/angular.min.js:40:432)
at e (http://localhost/cm0665/js/angularjs/angular.min.js:41:158)
at Object.instantiate (http://localhost/cm0665/js/angularjs/angular.min.js:42:24)
at http://localhost/cm0665/js/angularjs/angular.min.js:90:32
at Object.link (http://localhost/cm0665/js/angularjs/angular-route.min.js:7:274)
at http://localhost/cm0665/js/angularjs/angular.min.js:16:71
You help is much appreciated!
You need to inject the ngStorage module into your module.
Then you can use $sessionStorage in your controller.
Related
I have a module 'moduleA' that has 2 services, and one(serviceB) is depending on the other one(serviceA). I am trying to inject serviceB into a controller which belongs to a different module 'foo', however I got unknown provider error. Below is my code:
module.js
angular.module('moduleA', []);
factory-a.js
angular
.module('moduleA')
.factory('factoryA', factoryA);
factoryA.$inject = ['$q', '$log', '$timeout'];
function factoryA($q, $log, $timeout) {
//Do Stuff
}
factory-b.js
angular
.module('moduleA')
.factory('factoryB', factoryB);
factoryB.$inject = ['factoryA'];
function factoryB(factoryA) {
//Do Stuff
}
foo-controller.js
angular.module('foo', ['moduleA'])
.controller('fooController', ['factoryB', function(factoryB){
//Do Stuff
})
Error in Console:
generic-console-medium.js:23 2016-11-27 18:49:42.395 - [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController Error: [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController
at http://localhost:9001/components/angular/angular.js:68:12
at http://localhost:9001/components/angular/angular.js:4458:19
at Object.getService [as get] (http://localhost:9001/components/angular/angular.js:4611:39)
at http://localhost:9001/components/angular/angular.js:4463:45
at getService (http://localhost:9001/components/angular/angular.js:4611:39)
at injectionArgs (http://localhost:9001/components/angular/angular.js:4635:58)
at Object.invoke (http://localhost:9001/components/angular/angular.js:4657:18)
at $controllerInit (http://localhost:9001/components/angular/angular.js:10115:34)
at nodeLinkFn (http://localhost:9001/components/angular/angular.js:9033:34)
at http://localhost:9001/components/angular/angular.js:9433:13
This might sound trivial but Did you include your factory-b.js file in your project?
I think you should fix the code shown below. Everything looks fine except for this.
function factoryA($q, $log, $timeout) { //remove the ''
//Do Stuff
}
How add cookie to my controller correct?
It`s error when I use $cookie otherwise everything works.
angular.module('app', ['ngCookies']);
app.controller('loginCtrl', function ($scope, $http, $state, Authorization, $cookies) {
$cookies.put('expires', 'example');
});
Error
angular.js:13920 Error: [$injector:unpr]
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24cookiesProvider%20%3C-%20%24cookies%20%3C-%20loginCtrl
at Error (native)
at http://localhost:64757/Scripts/angular.min.js:6:412
at http://localhost:64757/Scripts/angular.min.js:43:174
at Object.d [as get] (http://localhost:64757/Scripts/angular.min.js:40:432)
at http://localhost:64757/Scripts/angular.min.js:43:236
at d (http://localhost:64757/Scripts/angular.min.js:40:432)
at e (http://localhost:64757/Scripts/angular.min.js:41:158)
at Object.instantiate (http://localhost:64757/Scripts/angular.min.js:42:24)
at http://localhost:64757/Scripts/angular.min.js:90:32
at q (http://localhost:64757/Scripts/AngularUI/ui-router.min.js:7:14338)
If you go to the url that the error gives you: https://docs.angularjs.org/error/$injector/unpr?p0=$cookiesProvider%20%3C-%20$cookies%20%3C-%20loginCtrl
Your angular app is unable to find your dependency. Did you install the angular cookies file? You can install it with:
npm install angular-cookies
OR
bower install angular-cookies
Also when you declare your angular app you should assign it to a variable then use it for your controllers.
var app = angular.module('app',['ngCookies']);
app.controller('loginCtrl', function ($scope, $http, $state, Authorization, $cookies) {
$cookies.put('expires', 'example');
});
I'm testing an ionic app created using creator.
I put the following code in services.js.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.factory('EventService', ['$resource', function ($resource) {
return $resource('https://.....net/api/events/:id');
}])
.service('BlankService', [function(){
}]);
And the following code in controllers.js.
angular.module('app.controllers', [])
......
.controller('nightlifeCtrl', function ($scope, EventService) {
$scope.events = EventsService.query({category: "Nightlife"});
})
Hoever I got the following error in js console?
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20EventService
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at Object.invoke (ionic.bundle.js:17753)
at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)
at Object.invoke (ionic.bundle.js:17762)
at ionic.bundle.js:17580
at getService (ionic.bundle.js:17721)
I tried to add the dependency by angular.module('...', ['ngResource']) but it got the following error.
ionic.bundle.js:17697 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
And I didn't find the file angular-resource.js in the js files. Should I avoid ngResource and use plain ajax call?
In index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
Its not working because you have not loaded the angular-resource dependency. If you want to use an external module in angular, you need to load it as a dependency in your module definition by passing name of the module in the second array parameter to angular.module. In your case name of the module is ngResource. Load the script file for angular-resource.js and then add it as dependency as below:
angular.module('app.services', ['ngResource'])
Also I see that you have not loaded app.services as dependency in app.controller. You need to either load that dependency or load both these dependencies in your app definition module as:
angular.module('app', [
'app.services',
'app.controllers'
]);
Updated JSBIN with fix for console error
Your code also had one typo. You were referring to EventsService in your controller while the name was EventService. I have fixed that as well in the jsbin
I'm attempting to use the ng-file-upload directive (https://github.com/danialfarid/ng-file-upload) to add file-uploading functionality to my project, but keep getting this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.6/$injector/unpr?p0=UploadProvider%20%3C-%20Upload%20%3C-%20ExperimentController
at Error (native)
at http://localhost:8000/static/editor/js/angular.min.js:6:416
at http://localhost:8000/static/editor/js/angular.min.js:40:409
at Object.d [as get] (http://localhost:8000/static/editor/js/angular.min.js:38:394)
at http://localhost:8000/static/editor/js/angular.min.js:40:483
at d (http://localhost:8000/static/editor/js/angular.min.js:38:394)
at e (http://localhost:8000/static/editor/js/angular.min.js:39:161)
at Object.instantiate (http://localhost:8000/static/editor/js/angular.min.js:39:310)
at http://localhost:8000/static/editor/js/angular.min.js:80:313
at A.link (http://localhost:8000/static/editor/js/angular-route.min.js:7:268) <div ng-view="" ng-show="main.results==null" class="ng-scope">
I'm including the correct files in my index.html:
<script src="/static/editor/js/angular.min.js"></script>
<script src="/static/editor/js/ng-file-upload-shim.js"></script>
<script src="/static/editor/js/ng-file-upload.js"></script>
I'm declaring it my module:
(function() {
angular
.module('myApp', [
'ngRoute',
'ngAnimate',
'ngCookies',
'ngFileUpload'
]);
})();
But when I attempt to inject it into my controller, it throws the above error:
(function() {
angular
.module('myApp')
.controller('myController', myController);
myController.$inject = ['$routeParams',
'$compile',
'$scope',
'$interval',
'Upload'];
function myController($routeParams,
$compile,
$scope,
$interval,
Upload) {
....
I'm using Angular 1.4.6, and ng-file-upload 9.0.14. I downloaded the files manually, and included the indicated .js files in my project directory. Are there maybe some extra dependencies that are included via bower or npm that I'm missing?
Any help would be greatly appreciated!
UPDATE: Viewing the ng-file-upload directive's live demo page with AngularJS 1.4.6 (https://angular-file-upload.appspot.com/#/1.4.6) also causes numerous errors, so this might just be an incompatibility with 1.4.6 and the lastest version of ng-file-upload.
You are trying to inject unknown service called "Upload", if you mean the upload service of ng-file-upload you need to inject "ngFileUpload" instead of "Upload".
myController.$inject = ['$routeParams',
'$compile',
'$scope',
'$interval',
'ngFileUpload'];
function myController($routeParams,
$compile,
$scope,
$interval,
ngFileUpload) {
....
UPDATE: ISSUE RESOLVED
Turns out I was not aware that the ngCookies was a separate service which is not part of the standard angular.js. My bower.json file was referencing angular 1.4beta but the angular-cookies was still loading 1.3. I changed that to 1.4beta and everything is working as expected.
I am using $cookies in a controller in an Angular 1.4 project but I am getting the following error when I reference $cookies:
TypeError: undefined is not a function
at Object.<anonymous> (http://localhost:9000/bower_components/angular-cookies/angular-cookies.js:60:16)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:4224:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at http://localhost:9000/bower_components/angular/angular.js:4189:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4330:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4362:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4379:27)
at http://localhost:9000/bower_components/angular/angular.js:8668:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:981:26) <div ng-view="" class="ng-scope">
My code:
angular.module('supportalApp', [
'ngCookies',
'ngAnimate',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'cfp.hotkeys',
'ngClipboard']);
angular.module('supportalApp')
.controller('ToolsCtrl', function($scope, $cookies) {....
});
If I remove $cookies, no errors are rendered. And just to confirm, I have included 'ngCookie' in the app
Note that the $cookies API used to be an associative array before AngularJS v1.4.0-beta.6, and the online documentation (defaulting to a development snapshot) already refers to the new get/put API. The relevant change is https://github.com/angular/angular.js/commit/38fbe3ee8370fc449b82d80df07b5c2ed2cd5fbe
With AngularJS <= v1.4.0-beta.5, you have the following choices:
Use $cookieProvider
$cookies["key"] = value
$cookies.key = value
(Upgrade AngularJS)
I don't see 'ngCookies' added in your module dependency, please add it.
angular.module('supportalApp', ['ngCookies'])
.controller('ToolsCtrl', function($scope, $cookies) {....
});