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

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.

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.

I encountered the same issue. the angular version and the angular cookies version didn't match. what i did to fix it is update bower.json to a working versions of both.

"angular": ">=1.2.*",
"angular-cookies": ">=1.2.*"

Then i ran:

bower install

i got this question:

Unable to find a suitable version for angular, please choose one:
1) angular#1.3.13 which resolved to 1.3.13 and is required by angular-cookies#1.3.13 
2) angular#>=1.2.x <=1.4.x which resolved to 1.3.16 and is required by oclazyload#1.0.1 
3) angular#1.4.0 which resolved to 1.4.0 and is required by angular-cookies#1.4.0 
4) angular#>=1.2.* which resolved to 1.4.0 and is required by hashve 
5) angular#>=1 which resolved to 1.4.0 and is required by angular-bootstrap#0.11.2 
6) angular#>=1.2.26 <=1.5 which resolved to 1.4.0 and is required by angular-translate#2.7.2 
7) angular#~1.x which resolved to 1.4.0 and is required by restangular#1.5.1 
8) angular#^1.2.6 which resolved to 1.4.0 and is required by angular-socket-io#0.6.1 
9) angular#>= 1.0.8 which resolved to 1.4.0 and is required by angular-ui-router#0.2.15 
10) angular#>=1.2.0 <1.5.0 which resolved to 1.4.0 and is required by angular-moment#0.10.1Prefix the choice with ! to persist it to bower.json

Then I chose 3.

and it worked.

Jon Onstott

From https://stackoverflow.com/a/18971123/132374, it looks like you need to delare 'ngCookies' in your service module if you haven't already:

var serviceModule = angular.app('App.services', ['ngCookies']);

That worked for me. Keep in mind that $cookies only works where Angular allows you to inject services (see the accepted answer for details).

Like everyone else stated, you cannot use the angular cookie service. However, there is no law known to man that says you cannot simply use document.cookie to access it and parse it yourself. Alternatively, you can create your own provider that gives you access to the cookies and you can inject that. Please remember that angular is simply a framework and when the framework has limitations you have to remember to use something called javascript.

JKaveri

You should inject with name $cookieProvider instead $cookies:

angular.module("MyApp", ["ngCookies","ngRoute"])
    .config(["$routeProvider", "$locationProvider","$cookiesProvider",
        function($routeProvider, $locationProvider, $cookies) {

        }
    ]);

来源：https://stackoverflow.com/questions/15358029/why-am-i-unable-to-inject-angular-cookies

标签

javascript

angularjs

angular-cookies