How To Create 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">