Introduction To AngularJS: Cookies - Day Twenty Three

In this 23rd day of AngularJS article series, we are going to be learning next key players/concept of AngularJS, understanding the concept of Cookies in AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

1. Introduction to AngularJS – Day 1
2. Introduction to AngularJS – Day 2
3. Introduction to AngularJS – Day 3
4. Introduction to AngularJS – Day 4
5. Introduction to AngularJS – Day 5
6. Introduction to AngularJS – Day 6
7. Introduction to AngularJS – Day 7
8. Introduction to AngularJS – Day 8
9. Introduction to AngularJS – Day 9
10. Introduction to AngularJS – Day 10
11. Introduction to AngularJS – Day 11
12. Introduction to AngularJS – Day 12
13. Introduction to AngularJS – Day 13
14. Introduction To AngularJS – Day 14
15. Introduction To AngularJS – Day 15
16. Introduction To AngularJS – Day 16
17. Introduction to AngularJS – Day 17
18. Introduction to AngularJS – Day 18
19. Introduction to AngularJS – Day 19
20. Introduction To AngularJS - Day 20
21. Introduction To AngularJS – Day 21
22. Introduction to AngularJS – Day 22

Introduction

In this article we are going to learn new feature provided by AngularJS that is ‘ngCookies’. It’s nothing but the separate module in AngularJS. It contains functionality like you can save the browser cookies, get browser cookies and remove cookies. Following are the services and provider provided by AngularJS ‘ngCookies’:

$cookieStore

This $cookieStore provides the functionality like you can store browser cookies in key-value pair like dictionary in C# language. You can read and write from this storage. And it gets the functionality to serialized and deserializes using the AngularJS built-in function toJson and fromJson. Following are methods provided by this $cookieStore as follows:

 

1. get(key)
   
   You can access/read browser cookies values using this method by passing the ‘key’ parameter of cookies.
   
   
2. put(key, value)
   
   Using this method you can set value to cookies using the way key-value pair.
   
   
3. remove(key)
   
   Using this method you can remove cookies value just by passing the ‘key’ parameter.

$cookies

This service provides the functionality to read and write access to the browser cookies. Following are methods provided by $cookies as follows:

1. get(key) - Using this method you can get value by passing ‘key’ parameter.
   
   
2. getObject(key) - Using this method you can get deserializes the value by passing ‘key’ parameter to it.
   
   
3. getAll() - Using this you can get all the cookie values.
   
   
4. put(key, value, [optional]) - Using this method you can set the value for a given cookie by passing these three parameters.
   
   
5. putObject(key, value, [optional]) - Using this method you can serialize the value and set to the cookie by passing these parameters.
   
   
6. remove(key, [optional]) - Using this method you can remove the cookie by passing ‘key’ value to it.

Example:

In the following example we going see how to use ‘$cookieStore’ service in AngularJS. For that we need to download and dynamically inject that module as follows:

1. You can directly use ‘angular-cookies.js’ file CDN path or you can download and include in your application as follows:
   
   
   
   2. Dynamically injecting the ‘ngCookies’ module in your module as follows:
   
   

1. $cookieStore
   
   In the following example, I have two input box first for ‘key’ and second for ‘value’. By pressing ‘Add to Cookie’ button cookie will be set. For getting cookie value, we are added one more button ‘Get Cookie’. Third button is for removing cookie value ‘Remove Cookie’.
   
   mainApp.js
   

   /// <reference path="../scripts/angular.min.js" />
   /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/
   var app = angular.module('mainApp', ['ngCookies']);
   //Creating controller in general
   app.controller('cookieStoreCtrl', function($scope, $cookieStore, $window)
   {
       $scope.show_cookie = false;
       $scope.add_cookie = false;
       $scope.remove_cookie = false;
       // Put cookie
       $scope.addCookie = function()
       {
           $cookieStore.put($scope.key, $scope.value);
           $scope.add_cookie = true;
       };
       // Get cookie
       $scope.getCookie = function()
       {
           $scope.show_cookie = true;
           $scope.myCookie = $cookieStore.get($scope.key);
           if (angular.isUndefined($scope.myCookie)) {
               $scope.show_cookie = false;
               $window.alert('Cookie is not Found! - ' + $scope.myCookie);
           }
       };
       // Removing a cookie
       $scope.removeCookie = function() {
           $cookieStore.remove($scope.key);
           $scope.remove_cookie = true;
       };
   });

   CookieStore.html
   

   <!DOCTYPE html>
   <html ng-app="mainApp">
   
   <head>
       <title>$cookieStore in AngularJS</title>
       <meta charset="utf-8" />
       <script src="scripts/angular.min.js"></script>
       <script src="scripts/angular-cookies.js"></script>
       <script src="app/mainApp.js"></script>
   </head>
   
   <body ng-controller="cookieStoreCtrl">
       <h2>$cookieStore in AngularJS</h2>
       <div>
           <h3>Add Cookie</h3> Enter the key :   <input type="text" ng-model="key" /><br /><br /> Enter the value :   <input type="text" ng-model="value" /><br /><br /> <input type="button" value="Add to Cookie" ng-click="addCookie()" /><br />
           <h3 ng-show="add_cookie">Cookies Added!</h3><br /> </div>
       <div>
           <h3>Get Added Cookie</h3> <input type="button" value="Get Cookie" ng-click="getCookie()" /><br />
           <h3 ng-show="show_cookie">Cookies : {{myCookie}}</h3><br /> </div>
       <div>
           <h3>Remove Added Cookie</h3> <input type="button" value="Remove Cookie" ng-click="removeCookie()" /><br />
           <h3 ng-show="remove_cookie">Cookies is removed!</h3><br /> </div>
   </body>
   
   </html>

   Output:
   
   
   
   The above screen you can see first time you open the file browser. After entering key and value and pressing ‘Add to Cookie’ button you can see output as follows:
   
   
   
   Now, click on ‘Get Cookie’ button you can see just added cookie value as follows:
   
   
   
   Next, click on ‘Remove Cookie’ button, you can see message cookie is removed as follows:
   
   
   
   Now, again press on ‘Get Cookie’ button to check whether cookie is removed or not and you see output as follows:
   
   
   
   
