Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why am I unable to inject angular-cookies?

I have

<body ng-app="myApp">     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js">     </script> </body> 

Everything loads correctly.

Then in my javascript I attempt to inject ngCookies:

angular.module("myApp", ["ngCookies"]).     config(function($cookies) {          console.log($cookies.myCookie);     }); 

But it does not seem to find $cookies:

 Unknown provider: $cookies from myApp 
like image 655
Jeff Wong Avatar asked Mar 12 '13 09:03

Jeff Wong


2 Answers

I'm not sure what is your functional use-case but you can't inject services ($cookies is a service) inside config blocks. Only constants and providers can be injected inside config blocks.

You can inject services into run blocks but I don't know if this helps you since I'm not sure what are your trying to do with those cookies.

BTW: you seems to be mixing versions of the main angular file and the ngCookies module. This is not directly linked to your problem but this is rather odd.

like image 164
pkozlowski.opensource Avatar answered Sep 28 '22 04:09

pkozlowski.opensource


You can inject it manually:

myApp.config(function() {   var $cookies;   angular.injector(['ngCookies']).invoke(['$cookies', function(_$cookies_) {     $cookies = _$cookies_;   }]);    // here you can use $cookies as usual }); 

You might wonder why do we have to specify ngCookies to the injector() call as WELL as to the .invoke() call?

ngCookies is name of the module (you'll need to have angular-cookies.js in your project to be able to use this module). When you create injector by calling injector() you specify which modules should be used so that services from those modules can be used.

invoke() calls a function but let's you specify which services (provided by various modules) should be passed into the function (in our case service provided by ngCookies module is named $cookies)

This solution is a bit of a hack because you are manually creating new injector separate from the one that your angular app auto-creates and uses, but it should be safe because ngCookie seems to be only using functionalities of angular that don't keep their own state and are just thin wrappers of browser functionality.

like image 42
Kamil Szot Avatar answered Sep 28 '22 04:09

Kamil Szot