Home Web Front-end JS Tutorial Detailed explanation of angularjs cache

Detailed explanation of angularjs cache

Mar 19, 2018 pm 02:22 PM
angularjs javascript cache

This time I will bring you a detailed explanation of angularjs's caching. What are the precautions when using angularjs caching? The following is a practical case, let's take a look.

1. What is a cache

A cache is a component that can store data transparently so that future requests can be served faster.

The more requests the cache can serve, the more overall system performance improves.

2. Cache in Angular

2.1 Introduction to $cacheFactory

$cacheFactory is a cache that generates cache for all Angular services Object services. Internally, $cacheFactory creates a default cache object, even if we don't explicitly create one.

To create a cache object, you can use $cacheFactory to create a cache with an ID:

var cache = $cacheFactory('myCache');
Copy after login

This $cacheFactory method can accept two parameters:

cacheId (String): This cacheId is the ID name when creating the cache. It can be referenced using the cache name via the get() method.

capacity: This capacity describes the maximum number of cache key-value pairs to be stored and saved using the cache at any given time.

2.2 Cache Object

The cache object itself has the following methods that can be used to interact with the cache.
info(): The info() method returns the ID, size and options of the cache object.
put(): The put() method allows us to put any key (string) in the form of a JavaScript object value into the cache. cache.put("hello","world");
put() method returns the value we put in the cache.
get(): The get() method allows us to access the cache value corresponding to a key. If the key is found, it returns its value; if not found, it returns undefined . cache.get("hello");
remove(): The remove() function is used to remove a key-value pair from the cache if it is found. If not found, it returns undefined . cache.remove("hello");
removeAll(): The removeAll() function is used to reset the cache and remove all cached values.
destory(): The destory() method is used to remove all references to the specified cache from the $cacheFactory cache registry.

3. Cache in $http

Angular’s ​​$http service creates a cache with the ID $http. To use the default cache for $http requestsThe object is simple: The $http() method allows us to pass it a cache parameter.

3.1 Default $http cache
The default $http cache is particularly useful when the data does not change frequently. You can set it like this:

