Introduction

Hello Everyone!

Today I am here to tell you about a new service named as AngularJS cacheFactory. This service of AngularJS is used to store something in the browser  at client side with the help of cache. It’s name shows that it deals with the caches. My this lecture will show you the user side functionality of cache. This service is predefined in AngularJS named $cacheFectory. So let’s do this thing.

First we need some important point in our mind. We need to make new project for AngularJS cacheFectory service. If you don’t know how to make new project do visit my previous lecture “AngularJS Development – Hello Word“. Because we need these things for AngularJS cacheFactory.

Outlines

  • Important Points
  • Library Source
  • JavaScript
  • HTML
  • AngularJS cacheFectory Service
  • Images
  • Precautions
  • Conclusion

Description

These are the outlines, on the basis of which we will perform our task and will get the desired output.

Important Points

  • $cacheFactory

This service of AngularJS is used to store something in the browser  at client side with the help of cache.

  • put

This is a predefined function of AngularJS. It will help me to push the values inside the cache.

  • factory

It is a predefined function of AngularJS. It allows you to specify some application, specific to configuration of this particular application. It will use $cacheFactory service.

  • 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-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-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.

Description

These are the important things for AngularJS cacheFactory service. We will use these inside my AngularJS cacheFactory code.

AngularJS Library Source

As you all know that we need the library source of AngularJS to make our code work properly. Below is the script containing the library source.

Description

The above code shows the library source which we need for AngularJS cacheFactory service.

JavaScript

As you all know it that we needed a bit of javascript to handle our AngularJS. Take a closer look below because today the script is a bit different. This is AngularJS cacheFactory.

Description

The above code shows us the javascript needed for AngularJS cacheFectory service. We all knew that we need a module and a controller function. But this time I called another function named “factory” and named it as “myCache“. Inside this function I created another function and passed AngularJS $cacheFactory service init. In simple words I am creating a new cash location for this application with the help of AngularJS cacheFactory service. While creating this I am giving it a name as “myCache“. I also passed another property inside this named “capacity“, when ever we create a cache we need to check when our cache is full. So I assigned it a value “3”. It means it has three items or you can say can hold three items only, we will see what will happen if we add a new or additional value.

Now inside my controller function I passed $scope and instead of using $cacheFactory I used myCache which is created with the help of AngularJS cacheFactory service. I created three functions named “add” , “read” and “getStatus” with the help of $scope. My add function contains a key and a value to it which will be pushed inside the cache by the help of predefined function “put”. The get function will bring the value for us by the help of “key” I passed init. The last thing “info” function will show us the status about the “capacity” of the cache.

Now just see the HTML of AngularJS cacheFactory.

HTML Code

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

Description

The above HTML code shows us the form. Inside this form I placed three input tags of text areas , a button and two headings. This is a simple HTML code for AngularJS cacheFactory service.

AngularJS cacheFactory Service Code

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

So what do we have here? As you can see I made the HTML tag as the owner of AngularJS. The div tag is the controller of my module.

Inside the input tags I passed ng-model for binding purpose. One tag is binding the key while the other is binding the value.

In button I passed ng-click directive and inside that directive I passed the add function. Basically it will add the item inside the cache on the basis of it’s value and key when the button will be pressed.

The third input tag I will type the key and ng-model will bind that for me. The last two headings will display two different things. One will display the Value or the second will display the cache status.

Lets view this inside the browser. I will show you AngularJS cacheFactory by the help of images.

Images View of AngularJS cacheFactory 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

cacheFactory service.

AngularJS cacheFactory

This is the main view of what we were doing so far. As you can see the three text areas and a button. While the last statement is showing the given capacity and size.

AngularJS cacheFectory

In the upper picture you can see I am adding the ID and Value as “1” and “A” respectively. then press the button. As the size is also increased.

AngularJS cacheFectory

Similarly I am adding another value. As the size is also increased.

AngularJS cacheFectory

And adding the third value. As the size is also increased and reached to it’s limit.

AngularJS cacheFectory

Do have a closer look, what do we have here? I wrote 1 in the third text area and it showed it’s value below as “A“.

AngularJS cacheFectory

Similarly I gave the key as “2” and it showed it’s value.

AngularJS cacheFectory

Now See closer I added a new value with a key and you can see the size is the same. Because it replaced a previous value. Now let’s see which value is replaced.

AngularJS cacheFectory

As you can see in the above image I wrote key 1 but it is not showing the value now. This is because it’s value is removed. This is the view of AngularJS cacheFactory.

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.

Conclusion

So what do we learned today? We learned how to save values inside the cache service with the help  of AngularJS cacheFactory service. We made a new file and added AngularJS library source. Then I added javascript init and added AngularJS directives. I think this is a simple code for you. Do inform Me if you fell any difficulty.