diff --git a/Rakefile b/Rakefile index fff9ce1c53f5..3fc7fd49fd7b 100644 --- a/Rakefile +++ b/Rakefile @@ -16,6 +16,7 @@ ANGULAR = [ 'src/filters.js', 'src/formatters.js', 'src/validators.js', + 'src/service/cacheFactory.js', 'src/service/cookieStore.js', 'src/service/cookies.js', 'src/service/defer.js', diff --git a/src/Browser.js b/src/Browser.js index 554397626031..3f507075865a 100644 --- a/src/Browser.js +++ b/src/Browser.js @@ -7,11 +7,7 @@ var XHR = window.XMLHttpRequest || function () { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e3) {} throw new Error("This browser does not support XMLHttpRequest."); }; -var XHR_HEADERS = { - "Content-Type": "application/x-www-form-urlencoded", - "Accept": "application/json, text/plain, */*", - "X-Requested-With": "XMLHttpRequest" -}; + /** * @private @@ -103,7 +99,7 @@ function Browser(window, document, body, XHR, $log) { } else { var xhr = new XHR(); xhr.open(method, url, true); - forEach(extend(XHR_HEADERS, headers || {}), function(value, key){ + forEach(headers, function(value, key){ if (value) xhr.setRequestHeader(key, value); }); xhr.onreadystatechange = function() { diff --git a/src/angular-bootstrap.js b/src/angular-bootstrap.js index 946968abf7ba..80d665204a20 100644 --- a/src/angular-bootstrap.js +++ b/src/angular-bootstrap.js @@ -119,6 +119,7 @@ // Extension points + 'service/cacheFactory.js', 'service/cookieStore.js', 'service/cookies.js', 'service/defer.js', diff --git a/src/service/cacheFactory.js b/src/service/cacheFactory.js new file mode 100644 index 000000000000..42d36d5f0293 --- /dev/null +++ b/src/service/cacheFactory.js @@ -0,0 +1,151 @@ +/** + * @workInProgress + * @ngdoc service + * @name angular.service.$cacheFactory + * + * @description + * Factory that constructs cache objects. + * + * + * @param {string} cacheId Name or id of the newly created cache. + * @param {object=} options Options object that specifies the cache behavior. Properties: + * + * - `{number=}` `capacity` — turns the cache into LRU cache. + * + * @returns {object} Newly created cache object with the following set of methods: + * + * - `{string}` `id()` — Returns id or name of the cache. + * - `{number}` `size()` — Returns number of items currently in the cache + * - `{void}` `put({string} key, {*} value)` — Puts a new key-value pair into the cache + * - `{(*}} `get({string} key) — Returns cached value for `key` or undefined for cache miss. + * - `{void}` `remove{string} key) — Removes a key-value pair from the cache. + * - `{void}` `removeAll() — Removes all cached values. + * + */ +angularServiceInject('$cacheFactory', function() { + + var caches = {}; + + function cacheFactory(cacheId, options) { + if (cacheId in caches) { + throw Error('cacheId ' + cacheId + ' taken'); + } + + var size = 0, + stats = extend({}, options, {id: cacheId}), + data = {}, + capacity = (options && options.capacity) || Number.MAX_VALUE, + lruHash = {}, + freshEnd = null, + staleEnd = null; + + return caches[cacheId] = { + + put: function(key, value) { + var lruEntry = lruHash[key] || (lruHash[key] = {key: key}); + + refresh(lruEntry); + + if (isUndefined(value)) return; + if (!(key in data)) size++; + data[key] = value; + + if (size > capacity) { + this.remove(staleEnd.key); + } + }, + + + get: function(key) { + var lruEntry = lruHash[key]; + + if (!lruEntry) return; + + refresh(lruEntry); + + return data[key]; + }, + + + remove: function(key) { + var lruEntry = lruHash[key]; + + if (lruEntry == freshEnd) freshEnd = lruEntry.p; + if (lruEntry == staleEnd) staleEnd = lruEntry.n; + link(lruEntry.n,lruEntry.p); + + delete lruHash[key]; + delete data[key]; + size--; + }, + + + removeAll: function() { + data = {}; + size = 0; + lruHash = {}; + freshEnd = staleEnd = null; + }, + + + destroy: function() { + data = null; + stats = null; + lruHash = null; + delete caches[cacheId]; + }, + + + info: function() { + return extend({}, stats, {size: size}); + } + } + + + /** + * makes the `entry` the freshEnd of the LRU linked list + */ + function refresh(entry) { + if (entry != freshEnd) { + if (!staleEnd) { + staleEnd = entry; + } else if (staleEnd == entry) { + staleEnd = entry.n; + } + + link(entry.n, entry.p); + link(entry, freshEnd); + freshEnd = entry; + freshEnd.n = null; + } + } + + + /** + * bydirectionally links two entries of the LRU linked list + */ + function link(nextEntry, prevEntry) { + if (nextEntry != prevEntry) { + if (nextEntry) nextEntry.p = prevEntry; //p stands for previous, 'prev' didn't minify + if (prevEntry) prevEntry.n = nextEntry; //n stands for next, 'next' didn't minify + } + } + } + + + cacheFactory.info = function() { + var info = {}; + forEach(caches, function(cache, cacheId) { + info[cacheId] = cache.info(); + }); + return info; + } + + + cacheFactory.get = function(cacheId) { + return caches[cacheId]; + } + + + return cacheFactory; +}); diff --git a/src/service/xhr.js b/src/service/xhr.js index 18f695e6751d..42682b7b5296 100644 --- a/src/service/xhr.js +++ b/src/service/xhr.js @@ -126,7 +126,7 @@ */ angularServiceInject('$xhr', function($browser, $error, $log, $updateView){ - return function(method, url, post, callback){ + function xhr(method, url, post, callback){ if (isFunction(post)) { callback = post; post = null; @@ -137,12 +137,6 @@ angularServiceInject('$xhr', function($browser, $error, $log, $updateView){ $browser.xhr(method, url, post, function(code, response){ try { - if (isString(response)) { - if (response.match(/^\)\]\}',\n/)) response=response.substr(6); - if (/^\s*[\[\{]/.exec(response) && /[\}\]]\s*$/.exec(response)) { - response = fromJson(response, true); - } - } if (200 <= code && code < 300) { callback(code, response); } else { @@ -155,8 +149,39 @@ angularServiceInject('$xhr', function($browser, $error, $log, $updateView){ } finally { $updateView(); } - }, { + }, extend({}, xhr.defaults.request.headers, { 'X-XSRF-TOKEN': $browser.cookies()['XSRF-TOKEN'] - }); + })); }; + + + xhr.defaults = { + request:{ + headers: { + "Content-Type": "application/x-www-form-urlencoded", + "Accept": "application/json, text/plain, */*", + "X-Requested-With": "XMLHttpRequest" + }, + filters: [] //xsrf + }, + + response: { + filters: [jsonSec, jsonDeser] + } + } + + + function jsonSec(response) { + if (response.match(/^\)\]\}',\n/)) return response.substr(6); + } + + function jsonDeser(response) { + if (/^\s*[\[\{]/.exec(response) && /[\}\]]\s*$/.exec(response)) { + return fromJson(response, true); + } + } + + + return xhr; + }, ['$browser', '$xhr.error', '$log', '$updateView']); diff --git a/src/widgets.js b/src/widgets.js index 6d5ffe65267f..20955f5ef3aa 100644 --- a/src/widgets.js +++ b/src/widgets.js @@ -1059,9 +1059,12 @@ angularWidget('ng:view', function(element) { if (!element[0]['ng:compiled']) { element[0]['ng:compiled'] = true; - return injectService(['$xhr.cache', '$route'], function($xhr, $route, element){ - var parentScope = this, - childScope; + return injectService(['$xhr', '$route', '$cacheFactory', '$defer'], + function($xhr, $route, $cacheFactory, $defer, element){ + var templateCache = $cacheFactory('ng:view'), + parentScope = this, + childScope, + template; $route.onChange(function(){ var src; @@ -1072,11 +1075,19 @@ angularWidget('ng:view', function(element) { } if (src) { - //xhr's callback must be async, see commit history for more info - $xhr('GET', src, function(code, response){ - element.html(response); - compiler.compile(element)(childScope); - }); + if (template = templateCache.get(src)) { + //this must be async see 9bd2c396 for more info + $defer(function() { + element.html(template); + compiler.compile(element)(childScope); + }); + } else { + $xhr('GET', src, function(code, response){ + templateCache.put(src, response); + element.html(response); + compiler.compile(element)(childScope); + }); + } } else { element.html(''); } diff --git a/test/BrowserSpecs.js b/test/BrowserSpecs.js index 3b5a9ba03651..9c74021584e1 100644 --- a/test/BrowserSpecs.js +++ b/test/BrowserSpecs.js @@ -109,12 +109,7 @@ describe('browser', function(){ expect(xhr.method).toEqual('METHOD'); expect(xhr.url).toEqual('URL'); expect(xhr.post).toEqual('POST'); - expect(xhr.headers).toEqual({ - "Content-Type": "application/x-www-form-urlencoded", - "Accept": "application/json, text/plain, */*", - "X-Requested-With": "XMLHttpRequest", - "X-header":"value" - }); + expect(xhr.headers).toEqual({"X-header":"value"}); xhr.status = 202; xhr.responseText = 'RESPONSE'; diff --git a/test/service/cacheFactorySpec.js b/test/service/cacheFactorySpec.js new file mode 100644 index 000000000000..f0af9b443539 --- /dev/null +++ b/test/service/cacheFactorySpec.js @@ -0,0 +1,325 @@ +describe('$cacheFactory', function() { + + var scope, $cacheFactory; + + beforeEach(function() { + scope = angular.scope(); + $cacheFactory = scope.$service('$cacheFactory'); + }); + + + it('should be injected', function() { + expect($cacheFactory).toBeDefined(); + }); + + + it('should return a new cache whenever called', function() { + var cache1 = $cacheFactory('cache1'); + var cache2 = $cacheFactory('cache2'); + expect(cache1).not.toEqual(cache2); + }); + + + it('should complain if the cache id is being reused', function() { + $cacheFactory('cache1'); + expect(function() {$cacheFactory('cache1')}). + toThrow('cacheId cache1 taken'); + }); + + + describe('info', function() { + + it('should provide info about all created caches', function() { + expect($cacheFactory.info()).toEqual({}); + + var cache1 = $cacheFactory('cache1'); + expect($cacheFactory.info()).toEqual({cache1: {id: 'cache1', size: 0}}); + + cache1.put('foo', 'bar'); + expect($cacheFactory.info()).toEqual({cache1: {id: 'cache1', size: 1}}); + }); + }); + + + describe('get', function() { + + it('should return a cache if looked up by id', function() { + var cache1 = $cacheFactory('cache1'), + cache2 = $cacheFactory('cache2'); + + expect(cache1).not.toBe(cache2); + expect(cache1).toBe($cacheFactory.get('cache1')); + expect(cache2).toBe($cacheFactory.get('cache2')); + }); + }); + + describe('cache', function() { + var cache; + + beforeEach(function() { + cache = $cacheFactory('test'); + }); + + + describe('put, get & remove', function() { + + it('should add cache entries via add and retrieve them via get', function() { + cache.put('key1', 'bar'); + cache.put('key2', {bar:'baz'}); + + expect(cache.get('key2')).toEqual({bar:'baz'}); + expect(cache.get('key1')).toBe('bar'); + }); + + + it('should ignore put if the value is undefined', function() { + cache.put(); + cache.put('key1'); + cache.put('key2', undefined); + + expect(cache.info().size).toBe(0); + }); + + + it('should remove entries via remove', function() { + cache.put('k1', 'foo'); + cache.put('k2', 'bar'); + + cache.remove('k2'); + + expect(cache.get('k1')).toBe('foo'); + expect(cache.get('k2')).toBeUndefined(); + + cache.remove('k1'); + + expect(cache.get('k1')).toBeUndefined(); + expect(cache.get('k2')).toBeUndefined(); + }); + + + it('should stringify keys', function() { + cache.put('123', 'foo'); + cache.put(123, 'bar'); + + expect(cache.get('123')).toBe('bar'); + expect(cache.info().size).toBe(1); + + cache.remove(123); + expect(cache.info().size).toBe(0); + }) + }); + + + describe('info', function() { + + it('should size increment with put and decrement with remove', function() { + expect(cache.info().size).toBe(0); + + cache.put('foo', 'bar'); + expect(cache.info().size).toBe(1); + + cache.put('baz', 'boo'); + expect(cache.info().size).toBe(2); + + cache.remove('baz'); + expect(cache.info().size).toBe(1); + + cache.remove('foo'); + expect(cache.info().size).toBe(0); + }); + + + it('should return cache id', function() { + expect(cache.info().id).toBe('test'); + }) + }); + + + describe('removeAll', function() { + + it('should blow away all data', function() { + cache.put('id1', 1); + cache.put('id2', 2); + cache.put('id3', 3); + expect(cache.info().size).toBe(3); + + cache.removeAll(); + + expect(cache.info().size).toBe(0); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBeUndefined(); + expect(cache.get('id3')).toBeUndefined(); + }); + }); + + + describe('destroy', function() { + + it('should make the cache unusable and remove references to it from $cacheFactory', function() { + cache.put('foo', 'bar'); + cache.destroy(); + + expect(function() { cache.get('foo') } ).toThrow(); + expect(function() { cache.get('neverexisted') }).toThrow(); + expect(function() { cache.put('foo', 'bar') }).toThrow(); + + expect($cacheFactory.get('test')).toBeUndefined(); + expect($cacheFactory.info()).toEqual({}); + }); + }); + }); + + + describe('LRU cache', function() { + + it('should create cache with defined capacity', function() { + cache = $cacheFactory('cache1', {capacity: 5}); + expect(cache.info().size).toBe(0); + + for (var i=0; i<5; i++) { + cache.put('id' + i, i); + } + + expect(cache.info().size).toBe(5); + + cache.put('id5', 5); + expect(cache.info().size).toBe(5); + cache.put('id6', 6); + expect(cache.info().size).toBe(5); + }); + + + describe('eviction', function() { + + beforeEach(function() { + cache = $cacheFactory('cache1', {capacity: 2}); + + cache.put('id0', 0); + cache.put('id1', 1); + }); + + + it('should kick out the first entry on put', function() { + cache.put('id2', 2); + expect(cache.get('id0')).toBeUndefined(); + expect(cache.get('id1')).toBe(1); + expect(cache.get('id2')).toBe(2); + }); + + + it('should refresh an entry via get', function() { + cache.get('id0'); + cache.put('id2', 2); + expect(cache.get('id0')).toBe(0); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBe(2); + }); + + + it('should refresh an entry via put', function() { + cache.put('id0', '00'); + cache.put('id2', 2); + expect(cache.get('id0')).toBe('00'); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBe(2); + }); + + + it('should not purge an entry if another one was removed', function() { + cache.remove('id1'); + cache.put('id2', 2); + expect(cache.get('id0')).toBe(0); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBe(2); + }); + + + it('should purge the next entry if the stalest one was removed', function() { + cache.remove('id0'); + cache.put('id2', 2); + cache.put('id3', 3); + expect(cache.get('id0')).toBeUndefined(); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBe(2); + expect(cache.get('id3')).toBe(3); + }); + + + it('should correctly recreate the linked list if all cache entries were removed', function() { + cache.remove('id0'); + cache.remove('id1'); + cache.put('id2', 2); + cache.put('id3', 3); + cache.put('id4', 4); + expect(cache.get('id0')).toBeUndefined(); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBeUndefined(); + expect(cache.get('id3')).toBe(3); + expect(cache.get('id4')).toBe(4); + }); + + + it('should blow away the entire cache via removeAll and start evicting when full', function() { + cache.put('id0', 0); + cache.put('id1', 1); + cache.removeAll(); + + cache.put('id2', 2); + cache.put('id3', 3); + cache.put('id4', 4); + + expect(cache.info().size).toBe(2); + expect(cache.get('id0')).toBeUndefined(); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBeUndefined(); + expect(cache.get('id3')).toBe(3); + expect(cache.get('id4')).toBe(4); + }); + + + it('should correctly refresh and evict items if operations are chained', function() { + cache = $cacheFactory('cache2', {capacity: 3}); + + cache.put('id0', 0); //0 + cache.put('id1', 1); //1,0 + cache.put('id2', 2); //2,1,0 + cache.get('id0'); //0,2,1 + cache.put('id3', 3); //3,0,2 + cache.put('id0', 9); //0,3,2 + cache.put('id4', 4); //4,0,3 + + expect(cache.get('id3')).toBe(3); + expect(cache.get('id0')).toBe(9); + expect(cache.get('id4')).toBe(4); + + cache.remove('id0'); //4,3 + cache.remove('id3'); //4 + cache.put('id5', 5); //5,4 + cache.put('id6', 6); //6,5,4 + cache.get('id4'); //4,6,5 + cache.put('id7', 7); //7,4,6 + + expect(cache.get('id0')).toBeUndefined(); + expect(cache.get('id1')).toBeUndefined(); + expect(cache.get('id2')).toBeUndefined(); + expect(cache.get('id3')).toBeUndefined(); + expect(cache.get('id4')).toBe(4); + expect(cache.get('id5')).toBeUndefined(); + expect(cache.get('id6')).toBe(6); + expect(cache.get('id7')).toBe(7); + + cache.removeAll(); + cache.put('id0', 0); //0 + cache.put('id1', 1); //1,0 + cache.put('id2', 2); //2,1,0 + cache.put('id3', 3); //3,2,1 + + expect(cache.info().size).toBe(3); + expect(cache.get('id0')).toBeUndefined(); + expect(cache.get('id1')).toBe(1); + expect(cache.get('id2')).toBe(2); + expect(cache.get('id3')).toBe(3); + }); + }); + }); +});