Introduction

Hello Everyone!

Today I am here to tell you about another AngularJS service. We will see it’s implementation and use. Cookies are used to save data at client side. They helps to store data in your local machine. Now we will use AngularJS cookies service to save and update short data into the local machine. So we need some directives of AngularJS and predefined objects to make AngularJS cookies service work.

Well you all got the idea of $cookies function. You all noticed that the links you used to open daily or opened recently and when you reopen them the appear on the top. Even you didn’t wrote the full sentence.

Before going on further details lets See how to work on it.

Outlines

  • Important Points
  • AngularJS Library Source
  • JavaScript
  • HTML Code
  • AngularJS Cookies Service Code
  • Images View of AngularJS Cookies Service
  • Precautions
  • Conclusion

Description

These are the main points, on following them we will get AngularJS cookies service. These are step by step understanding headings, which I wrote for your help.

First we need to make a new project in IDE. IF you don’t know how to, do visit my previous lectures “AngularJS Development – Hello Word“.

Important Points

  • ngCookies

This ngCookies is a predefined object of AngularJS and without this $cookies service will not work.

  • $cookies

It is a predefined object of AngularJS. AngularJS cookies service is used to save data on the local machine. Same like cache memory, all the latest or most frequent used data is stored in it.

  • ng-app

This is now a well known directive for everyone. But if you don’t know, do visit my previous lecture “AngularJS Development – Hello Word“.

  • ng-controller

This is also a well known directive for everyone. But if you are new so do visit my previous lecture “ontroller directive in AngularJS with scope inheritance“.

  • ng-model

This ng-model directive is also used many times and I explained it earlier. Those who don’t know, do visit my previous lecture “AngularJS Development – Hello Word“.

  • ng-click

This predefined directive of AngularJS works on click, I explained it earlier in my previous lectures. Do visit them “AngularJS click-init-blur directives use“.

  • JavaScript

As we all know AngularJS is the library of java, so some times we need javascript to handle our AngularJS functions and directives.

  • $scope

This is also a well known predefined object of AngualrJS. I explained it in my previous lectures “Controller directive in AngularJS with scope inheritance“. Visit it for detailed information.

AngularJS Library Source

In this lecture I am using an additional library source for $cookies service. To make them work properly. Take a closer look on below script.

Description

The upper code shows to library sources I used for AngularJS cookies service. The second one is specially for cookies to work. Lets go on further detail.

JavaScript

I told you before what we need java script to handle our directives and services of AngularJS. Take a closer look below.

Description

This is a simple script as I used to write in my previous lecture. As you can see I made a module, but this time I passed ngCookies as the second parameter of my module. This ngCookies is a predefined object of AngularJS and without this $cookies service will not work.

Inside the controller function I made another function and passed $cookies as with $scope. Now I wrote a property with the help of $scope and initialized it with empty string. Then I made two function with the help of $scope.

The first function will set the value for my cookie while the second one will get that new value. The function “$scope.setCookiesValue” contains my $cookies service which will take my property while second function will return the cookies by the help of it’s name.

HTML Code

As we all know that AngularJS works inside the HTML code, so below is the simple HTML code for AngularJS cookies service. Take a fast look below.

Description

This is a simple HTML code which contains a simple form. Inside the form their is a div, which contains another div. The inner div contains a text area and a button. Now we have to place our scripts and directives init to make our app work.

AngularJS Cookies Service Code

The below code show the full implementation on AngularJS cookies service. Take a closer look and make yourself clear.

Description

Inside the above code you can see I places the scripts and the source inside the head portion. While inside the body I made a div as the owner of my AngularJS app by applying ng-app directive. The inner div is my controller of the model, which is being controlled by the controller function present inside the script. Then I wrote my get function inside my expression which will display the value of the cookies. I placed ng-model directive inside the text area so that it will bind the input.

My button contains ng-click directive. I passed my setCookies function inside it, so that when the button will be clicked it will set the new cookies value.

Images View of AngularJS Cookies Service

Now let’s see the image view so that we can able to see what we did so far or what is the output of this AngularJS cookies service.

a. The main view

AngularJS cookies

The above picture is the main view of AngularJS cookies service. As you can see that it contains a text area and a button.

b. Writing

AngularJS cookies

I wrote the name of my site inside the text area, after clicking the button it will save the data into the cookies. take a look on below image.

c. After clicking the button

AngularJS cookies

On the click action my cookie value is saved inside the set function and appeared inside the expression. Let’s update this value.

d. Something Else

AngularJS cookies

I wrote anew text and on click action the new value will appear as shown below.

e. After click

AngularJS cookies

As you can see that a new value is stored inside the expression.

  So this is the AngularJS cookies service. You have seen it’s working now in detail.

Precautions

Always place the script tag of source of AngularJS. Must define the ng-app directive. Always place “;” at the end of every statement inside the script. Be careful with the names you provide, they are care sensitive.Don’t forget to place both the library scripts.

Conclusion

So we learned the use of AngularJS cookies service. It helps us to store our data in the local machine. We saw the use of ngCookies, which is predefined object of AngularJS. This is what the whole code is about. First We made new project then inside the HTML file we wrote our script and liked the library source of AngularJS. Then applied the directive inside the HTML.