Interacting with Browser Cookies Using the $cookieStore Service
AngularJS provides a couple services for getting and setting cookies: $cookie and $cookieStore. Cookies provide temporary storage in a browser and persist even when the user leaves the webpage or closes the browser.
The $cookie service allows you to get and change string cookie values by using dot notation. For example, the following retrieves the value of a cookie with the name appCookie and then changes it:
var cookie = $cookies.appCookie;
$cookies.appCookie = 'New Value';
The $cookieStore service provides get(), put(), and remove() functions to get, set, and remove cookies. A nice feature of the $cookieStore service is that it serializes JavaScript object values to a JSON string before setting them, and then it de-serializes them back to objects when getting them.
To use the $cookie and $cookieStore services, you need to do three things. First, you load the angular-cookies.js library in the template after angular.js but before application.js. For example:
<script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>
Note
You can also download the angular-cookies.js file from the AngularJS website at http://code.angularjs.org/<version>/ where <version> is the version of AngularJS that you are using. You may also need to download the angular-cookies.min.js.map file as well depending on which version of AngularJS you are using.
Second, you to add ngCookies to the required list in your application Module definition. For example:
var app = angular.module('myApp', ['ngCookies']);
Third, you inject the $cookies or $cookieStore service into your controller. For example:
app.controller('myController', ['$scope', '$cookieStore',
function($scope, cookieStore) {
}]);
Listings 25.5 and 25.6 illustrate getting and setting cookies using the $cookie service. Listing 25.5 loads ngCookies in the application, injects $cookieStore into the controller, and then uses the get(), put(), and remove() methods to interact with a cookie named myAppCookie.
Listing 25.6 implements a set of radio buttons that tie to the favCookie value in the model and use ng-change to call setCookie() when the values of the buttons change. Figure 25.2 shows the resulting webpage.
Listing 25.5 service_cookie.js: Implementing an AngularJS controller that interacts with browser cookie by using the $cookieStore service
01 var app = angular.module('myApp', ['ngCookies']);
02 app.controller('myController', ['$scope', '$cookieStore',
03 function($scope, cookieStore) {
04 $scope.favCookie = '';
05 $scope.myFavCookie = '';
06 $scope.setCookie = function(){
07 if ($scope.favCookie === 'None'){
08 cookieStore.remove('myAppCookie'),
09 }else{
10 cookieStore.put('myAppCookie', {flavor:$scope.favCookie});
11 }
12 $scope.myFavCookie = cookieStore.get('myAppCookie'),
13 };
14 }]);
Listing 25.6 service_cookie.html: An AngularJS template that implements radio buttons to set a cookie value
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS $cookie Service</title>
05 </head>
06 <body>
07 <div ng-controller="myController">
08 <h3>Favorite Cookie:</h3>
09 <input type="radio" value="Chocolate Chip" ng-model="favCookie"
10 ng-change="setCookie()">Chocolate Chip</value><br/>
11 <input type="radio" value="Oatmeal" ng-model="favCookie"
12 ng-change="setCookie()">Oatmeal</value><br/>
13 <input type="radio" value="Frosted" ng-model="favCookie"
14 ng-change="setCookie()">Frosted</value>
15 <input type="radio" value="None" ng-model="favCookie"
16 ng-change="setCookie()">None</value>
17 <hr>Cookie: {{myFavCookie}}
18 </div>
19 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
20 <script src="http://code.angularjs.org/1.2.9/angular-cookies.min.js"></script>
21 <script src="/js/service_cookie.js"></script>
22 </body>
23 </html>
Figure 25.2 Implementing the $cookieStore service to allow AngularJS controllers to interact with the browser cookies.