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:

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>