npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-http-etag

v2.0.18

Published

Angular module for easy ETag-based caching of $http responses

Downloads

564

Readme

Angular HTTP ETag

GitHub release npm npm JS style
Travis Code Climate Code Climate David David

Tested: IE 9+; Edge 13; Chrome 29, 50+; Firefox 46+; Safari 7+; iOS 9.2+; Android 4.4, 5.1.


Easy ETag-based caching for $http service requests! Increase responsiveness, decrease bandwidth usage.

  • Caches ETag headers and sends them back to the server in the If-None-Match header.
  • Caches response data with flexible cache configuration.
  • Support for $cacheFactory, sessionStorage, and localStorage caches out-of-the-box.
  • Easily adaptable for other third-party cache services.
  • Compatible with AngularJS 1.2–1.6.

Example Usage:

angular
  .module('myApp', [
    'http-etag'
  ])
  .config(function (httpEtagProvider) {
    httpEtagProvider
      .defineCache('persistentCache', {
        cacheService: 'localStorage'
      })
  })

  .controller('MyCtrl', function ($http) {
    var self = this

    $http
      .get('/my_data.json', {
        etagCache: 'persistentCache'
      })
      .then(function success (response, itemCache) {
        var data = response.data
        // Modify the data from the server
        data._fullName = data.first_name + ' ' + data.last_name
        // Update the cache with the modified data
        itemCache.set(data)
        // Assign to controller property
        self.fullName = data._fullName
      }, function error (response) {
        if (response.status != 304) alert('Request error')
      })
      // Synchronous method called if request was previously cached
      // status == 'cached'; headers === undefined;
      .ifCached(function (response, itemCache) {
        self.fullName = data._fullName
      })
  })

Need more information on how ETags work? Read this.

Detailed Documentation

Quick Guide

Install Module

$ npm install angular-http-etag

Or download from master/release

Include Dependency

Include 'http-etag' in your module's dependencies.

// The node module exports the string 'http-etag'...
angular.module('myApp', [
  require('angular-http-etag')
])
// ... otherwise, include the code first then the module name
angular.module('myApp', [
  'http-etag'
])

Define Caches

.config(function ('httpEtagProvider') {
  httpEtagProvider
    .defineCache('persistentCache', {
      cacheService: 'localStorage'
    })
    .defineCache('sessionCache', {
      cacheService: 'sessionStorage'
    })
    .defineCache('memoryCache', {
      cacheService: '$cacheFactory',
      cacheOptions: {
        number: 50 // LRU cache
      },
      deepCopy: true // $cacheFactory copies by reference by default
    })
})

If you so desire, you can define your own caches. The default cache uses $cacheFactory and is limited to 25 cache items (Least Recently Used algorithm).

Define the caches you'd like to use by using defineCache(cacheId[, config]), passing a cache ID followed by the cache configuration. The configuration you pass will extend the default configuration, which can be set using the setDefaultCacheConfig(config) method. If you don't pass a config, a new cache will be defined using the default config.

See more in the Service Provider documentation.

Cache Requests

Using the default cache with default configuration and an automatically generated cache itemKey based on the request:

$http.get('/data', {
    etagCache: true
  })
  .then(responseHandler)
  .ifCached(responseHandler)

function responseHandler (response, itemCache) {
  // Differentiating between cached and successful request responses
  var isCached = response.status === 'cached'

  // itemCache is a cache object bound to the cache item associated with this request.
  itemCache.info()
  // { id: 'httpEtagCache',
  //   itemKey: '/data',
  //   deepCopy: false,
  //   cacheResponseData: true,
  //   cacheService: '$cacheFactory',
  //   cacheOptions: { number: 25 } }
}

Using a defined cache from the previous section and an automatically generated cache itemKey:

$http.get('/data', {
    etagCache: 'persistentCache'
  })
  .then(responseHandler)
  .ifCached(responseHandler)

function responseHandler (response, itemCache) {
  itemCache.info()
  // { id: 'persistentCache',
  //   itemKey: '/data',
  //   deepCopy: false,
  //   cacheResponseData: true,
  //   cacheService: 'localStorage',
  //   cacheOptions: { number: 25 } }
}

Using a defined cache and a specified key for the cache item:

$http.get('/data', {
    etagCache: {
      id: 'persistentCache',
      itemKey: 'whatFineKeyYouHave'
    }
  })
  .then(responseHandler)
  .ifCached(responseHandler)

function responseHandler (response, itemCache) {
  itemCache.info()
  // { id: 'persistentCache',
  //   itemKey: 'whatFineKeyYouHave',
  //   deepCopy: false,
  //   cacheResponseData: true,
  //   cacheService: 'localStorage',
  //   cacheOptions: { number: 25 } }
}

The etagCache property also accepts a function that returns on of the values demonstrated; a boolean, a string, or an object.

See more in the $http Decorator and Service documentation.

Contributing

Write an issue. Then, possibly, hopefully...

  1. Fork the repo.
  2. Make a branch.
  3. Write the code.
  4. Write the tests.
  5. Run tests. (npm test)
  6. Open a pull request.