$http({
    method: 'GET',
    url: '/api/users.json',
    cache: true  //设置为true只是用来使用$http默认的缓存机制});
Copy after login

Now, every request via $http to the URL /api/user.json will be stored in the default $http cache. The request key in this $http cache is the complete URL path.

If necessary, you can also operate this default $http cache (for example, if we initiate another uncached request to remind us that incremental changes have occurred, we can use the default $http cache request to clear this request).

 cache = $cacheFactory('$http' usersCache = cache.get('http://example.com/api.users.json'cache.remove('http://example.com/api.users.json'cache.removeAll();
Copy after login
        var cache = $cacheFactory.get('$http');        if(cache.get('cacheData')){
            console.log(cache.get('cacheData'));
        }else{
            helloService.play().then(                function (data) {
                    cache.put("cacheData", data);  //往缓存中放入数据
                    console.log(data);
                }
            );
        }
Copy after login

3.2 Custom cache

Sometimes it is possible to have more control over the cache and create rules for cache performance, which requires creating a new cache. Use $http request.

It's easy to make $http requests via a custom cache. Instead of passing a boolean parameter true to the request, you can pass the cache instance.

var myCache = $cacheFactory('myCache');
$http({
  method: 'GET',
  utl: '/api/users.json',
  cache: myCache
});
Copy after login

A small demo: define a cache service, Dependency injection into the controller you want to use, directly use

define([   'angularModule'],function(app){
    app.factory('myCache', ['$cacheFactory', function($cacheFactory){        return $cacheFactory('myCache');  //自定义一个缓存服务    }])
});
Copy after login
        //自定义缓存,有缓存就从缓存里取,否则就发送请求
        if(myCache.get('cacheData')){
            console.log(myCache.get('cacheData'));
        }else{
            helloService.play(myCache).then(                function (data) {
                    myCache.put("cacheData", data);
                    console.log(data);
                }
            );
        }
Copy after login
            cache:只是为了可以使用默认$http的缓存机制
            play : function (myCache) {                return httpRequestService.request({
                    method : 'get',
                    url : 'http://localhost:8080/hello/play',
                    cache : myCache
                })
            }
Copy after login

Now, $http will use its own defined cache instead of the default cache.

4. Set the default cache for $http

It is not convenient to pass it a cache instance every time we want to initiate a $http request, especially is when using the same cache for every request.

其实可以在模块的 .config() 方法中通过 $httpProvider 设置 $http 默认使用的缓存对象。

angular.module('myApp', []).config(function($httpProvider) {
  $httpProvider.defaults.cache = $cacheFactory('myCache', {capacity: 20});
});
Copy after login

这个 $http 服务不再使用它为我们创建的默认缓存;它会使用我们自定义的缓存,实际上这就是一个近期缓存最久未使用算法① (Least Recently Used,LRU)。

LRU缓存根据缓存容量只保留最新的缓存数目。也就是说,我们的缓存容量为20,因此会缓存前20个请求,但是进入第21个请求时,最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护,哪些要移除。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

知名的网站前端布局分析

在前端中的html基础知识 
vue插件实现移动端轮播图

The above is the detailed content of Detailed explanation of angularjs cache. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Where are video files stored in browser cache? Where are video files stored in browser cache? Feb 19, 2024 pm 05:09 PM

Which folder does the browser cache the video in? When we use the Internet browser every day, we often watch various online videos, such as watching music videos on YouTube or watching movies on Netflix. These videos will be cached by the browser during the loading process so that they can be loaded quickly when played again in the future. So the question is, in which folder are these cached videos actually stored? Different browsers store cached video folders in different locations. Below we will introduce several common browsers and their

How to view and refresh dns cache in Linux How to view and refresh dns cache in Linux Mar 07, 2024 am 08:43 AM

DNS (DomainNameSystem) is a system used on the Internet to convert domain names into corresponding IP addresses. In Linux systems, DNS caching is a mechanism that stores the mapping relationship between domain names and IP addresses locally, which can increase the speed of domain name resolution and reduce the burden on the DNS server. DNS caching allows the system to quickly retrieve the IP address when subsequently accessing the same domain name without having to issue a query request to the DNS server each time, thereby improving network performance and efficiency. This article will discuss with you how to view and refresh the DNS cache on Linux, as well as related details and sample code. Importance of DNS Caching In Linux systems, DNS caching plays a key role. its existence

Speed ​​up your applications: A simple guide to Guava caching Speed ​​up your applications: A simple guide to Guava caching Jan 31, 2024 pm 09:11 PM

A Beginner's Guide to Guava Cache: Speed ​​Up Your Applications Guava Cache is a high-performance in-memory caching library that can significantly improve application performance. It provides a variety of caching strategies, including LRU (least recently used), LFU (least recently used), and TTL (time to live). 1. Install Guava cache and add the dependency of Guava cache library to your project. com.goog

Will HTML files be cached? Will HTML files be cached? Feb 19, 2024 pm 01:51 PM

Title: Caching mechanism and code examples of HTML files Introduction: When writing web pages, we often encounter browser cache problems. This article will introduce the caching mechanism of HTML files in detail and provide some specific code examples to help readers better understand and apply this mechanism. 1. Browser caching principle In the browser, whenever a web page is accessed, the browser will first check whether there is a copy of the web page in the cache. If there is, the web page content is obtained directly from the cache. This is the basic principle of browser caching. Benefits of browser caching mechanism

Advanced Usage of PHP APCu: Unlocking the Hidden Power Advanced Usage of PHP APCu: Unlocking the Hidden Power Mar 01, 2024 pm 09:10 PM

PHPAPCu (replacement of php cache) is an opcode cache and data cache module that accelerates PHP applications. Understanding its advanced features is crucial to utilizing its full potential. 1. Batch operation: APCu provides a batch operation method that can process a large number of key-value pairs at the same time. This is useful for large-scale cache clearing or updates. //Get cache keys in batches $values=apcu_fetch(["key1","key2","key3"]); //Clear cache keys in batches apcu_delete(["key1","key2","key3"]);2 .Set cache expiration time: APCu allows you to set an expiration time for cache items so that they automatically expire after a specified time.

The relationship between CPU, memory and cache is explained in detail! The relationship between CPU, memory and cache is explained in detail! Mar 07, 2024 am 08:30 AM

There is a close interaction between the CPU (central processing unit), memory (random access memory), and cache, which together form a critical component of a computer system. The coordination between them ensures the normal operation and efficient performance of the computer. As the brain of the computer, the CPU is responsible for executing various instructions and data processing; the memory is used to temporarily store data and programs, providing fast read and write access speeds; and the cache plays a buffering role, speeding up data access speed and improving The computer's CPU is the core component of the computer and is responsible for executing various instructions, arithmetic operations, and logical operations. It is called the "brain" of the computer and plays an important role in processing data and performing tasks. Memory is an important storage device in a computer.

How to save video files from browser cache to local How to save video files from browser cache to local Feb 23, 2024 pm 06:45 PM

How to Export Browser Cache Videos With the rapid development of the Internet, videos have become an indispensable part of people's daily lives. When browsing the web, we often encounter video content that we want to save or share, but sometimes we cannot find the source of the video files because they may only exist in the browser's cache. So, how do you export videos from your browser cache? This article will introduce you to several common methods. First, we need to clarify a concept, namely browser cache. The browser cache is used by the browser to improve user experience.

Caching mechanism and application practice in PHP development Caching mechanism and application practice in PHP development May 09, 2024 pm 01:30 PM

In PHP development, the caching mechanism improves performance by temporarily storing frequently accessed data in memory or disk, thereby reducing the number of database accesses. Cache types mainly include memory, file and database cache. Caching can be implemented in PHP using built-in functions or third-party libraries, such as cache_get() and Memcache. Common practical applications include caching database query results to optimize query performance and caching page output to speed up rendering. The caching mechanism effectively improves website response speed, enhances user experience and reduces server load.

See all articles