Introduction
In this article I will tell you about Cookies in AngularJS.
AngularJS provides many types of directives and services for various types of functionalities, AngularJS provides one more directive, ngCookie and a service, $cookieStore. These directives and services can be used to store some values in cookies.
Here I will show a simple example by which you will be able to understand how to 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, $cookieStore) {
$cookieStore.put('Name', 'Anubhav');
$scope.cookie = $cookieStore.get('Name');
}
</script>
Here I took an Angular module in which the "app" and "ngCookies" directives are defined, "app" is the name that will be bound to the ng-app directive.
I created a function "x" in which $scope and $cookieStore are declared.
After this I have used the $cookieStore to define some initial values and then called them in a variable named as "cookie".
Now our work on JavaScript is completed and we can move towards the Design part:
Step 3
Write this code in the body section:
<body>
<form id="form1" runat="server">
<div ng-controller="x">
Cookie Value: {{cookie}}
</div>
</form>
</body>
I had bound the div to the function "x" using the ng-controller.
I then bound the initial value declared in the head section using the {{cookie}}.
Now our application is created and is ready for execution.
Output
On running the application an output like this can be seen:
![cookie in angularjs]()
You can see that the initial value is available in the output window.
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, $cookieStore) {
$cookieStore.put('Name', 'Anubhav');
$scope.cookie = $cookieStore.get('Name');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
Cookie Value: {{cookie}}
</div>
</form>
</body>
</html>