<!DOCTYPE html>
<
html
ng-app
=
"cookieApp"
>
<
head
>
<
title
>Cookie Access</
title
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
h1 {
color: green;
text-align: center;
}
.container {
background-color: #f5f5f5;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 20px auto;
max-width: 400px;
padding: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 3px;
}
.button-container {
display: flex;
flex-direction: column;
align-items: center;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
border-radius: 3px;
width: 100%;
margin-bottom: 10px;
}
button:hover {
background-color: #45a049;
}
.cookie-value {
font-weight: bold;
text-align: center;
margin-top: 15px;
font-size: 18px;
}
</
style
>
</
head
>
<
body
ng-controller
=
"CookieController"
>
<
h1
>GeeksforGeeks</
h1
>
<
div
class
=
"container"
>
<
h3
>Approach 1: Using a Custom Service</
h3
>
<
label
for
=
"newCookie"
>Enter Cookie Value:</
label
>
<
input
type
=
"text"
id
=
"newCookie"
ng-model
=
"newCookie"
placeholder
=
"Cookie Value"
>
<
div
class
=
"button-container"
>
<
button
ng-click
=
"setCookie()"
>
Set Cookie
</
button
>
<
button
ng-click
=
"showCookie()"
>
Access Cookie
</
button
>
</
div
>
<
div
class
=
"cookie-value"
>
Current Cookie Value: {{ cookieValue }}
</
div
>
</
div
>
<
script
>
angular.module('cookieApp', ['ngCookies'])
.service('CookieService', ['$cookies', function ($cookies) {
this.getCookieValue = function () {
return $cookies.get('cookieValue') || 'Default Cookie';
};
this.setCookieValue = function (newCookie) {
$cookies.put('cookieValue', newCookie);
};
}])
.controller('CookieController', ['$scope', 'CookieService',
function ($scope, CookieService) {
$scope.cookieValue = CookieService.getCookieValue();
$scope.setCookie = function () {
if ($scope.newCookie) {
CookieService.setCookieValue($scope.newCookie);
$scope.cookieValue = $scope.newCookie;
$scope.newCookie = '';
}
};
$scope.showCookie = function () {
alert('Cookie Value: ' + $scope.cookieValue);
};
}]);
</
script
>
</
body
>
</
html
>