2. $cookies
   
   In the following example, I have two input boxes,  first for ‘key’ and second for ‘value’. By pressing ‘Add to Cookie’ button cookie will be added. For getting cookie value, we are added one more button ‘Get Cookie’ and passing the entered ‘key’ value to that function. Third button is for removing cookie value ‘Remove Cookie’ and passing the ‘key’ value to remove. Last we added one more button here to get all cookies ‘Get All Cookie’.
   
   mainApp.js
   

   /// <reference path="../scripts/angular.min.js" />
   /*Angular Modules take a name, best practice is lowerCamelCase, and a list of dependancies*/
   var app = angular.module('mainApp', ['ngCookies']);
   //Creating controller in general
   app.controller('cookiesCtrl', function($scope, $cookies, $window)
    {
       $scope.show_cookie = false;
       $scope.removed = false;
       $scope.add_cookie = false;
       $scope.getAllCk = false;
       // Put cookie
       $scope.addCookie = function()
       {
           $cookies.putObject($scope.key, $scope.value);
           $scope.add_cookie = true;
       };
       // Get cookie
       $scope.getCookie = function() {
           $scope.show_cookie = true;
           $scope.myCookie = $cookies.getObject($scope.getkey);
           if (angular.isUndefined($scope.myCookie)) {
               $window.alert('Cookie is not Found! - ' + $scope.myCookie);
           }
       };
       // Removing a cookie
       $scope.removeCookie = function() {
           $cookies.remove($scope.removekey);
           $scope.removed = true;
       };
       // Removing a cookie
       $scope.getAllCookie = function() {
           $scope.getAll = $cookies.getAll($scope.removekey);
           $scope.getAllCk = true;
       };
   });

   Cookies.html
   

   <!DOCTYPE html>
   <html ng-app="mainApp">
   <head>
   <title>$cookies in AngularJS</title>
   <meta charset="utf-8" />
   <script src="scripts/angular.min.js"></script>
   <script src="scripts/angular-cookies.js"></script>
   <script src="app/mainApp.js"></script>
   </head>
   <body ng-controller="cookiesCtrl">
   <h2>$cookies in AngularJS</h2>
   
   <div>
   <h3>Add Cookie</h3>
   Enter the key :   <input type="text" ng-model="key" /><br /><br />
   Enter the value :   <input type="text" ng-model="value" /><br /><br />
   <input type="button" value="Add to Cookie" ng-click="addCookie()" /><br /><br />
   <h3 ng-show="add_cookie">Cookies Added!</h3>
   </div>
   
   <div>
   <h3>Get Cookie</h3>
   Enter the key :   <input type="text" ng-model="getkey" /><br /><br />
   <input type="button" value="Get Cookie" ng-click="getCookie()" /><br /><br />
   <h3 ng-show="show_cookie">Cookies : {{myCookie}}</h3>
   </div>
   
   <div>
   <h3>Remove Cookie</h3>
   Enter the key :   <input type="text" ng-model="removekey" /><br /><br />
   <input type="button" value="Remove Cookie" ng-click="removeCookie()" /><br /><br />
   <h3 ng-show="removed">Cookies Removed : {{removekey}}</h3>
   </div>
   
   <div>
   <h3>Get All Cookie</h3>
   <input type="button" value="Get All Cookie" ng-click="getAllCookie()" /><br />
   <h3 ng-show="getAllCk">All Cookies : {{getAll}}</h3>
   </div>
   </body>
   </html>

   Output:
   
   First time you can see output as follows:
   
   
   
   Now, we are going to add cookies as follows:
   
   
   
   Next, enter just added ‘key’ value in text box and press button ‘Get Cookie’ as follows:
   
   
   
   Next, enter the same ‘key’ value in text box and click on button ‘Remove Cookie’ as follows:
   
   
   
   For cross checking whether cookie is removed or not just click on button ‘Get Cookie’ as follows:
   
   
   
   Next, I have added more values in cookies and getting all my cookie values click on button ‘Get All Cookie’. After clicking on button you can see list of cookies values currently present as follows:
   
   
   
   Great, Cookies of AngularJS with example created successfully!

Summary

I hope that beginners as well as students understand concept of Cookies in AngularJS with Example. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!