Angularjs cache and cache cleanup, angularjs cache cleanup

Angularjs cache and cache cleanup, angularjs cache cleanup

Preface: This blog post is composed of two articles, which detail cache and cache cleanup in Angularjs. The article is reposted by Shanghai shangxue. You are welcome to read and comment. Please indicate the source for reprinting. Thank you!

 

 

A cache is a component that transparently stores data so that it can serve requests more quickly. Repeated resource acquisition may result in data duplication and time consumption. Therefore, the cache is suitable for some data with little variability. The more requests the cache can serve, the higher the overall system performance.
 

1. $ cacheFactory Introduction

$ CacheFactory is a service that generates cache objects for all Angular services. Internally, $ cacheFactory creates a default cache object even if it is not displayed.

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

var cache = $cacheFactory('myCache');

The $ cacheFactory method can accept two parameters:

CacheId (string): This cacheId is the ID name used to create the cache. You can use the cache name to reference the get () method.

Capacity: this capacity describes the maximum number of cache key-value pairs to be stored and stored in the cache at any given time.

 

2. cache objects

The cache object itself has the following methods to interact with the cache.

Info (): the ID, size, and options of the cached object are returned by the info () method.

Put (): The put () method allows us to put keys (strings) in the form of any JavaScript Object values into the cache. Cache. put ("hello", "world ");

The put () method returns the value in the cache.

Get (): The get () method allows us to access the cache value corresponding to a key. If this key is found, it returns its value; if it is not found, it returns undefined. Cache. get ("hello ");

The remove (): remove () function is used to remove a key-value pair from the cache. If not found, it will return 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

The $ http () method allows us to pass a cache parameter. The default $ http cache is especially useful when data does not change frequently. The default $ http cache object is var cache = $ cacheFactory ('$ http'). You can set it like this.

 

$http({     method: 'GET',     url: 'api/user.json',     cache: true})

The cached key value is url, var userCache = cache. get ('api/user. json ')

4. Custom Cache

It is also easy to initiate a request for $ http through a custom cache. You only need to set the cache value to the name of the corresponding cache object.

 

$http({     method: 'GET',     url: 'api/user.json',     cache: myCache})

 

You can also use config configuration to set the cache object for each $ http request without adding the configuration to each $ http request as in the preceding example.

app.config(function($httpProvider){    $httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

 

Among them, capacity will use the "recently used cache Algorithm for the longest time", that is, if the cache capacity is 20, 20 are already cached. When 21st want to be cached, the minimum unused cache key-value pairs are cleared to free up space for 21st caches.

Let's talk about this first. Next, let's take a look at [Shanghai frontend training] cache cleanup in Angularjs.

I. Clear template Cache

 

[Javascript]View plain copy

1. . Run (function ($ rootScope, $ templateCache ){
2. $ RootScope. $ on ('$ routeChangeStart', function (event, next, current ){
3. If (typeof (current )! = 'Undefined '){
4. $ TemplateCache. remove (current. templateUrl );
5. }
6. });
7. });
8. Shanghai frontend training shsxt.com/html5

Ii. Add random parameters to html

 

[Javascript]View plain copy

1. . State ("content ",{
2. Url :"/",
3. Views :{
4. "BodyInfo": {templateUrl: 'tpls/bodyInfo.html? '++ New Date (),
5. Controller: 'bodyinfoctrl '},
6. "Header": {templateUrl: 'tpls/header.html? '++ New Date (),
7. Controller: 'headerctrl'
8. },
9. "Footer": {templateUrl: 'tpls/footer.html? '++ New Date (),
10. Controller: 'footerctrl'
11. }
12. }
13. })

[Html]View plain copy

1. <Link rel = "stylesheet" href = "stylesheets/main.css? Version = 1.0.3 ">

3. Clear the route Cache

 

[Javascript]View plain copy

1. . Config (['$ stateProvider', '$ urlRouterProvider', '$ locationProvider', '$ httpProvider', function ($ stateProvider, $ urlRouterProvider, $ locationProvider, $ httpProvider ){
2. // $ UrlRouterProvider. when ("", "/home ");
3. $ UrlRouterProvider. otherwise ('/');
4. If (! $ HttpProvider. defaults. headers. get ){
5. $ HttpProvider. defaults. headers. get = {};
6. }
7. $ HttpProvider. defaults. headers. common ["X-Requested-With"] = 'xmlhttprequest ';
8. $ HttpProvider. defaults. headers. get ['cache-control'] = 'no-cache ';
9. $ HttpProvider. defaults. headers. get ['pragm'] = 'no-cache ';
10. Shanghai frontend training shsxt.com/html5

For the cache introduction in Angularjs, we recommend that you read [Shanghai frontend training] cache in Angularjs. For more front-end technical articles, clickShanghai frontend Training