Introduction
In this article I will tell you about the $cookies service in AngularJS.
AngularJS provides many type of directives and services that can be used for achieving various types of functionalities, AngularJS provides one more directive, in other words ngCookie and a service that's $cookieStore, these directives and services can be used to store values into cookies.
Here I will show a simple example by which you will be able to understand how you can use the cookies feature of Angular.
Use the following procedure.
Step 1
First of all you need to add the following two external Angular.js files to your application:
- angular.min.js
- cookies.js
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link to download it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the JavaScript section of this application.
Write this code in the head section:
<script>
angular.module('app', ['ngCookies']);
function x($scope, $cookies) {
$scope.initially = "anubhav";
$scope.setCookieValue = function () {
$cookies.test = $scope.initially;
}
$scope.getCookieValue = function () {
return $cookies.test;
}
}
</script>
Here I took an Angular module in which the "app" and "ngCookies" directives are defined, "app" is the name that will be bound with the ng-app directive.
I created a function "x" in which $scope and $cookies are declared.
After this I defined an initial value in the variable "initially" then I created a function that sets the value of Cookie, in this a variable "test" is declared that will receive the value from the variable "initially".
I created one more function to be used to get the value from Cookie.
Now our work on JavaScript is completed and we can move to the design part.
Step 3
Write this code in the body section:
<body>
<form id="form1" runat="server">
<div ng-app="app">
<div ng-controller="x">
Cookie Current Value: {{getCookieValue()}} <br/>
<input type="text" ng-model="initially" />
<button ng-click="setCookieValue()">Update cookie</button>
</div>
</div>
</form>
</body>
Here I bound the div using the ng-app, after this second div is bound with the function "x".
I had bound the "getCookieValue" in the div along with some text associated with it.
I also took a TextBox and a button, the TextBox is bound to the initial value of the variable "initially" and the button is bound to the "setCookieValue()" function.
Now our application is ready for execution.
Output
On running the application you will get output like this:
![Cookie Service in angularjs]()
Here Cookie and TextBox have similar values that were declared as the initial value in the JavaScript section.
Cookie will hold that value provided in the TextBox, so if I change the value in the TextBox and click on the button then the Cookie value will be updated.
![Cookie Service in angularjs]()
Even if I run the application again without closing the browser then the output window will have the same value that was stored previously in the cookie, for example:
![Cookie Service in angularjs]()
You can see that the TextBox is showing the default value that was provided earlier in the head section but the cookie has the same value that was provided in the previous tab.
The complete code of this application is as follows:
<html ng-app="app" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script src="//raw.github.com/angular/angular.js/master/src/ngCookies/cookies.js"></script>
<script>
angular.module('app', ['ngCookies']);
function x($scope, $cookies) {
$scope.initially = "anubhav";
$scope.setCookieValue = function () {
$cookies.test = $scope.initially;
}
$scope.getCookieValue = function () {
return $cookies.test;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="app">
<div ng-controller="x">
Cookie Current Value: {{getCookieValue()}} <br/>
<input type="text" ng-model="initially" />
<button ng-click="setCookieValue()">Update cookie</button>
</div>
</div>
</form>
</body>
</html>