Cookies in AngularJS

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>