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.
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 }]);
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>