Angular Js: How to setup cookies?

Question

THE SITUATION:

I need to use cookies in my Angular App. I have followed what should be the proper steps to properly setup the ngCookies module in my app, but somehow it isn't working.

This is the error message i am getting:

 Unknown provider: $$cookieReaderProvider <- $$cookieReader <- $cookies <- $cookies

THE STEPS:

These are the steps i have done:

1. bower install angular-cookies

2. Choose first option in bower:

    angular#1.3.13 which resolved to 1.3.13 and is required by angular-animate#1.3.13, angular-sanitize#1.3.13, ionic#1.0.0
   

3. In index.html include:

   <script src="lib/angular-cookies/angular-cookies.min.js"></script>

4. Include the module ngCookies:

   angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCookies'])
   
   angular.module('starter.controllers', ['ngCookies'])
   

5. Inject the service in the controller:

   .controller('MainCtrl', function( $scope, $rootScope, $cookies ) 
   

VERSIONS -- EDIT

I thought the issue could be related with versions since these were the previous versions:

Angular version: 1.3.13
Angular-cookies version: 1.4.1

I have then reinstall angular to the latest version: #1.4.1 and reinstall angular-cookies but the issue persists with the same error message.

THE QUESTION:

How can i properly setup angular-cookies? Why i am getting that error?

Answer 1

I will give perfect solution for this same issue which is came for me at my fresher time.

How can i properly setup angular-cookies?

You have already did that pretty much. That's enough for you.

Why i am getting that error?

May be you are configure invalid structure

Don't worry about the version,I think you have configured correct versions. So Just come out from version issue.

Solutions

Please check under verifications :-

• Have you put correct script path in your index.html screen?

• Please put the cookie.js before your main module code run.

  like this below format

  <script src="Scripts/angular.js"></script>// angular script
  <script src="Scripts/angular-cookies.min.js"></script>// cookie script
  <script src="app/home/home.js"></script>//my sub module js for home  screen
  <script src="app/app.js"></script>// this is my main module js, here i configure the cookie
  

  • Remove installed scripts in your index page. just past this and try one more time ⌚

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>

I hope these both verification will don for you.

Answer 2

The angular packages should have the same version as the angular version you are using. So in this case you want to use 1.3.13 for angular cookies.

Angular does not use semantic versioning and is not necessarily backwards compatible.

Edit: I am not sure whether 1.4 has been released yet. If it has you could consider switching to the newer version.

Answer 3

Latest angular-cookies seem to use AngularJS v1.4.1 but by default angular installs v1.3.x. Install latest version of angular by using

bower install angular#1.4.1

Don't forget to select 3) angular#1.4.1. Hope this solves your problem.