feat($http): new $http service, removing $xhr.*

Features:
- aborting requests
- more flexible callbacks (per status code)
- custom request headers (per request)
- access to response headers
- custom transform functions (both request, response)
- caching
- shortcut methods (get, head, post, put, delete, patch, jsonp)
- exposing pendingCount()
- setting timeout
Breaks Renaming $xhr to $http
Breaks Takes one parameter now - configuration object
Breaks $xhr.cache removed - use configuration cache: true instead
Breaks $xhr.error, $xhr.bulk removed
Breaks Callback functions get parameters: response, status, headers
Closes #38
Closes #80
Closes #180
Closes #299
Closes #342
Closes #395
Closes #413
Closes #414
Closes #507

7 files changed, 495 insertions, 513 deletions

diff --git a/src/AngularPublic.js b/src/AngularPublic.js
index 577c29ee..df309189 100644
--- a/src/AngularPublic.js
+++ b/src/AngularPublic.js
@@ -77,6 +77,7 @@ function ngModule($provide, $injector) {
   $provide.service('$exceptionHandler', $ExceptionHandlerProvider);
   $provide.service('$filter', $FilterProvider);
   $provide.service('$formFactory', $FormFactoryProvider);
+  $provide.service('$http', $HttpProvider);
   $provide.service('$location', $LocationProvider);
   $provide.service('$log', $LogProvider);
   $provide.service('$parse', $ParseProvider);
@@ -86,9 +87,5 @@ function ngModule($provide, $injector) {
   $provide.service('$rootScope', $RootScopeProvider);
   $provide.service('$sniffer', $SnifferProvider);
   $provide.service('$window', $WindowProvider);
-  $provide.service('$xhr.bulk', $XhrBulkProvider);
-  $provide.service('$xhr.cache', $XhrCacheProvider);
-  $provide.service('$xhr.error', $XhrErrorProvider);
-  $provide.service('$xhr', $XhrProvider);
 }
 
diff --git a/src/service/http.js b/src/service/http.js
new file mode 100644
index 00000000..13621f90
--- /dev/null
+++ b/src/service/http.js
@@ -0,0 +1,428 @@
+'use strict';
+
+/**
+ * Parse headers into key value object
+ *
+ * @param {string} headers Raw headers as a string
+ * @returns {Object} Parsed headers as key valu object
+ */
+function parseHeaders(headers) {
+  var parsed = {}, key, val, i;
+
+  forEach(headers.split('\n'), function(line) {
+    i = line.indexOf(':');
+    key = lowercase(trim(line.substr(0, i)));
+    val = trim(line.substr(i + 1));
+
+    if (key) {
+      if (parsed[key]) {
+        parsed[key] += ', ' + val;
+      } else {
+        parsed[key] = val;
+      }
+    }
+  });
+
+  return parsed;
+}
+
+/**
+ * Chain all given functions
+ *
+ * This function is used for both request and response transforming
+ *
+ * @param {*} data Data to transform.
+ * @param {function|Array.<function>} fns Function or an array of functions.
+ * @param {*=} param Optional parameter to be passed to all transform functions.
+ * @returns {*} Transformed data.
+ */
+function transform(data, fns, param) {
+  if (isFunction(fns))
+    return fns(data);
+
+  forEach(fns, function(fn) {
+    data = fn(data, param);
+  });
+
+  return data;
+}
+
+
+/**
+ * @ngdoc object
+ * @name angular.module.ng.$http
+ * @requires $browser
+ * @requires $exceptionHandler
+ * @requires $cacheFactory
+ *
+ * @description
+ */
+function $HttpProvider() {
+  var $config = this.defaults = {
+    // transform in-coming reponse data
+    transformResponse: function(data) {
+      if (isString(data)) {
+        if (/^\)\]\}',\n/.test(data)) data = data.substr(6);
+        if (/^\s*[\[\{]/.test(data) && /[\}\]]\s*$/.test(data))
+          data = fromJson(data, true);
+      }
+      return data;
+    },
+
+    // transform out-going request data
+    transformRequest: function(d) {
+      return isObject(d) ? toJson(d) : d;
+    },
+
+    // default headers
+    headers: {
+      common: {
+        'Accept': 'application/json, text/plain, */*',
+        'X-Requested-With': 'XMLHttpRequest'
+      },
+      post: {'Content-Type': 'application/json'},
+      put:  {'Content-Type': 'application/json'}
+    }
+  };
+
+  this.$get = ['$browser', '$exceptionHandler', '$cacheFactory', '$rootScope',
+      function($browser, $exceptionHandler, $cacheFactory, $rootScope) {
+
+  var cache = $cacheFactory('$http'),
+      pendingRequestsCount = 0;
+
+  // the actual service
+  function $http(config) {
+    return new XhrFuture().retry(config);
+  }
+
+  /**
+   * @workInProgress
+   * @ngdoc method
+   * @name angular.service.$http#pendingCount
+   * @methodOf angular.service.$http
+   *
+   * @description
+   * Return number of pending requests
+   *
+   * @returns {number} Number of pending requests
+   */
+  $http.pendingCount = function() {
+    return pendingRequestsCount;
+  };
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#get
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `GET` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#delete
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `DELETE` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#head
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `HEAD` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#patch
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `PATCH` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#jsonp
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `JSONP` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request.
+   *                     Should contain `JSON_CALLBACK` string.
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+  createShortMethods('get', 'delete', 'head', 'patch', 'jsonp');
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#post
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `POST` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request
+   * @param {*} data Request content
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+
+  /**
+   * @ngdoc method
+   * @name angular.module.ng.$http#put
+   * @methodOf angular.module.ng.$http
+   *
+   * @description
+   * Shortcut method to perform `PUT` request
+   *
+   * @param {string} url Relative or absolute URL specifying the destination of the request
+   * @param {*} data Request content
+   * @param {Object=} config Optional configuration object
+   * @returns {XhrFuture} Future object
+   */
+  createShortMethodsWithData('post', 'put');
+
+  return $http;
+
+  function createShortMethods(names) {
+    forEach(arguments, function(name) {
+      $http[name] = function(url, config) {
+        return $http(extend(config || {}, {
+          method: name,
+          url: url
+        }));
+      };
+    });
+  }
+
+  function createShortMethodsWithData(name) {
+    forEach(arguments, function(name) {
+      $http[name] = function(url, data, config) {
+        return $http(extend(config || {}, {
+          method: name,
+          url: url,
+          data: data
+        }));
+      };
+    });
+  }
+
+  /**
+   * Represents Request object, returned by $http()
+   *
+   * !!! ACCESS CLOSURE VARS: $browser, $config, $log, $rootScope, cache, pendingRequestsCount
+   */
+  function XhrFuture() {
+    var rawRequest, cfg = {}, callbacks = [],
+        defHeaders = $config.headers,
+        parsedHeaders;
+
+    /**
+     * Callback registered to $browser.xhr:
+     *  - caches the response if desired
+     *  - calls fireCallbacks()
+     *  - clears the reference to raw request object
+     */
+    function done(status, response) {
+      // aborted request or jsonp
+      if (!rawRequest) parsedHeaders = {};
+
+      if (cfg.cache && cfg.method == 'GET' && 200 <= status && status < 300) {
+        parsedHeaders = parsedHeaders || parseHeaders(rawRequest.getAllResponseHeaders());
+        cache.put(cfg.url, [status, response, parsedHeaders]);
+      }
+
+      fireCallbacks(response, status);
+      rawRequest = null;
+    }
+
+    /**
+     * Fire all registered callbacks for given status code
+     *
+     * This method when:
+     *  - serving response from real request ($browser.xhr callback)
+     *  - serving response from cache
+     *
+     * It does:
+     *  - transform the response
+     *  - call proper callbacks
+     *  - log errors
+     *  - apply the $scope
+     *  - clear parsed headers
+     */
+    function fireCallbacks(response, status) {
+      // transform the response
+      response = transform(response, cfg.transformResponse || $config.transformResponse, rawRequest);
+
+      var regexp = statusToRegexp(status),
+          pattern, callback;
+
+      pendingRequestsCount--;
+
+      // normalize internal statuses to 0
+      status = Math.max(status, 0);
+      for (var i = 0; i < callbacks.length; i += 2) {
+        pattern = callbacks[i];
+        callback = callbacks[i + 1];
+        if (regexp.test(pattern)) {
+          try {
+            callback(response, status, headers);
+          } catch(e) {
+            $exceptionHandler(e);
+          }
+        }
+      }
+
+      $rootScope.$apply();
+      parsedHeaders = null;
+    }
+
+    /**
+     * Convert given status code number into regexp
+     *
+     * It would be much easier to convert registered statuses (e.g. "2xx") into regexps,
+     * but this has an advantage of creating just one regexp, instead of one regexp per
+     * registered callback. Anyway, probably not big deal.
+     *
+     * @param status
+     * @returns {RegExp}
+     */
+    function statusToRegexp(status) {
+      var strStatus = status + '',
+          regexp = '';
+
+      for (var i = Math.min(0, strStatus.length - 3); i < strStatus.length; i++) {
+        regexp += '(' + (strStatus.charAt(i) || 0) + '|x)';
+      }
+
+      return new RegExp(regexp);
+    }
+
+    /**
+     * This is the third argument in any user callback
+     * @see parseHeaders
+     *
+     * Return single header value or all headers parsed as object.
+     * Headers all lazy parsed when first requested.
+     *
+     * @param {string=} name Name of header
+     * @returns {string|Object}
+     */
+    function headers(name) {
+      if (name) {
+        return parsedHeaders
+          ? parsedHeaders[lowercase(name)] || null
+          : rawRequest.getResponseHeader(name);
+      }
+
+      parsedHeaders = parsedHeaders || parseHeaders(rawRequest.getAllResponseHeaders());
+
+      return parsedHeaders;
+    }
+
+    /**
+     * Retry the request
+     *
+     * @param {Object=} config Optional config object to extend the original configuration
+     * @returns {XhrFuture}
+     */
+    this.retry = function(config) {
+      if (rawRequest) throw 'Can not retry request. Abort pending request first.';
+
+      extend(cfg, config);
+      cfg.method = uppercase(cfg.method);
+
+      var data = transform(cfg.data, cfg.transformRequest || $config.transformRequest),
+          headers = extend({'X-XSRF-TOKEN': $browser.cookies()['XSRF-TOKEN']},
+                           defHeaders.common, defHeaders[lowercase(cfg.method)], cfg.headers);
+
+      var fromCache;
+      if (cfg.cache && cfg.method == 'GET' && (fromCache = cache.get(cfg.url))) {
+        $browser.defer(function() {
+          parsedHeaders = fromCache[2];
+          fireCallbacks(fromCache[1], fromCache[0]);
+        });
+      } else {
+        rawRequest = $browser.xhr(cfg.method, cfg.url, data, done, headers, cfg.timeout);
+      }
+
+      pendingRequestsCount++;
+      return this;
+    };
+
+    /**
+     * Abort the request
+     */
+    this.abort = function() {
+      if (rawRequest) {
+        rawRequest.abort();
+      }
+      return this;
+    };
+
+    /**
+     * Register a callback function based on status code
+     * Note: all matched callbacks will be called, preserving registered order !
+     *
+     * Internal statuses:
+     *  `-2` = jsonp error
+     *  `-1` = timeout
+     *   `0` = aborted
+     *
+     * @example
+     *   .on('2xx', function(){});
+     *   .on('2x1', function(){});
+     *   .on('404', function(){});
+     *   .on('xxx', function(){});
+     *   .on('20x,3xx', function(){});
+     *   .on('success', function(){});
+     *   .on('error', function(){});
+     *   .on('always', function(){});
+     *
+     * @param {string} pattern Status code pattern with "x" for any number
+     * @param {function(*, number, Object)} callback Function to be called when response arrives
+     * @returns {XhrFuture}
+     */
+    this.on = function(pattern, callback) {
+      var alias = {
+        success: '2xx',
+        error: '0-2,0-1,000,4xx,5xx',
+        always: 'xxx',
+        timeout: '0-1',
+        abort: '000'
+      };
+
+      callbacks.push(alias[pattern] || pattern);
+      callbacks.push(callback);
+
+      return this;
+    };
+  }
+}];
+}
+
diff --git a/src/service/xhr.bulk.js b/src/service/xhr.bulk.js
deleted file mode 100644
index fca96dde..00000000
--- a/src/service/xhr.bulk.js
+++ /dev/null
@@ -1,89 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc object
- * @name angular.module.ng.$xhr.bulk
- * @requires $xhr
- * @requires $xhr.error
- * @requires $log
- *
- * @description
- *
- * @example
- */
-function $XhrBulkProvider() {
-  this.$get = ['$rootScope', '$xhr', '$xhr.error', '$log',
-      function( $rootScope,   $xhr,   $error,       $log) {
-    var requests = [];
-    function bulkXHR(method, url, post, success, error) {
-      if (isFunction(post)) {
-        error = success;
-        success = post;
-        post = null;
-      }
-      var currentQueue;
-      forEach(bulkXHR.urls, function(queue){
-        if (isFunction(queue.match) ? queue.match(url) : queue.match.exec(url)) {
-          currentQueue = queue;
-        }
-      });
-      if (currentQueue) {
-        if (!currentQueue.requests) currentQueue.requests = [];
-        var request = {
-            method: method,
-            url: url,
-            data: post,
-            success: success};
-        if (error) request.error = error;
-        currentQueue.requests.push(request);
-      } else {
-        $xhr(method, url, post, success, error);
-      }
-    }
-    bulkXHR.urls = {};
-    bulkXHR.flush = function(success, errorback) {
-      assertArgFn(success = success || noop, 0);
-      assertArgFn(errorback = errorback || noop, 1);
-      forEach(bulkXHR.urls, function(queue, url) {
-        var currentRequests = queue.requests;
-        if (currentRequests && currentRequests.length) {
-          queue.requests = [];
-          queue.callbacks = [];
-          $xhr('POST', url, {requests: currentRequests},
-            function(code, response) {
-              forEach(response, function(response, i) {
-                try {
-                  if (response.status == 200) {
-                    (currentRequests[i].success || noop)(response.status, response.response);
-                  } else if (isFunction(currentRequests[i].error)) {
-                      currentRequests[i].error(response.status, response.response);
-                  } else {
-                    $error(currentRequests[i], response);
-                  }
-                } catch(e) {
-                  $log.error(e);
-                }
-              });
-              success();
-            },
-            function(code, response) {
-              forEach(currentRequests, function(request, i) {
-                try {
-                  if (isFunction(request.error)) {
-                    request.error(code, response);
-                  } else {
-                    $error(request, response);
-                  }
-                } catch(e) {
-                  $log.error(e);
-                }
-              });
-              noop();
-            });
-        }
-      });
-    };
-    $rootScope.$watch(function() { bulkXHR.flush(); });
-    return bulkXHR;
-  }];
-}
diff --git a/src/service/xhr.cache.js b/src/service/xhr.cache.js
deleted file mode 100644
index 8a14ad99..00000000
--- a/src/service/xhr.cache.js
+++ /dev/null
@@ -1,118 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc object
- * @name angular.module.ng.$xhr.cache
- * @function
- *
- * @requires $xhr.bulk
- * @requires $defer
- * @requires $xhr.error
- * @requires $log
- *
- * @description
- * Acts just like the {@link angular.module.ng.$xhr $xhr} service but caches responses for `GET`
- * requests. All cache misses are delegated to the $xhr service.
- *
- * @property {function()} delegate Function to delegate all the cache misses to. Defaults to
- *   the {@link angular.module.ng.$xhr $xhr} service.
- * @property {object} data The hashmap where all cached entries are stored.
- *
- * @param {string} method HTTP method.
- * @param {string} url Destination URL.
- * @param {(string|Object)=} post Request body.
- * @param {function(number, (string|Object))} success Response success callback.
- * @param {function(number, (string|Object))=} error Response error callback.
- * @param {boolean=} [verifyCache=false] If `true` then a result is immediately returned from cache
- *   (if present) while a request is sent to the server for a fresh response that will update the
- *   cached entry. The `success` function will be called when the response is received.
- * @param {boolean=} [sync=false] in case of cache hit execute `success` synchronously.
- */
-function $XhrCacheProvider() {
-  this.$get = ['$xhr.bulk', '$defer', '$xhr.error', '$log',
-       function($xhr,        $defer,   $error,       $log) {
-    var inflight = {};
-    function cache(method, url, post, success, error, verifyCache, sync) {
-      if (isFunction(post)) {
-        if (!isFunction(success)) {
-          verifyCache = success;
-          sync = error;
-          error = null;
-        } else {
-          sync = verifyCache;
-          verifyCache = error;
-          error = success;
-        }
-        success = post;
-        post = null;
-      } else if (!isFunction(error)) {
-        sync = verifyCache;
-        verifyCache = error;
-        error = null;
-      }
-
-      if (method == 'GET') {
-        var data, dataCached;
-        if ((dataCached = cache.data[url])) {
-
-          if (sync) {
-            success(200, copy(dataCached.value));
-          } else {
-            $defer(function() { success(200, copy(dataCached.value)); });
-          }
-
-          if (!verifyCache)
-            return;
-        }
-
-        if ((data = inflight[url])) {
-          data.successes.push(success);
-          data.errors.push(error);
-        } else {
-          inflight[url] = {successes: [success], errors: [error]};
-          cache.delegate(method, url, post,
-            function(status, response) {
-              if (status == 200)
-                cache.data[url] = {value: response};
-              var successes = inflight[url].successes;
-              delete inflight[url];
-              forEach(successes, function(success) {
-                try {
-                  (success||noop)(status, copy(response));
-                } catch(e) {
-                  $log.error(e);
-                }
-              });
-            },
-            function(status, response) {
-              var errors = inflight[url].errors,
-                  successes = inflight[url].successes;
-              delete inflight[url];
-
-              forEach(errors, function(error, i) {
-                try {
-                  if (isFunction(error)) {
-                    error(status, copy(response));
-                  } else {
-                    $error(
-                      {method: method, url: url, data: post, success: successes[i]},
-                      {status: status, body: response});
-                  }
-                } catch(e) {
-                  $log.error(e);
-                }
-              });
-            });
-        }
-
-      } else {
-        cache.data = {};
-        cache.delegate(method, url, post, success, error);
-      }
-    }
-    cache.data = {};
-    cache.delegate = $xhr;
-    return cache;
-  }];
-
-}
diff --git a/src/service/xhr.error.js b/src/service/xhr.error.js
deleted file mode 100644
index 372f97f4..00000000
--- a/src/service/xhr.error.js
+++ /dev/null
@@ -1,44 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc object
- * @name angular.module.ng.$xhr.error
- * @function
- * @requires $log
- *
- * @description
- * Error handler for {@link angular.module.ng.$xhr $xhr service}. An application can replaces this
- * service with one specific for the application. The default implementation logs the error to
- * {@link angular.module.ng.$log $log.error}.
- *
- * @param {Object} request Request object.
- *
- *   The object has the following properties
- *
- *   - `method` – `{string}` – The http request method.
- *   - `url` – `{string}` – The request destination.
- *   - `data` – `{(string|Object)=} – An optional request body.
- *   - `success` – `{function()}` – The success callback function
- *
- * @param {Object} response Response object.
- *
- *   The response object has the following properties:
- *
- *   - status – {number} – Http status code.
- *   - body – {string|Object} – Body of the response.
- *
- * @example
-    <doc:example>
-      <doc:source>
-        fetch a non-existent file and log an error in the console:
-        <button ng:click="$service('$xhr')('GET', '/DOESNT_EXIST')">fetch</button>
-      </doc:source>
-    </doc:example>
- */
-function $XhrErrorProvider() {
-  this.$get = ['$log', function($log) {
-    return function(request, response){
-      $log.error('ERROR: XHR: ' + request.url, request, response);
-    };
-  }];
-}
diff --git a/src/service/xhr.js b/src/service/xhr.js
deleted file mode 100644
index e9421caf..00000000
--- a/src/service/xhr.js
+++ /dev/null
@@ -1,231 +0,0 @@
-'use strict';
-
-/**
- * @ngdoc object
- * @name angular.module.ng.$xhr
- * @function
- * @requires $browser $xhr delegates all XHR requests to the `$browser.xhr()`. A mock version
- *                    of the $browser exists which allows setting expectations on XHR requests
- *                    in your tests
- * @requires $xhr.error $xhr delegates all non `2xx` response code to this service.
- * @requires $log $xhr delegates all exceptions to `$log.error()`.
- *
- * @description
- * Generates an XHR request. The $xhr service delegates all requests to
- * {@link angular.module.ng.$browser $browser.xhr()} and adds error handling and security features.
- * While $xhr service provides nicer api than raw XmlHttpRequest, it is still considered a lower
- * level api in angular. For a higher level abstraction that utilizes `$xhr`, please check out the
- * {@link angular.module.ng.$resource $resource} service.
- *
- * # Error handling
- * If no `error callback` is specified, XHR response with response code other then `2xx` will be
- * delegated to {@link angular.module.ng.$xhr.error $xhr.error}. The `$xhr.error` can intercept the
- * request and process it in application specific way, or resume normal execution by calling the
- * request `success` method.
- *
- * # HTTP Headers
- * The $xhr service will automatically add certain http headers to all requests. These defaults can
- * be fully configured by accessing the `$xhr.defaults.headers` configuration object, which
- * currently contains this default configuration:
- *
- * - `$xhr.defaults.headers.common` (headers that are common for all requests):
- *   - `Accept: application/json, text/plain, *\/*`
- *   - `X-Requested-With: XMLHttpRequest`
- * - `$xhr.defaults.headers.post` (header defaults for HTTP POST requests):
- *   - `Content-Type: application/x-www-form-urlencoded`
- *
- * To add or overwrite these defaults, simple add or remove a property from this configuration
- * object. To add headers for an HTTP method other than POST, simple create a new object with name
- * equal to the lowercased http method name, e.g. `$xhr.defaults.headers.get['My-Header']='value'`.
- *
- *
- * # Security Considerations
- * When designing web applications your design needs to consider security threats from
- * {@link http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx
- * JSON Vulnerability} and {@link http://en.wikipedia.org/wiki/Cross-site_request_forgery XSRF}.
- * Both server and the client must cooperate in order to eliminate these threats. Angular comes
- * pre-configured with strategies that address these issues, but for this to work backend server
- * cooperation is required.
- *
- * ## JSON Vulnerability Protection
- * A {@link http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx
- * JSON Vulnerability} allows third party web-site to turn your JSON resource URL into
- * {@link http://en.wikipedia.org/wiki/JSON#JSONP JSONP} request under some conditions. To
- * counter this your server can prefix all JSON requests with following string `")]}',\n"`.
- * Angular will automatically strip the prefix before processing it as JSON.
- *
- * For example if your server needs to return:
- * <pre>
- * ['one','two']
- * </pre>
- *
- * which is vulnerable to attack, your server can return:
- * <pre>
- * )]}',
- * ['one','two']
- * </pre>
- *
- * angular will strip the prefix, before processing the JSON.
- *
- *
- * ## Cross Site Request Forgery (XSRF) Protection
- * {@link http://en.wikipedia.org/wiki/Cross-site_request_forgery XSRF} is a technique by which an
- * unauthorized site can gain your user's private data. Angular provides following mechanism to
- * counter XSRF. When performing XHR requests, the $xhr service reads a token from a cookie
- * called `XSRF-TOKEN` and sets it as the HTTP header `X-XSRF-TOKEN`. Since only JavaScript that
- * runs on your domain could read the cookie, your server can be assured that the XHR came from
- * JavaScript running on your domain.
- *
- * To take advantage of this, your server needs to set a token in a JavaScript readable session
- * cookie called `XSRF-TOKEN` on first HTTP GET request. On subsequent non-GET requests the server
- * can verify that the cookie matches `X-XSRF-TOKEN` HTTP header, and therefore be sure that only
- * JavaScript running on your domain could have read the token. The token must be unique for each
- * user and must be verifiable by the server (to prevent the JavaScript making up its own tokens).
- * We recommend that the token is a digest of your site's authentication cookie with
- * {@link http://en.wikipedia.org/wiki/Rainbow_table salt for added security}.
- *
- * @param {string} method HTTP method to use. Valid values are: `GET`, `POST`, `PUT`, `DELETE`, and
- *   `JSONP`. `JSONP` is a special case which causes a
- *   [JSONP](http://en.wikipedia.org/wiki/JSON#JSONP) cross domain request using script tag
- *   insertion.
- * @param {string} url Relative or absolute URL specifying the destination of the request.  For
- *   `JSON` requests, `url` should include `JSON_CALLBACK` string to be replaced with a name of an
- *   angular generated callback function.
- * @param {(string|Object)=} post Request content as either a string or an object to be stringified
- *   as JSON before sent to the server.
- * @param {function(number, (string|Object))} success A function to be called when the response is
- *   received. The success function will be called with:
- *
- *   - {number} code [HTTP status code](http://en.wikipedia.org/wiki/List_of_HTTP_status_codes) of
- *     the response. This will currently always be 200, since all non-200 responses are routed to
- *     {@link angular.module.ng.$xhr.error} service (or custom error callback).
- *   - {string|Object} response Response object as string or an Object if the response was in JSON
- *     format.
- * @param {function(number, (string|Object))} error A function to be called if the response code is
- *   not 2xx.. Accepts the same arguments as success, above.
- *
- * @example
-   <doc:example>
-     <doc:source jsfiddle="false">
-       <script>
-         function FetchCntl($xhr) {
-           var self = this;
-           this.url = 'index.html';
-
-           this.fetch = function() {
-             self.code = null;
-             self.response = null;
-
-             $xhr(self.method, self.url, function(code, response) {
-               self.code = code;
-               self.response = response;
-             }, function(code, response) {
-               self.code = code;
-               self.response = response || "Request failed";
-             });
-           };
-
-           this.updateModel = function(method, url) {
-             self.method = method;
-             self.url = url;
-           };
-         }
-         FetchCntl.$inject = ['$xhr'];
-       </script>
-       <div ng:controller="FetchCntl">
-         <select ng:model="method">
-           <option>GET</option>
-           <option>JSONP</option>
-         </select>
-         <input type="text" ng:model="url" size="80"/>
-         <button ng:click="fetch()">fetch</button><br>
-         <button ng:click="updateModel('GET', 'index.html')">Sample GET</button>
-         <button ng:click="updateModel('JSONP', 'http://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super%20Hero')">Sample JSONP</button>
-         <button ng:click="updateModel('JSONP', 'http://angularjs.org/doesntexist&callback=JSON_CALLBACK')">Invalid JSONP</button>
-         <pre>code={{code}}</pre>
-         <pre>response={{response}}</pre>
-       </div>
-     </doc:source>
-     <doc:scenario>
-       it('should make xhr GET request', function() {
-         element(':button:contains("Sample GET")').click();
-         element(':button:contains("fetch")').click();
-         expect(binding('code')).toBe('code=200');
-         expect(binding('response')).toMatch(/angularjs.org/);
-       });
-
-       it('should make JSONP request to the angularjs.org', function() {
-         element(':button:contains("Sample JSONP")').click();
-         element(':button:contains("fetch")').click();
-         expect(binding('code')).toBe('code=200');
-         expect(binding('response')).toMatch(/Super Hero!/);
-       });
-
-       it('should make JSONP request to invalid URL and invoke the error handler',
-           function() {
-         element(':button:contains("Invalid JSONP")').click();
-         element(':button:contains("fetch")').click();
-         expect(binding('code')).toBe('code=-2');
-         expect(binding('response')).toBe('response=Request failed');
-       });
-     </doc:scenario>
-   </doc:example>
- */
-function $XhrProvider() {
-  this.$get = ['$rootScope', '$browser', '$xhr.error', '$log',
-      function( $rootScope,   $browser,   $error,       $log){
-    var xhrHeaderDefaults = {
-      common: {
-        "Accept": "application/json, text/plain, */*",
-        "X-Requested-With": "XMLHttpRequest"
-      },
-      post: {'Content-Type': 'application/x-www-form-urlencoded'},
-      get: {},      // all these empty properties are needed so that client apps can just do:
-      head: {},     // $xhr.defaults.headers.head.foo="bar" without having to create head object
-      put: {},      // it also means that if we add a header for these methods in the future, it
-      'delete': {}, // won't be easily silently lost due to an object assignment.
-      patch: {}
-    };
-
-    function xhr(method, url, post, success, error) {
-      if (isFunction(post)) {
-        error = success;
-        success = post;
-        post = null;
-      }
-      if (post && isObject(post)) {
-        post = toJson(post);
-      }
-
-      $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);
-            }
-          }
-          $rootScope.$apply(function() {
-            if (200 <= code && code < 300) {
-                success(code, response);
-            } else if (isFunction(error)) {
-              error(code, response);
-            } else {
-              $error(
-                {method: method, url: url, data: post, success: success},
-                {status: code, body: response});
-            }
-          });
-        } catch (e) {
-          $log.error(e);
-        }
-      }, extend({'X-XSRF-TOKEN': $browser.cookies()['XSRF-TOKEN']},
-                xhrHeaderDefaults.common,
-                xhrHeaderDefaults[lowercase(method)]));
-    }
-
-    xhr.defaults = {headers: xhrHeaderDefaults};
-
-    return xhr;
-  }];
-}
diff --git a/src/widgets.js b/src/widgets.js
index f6cdb977..fdbc884c 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -90,12 +90,15 @@ angularWidget('ng:include', function(element){
     this.directives(true);
   } else {
     element[0]['ng:compiled'] = true;
-    return ['$xhr.cache', '$autoScroll', '$element', function($xhr, $autoScroll, element) {
+    return ['$http', '$cacheFactory', '$autoScroll', '$element',
+    function($http, $cacheFactory,     $autoScroll,   element) {
       var scope = this,
           changeCounter = 0,
           releaseScopes = [],
           childScope,
-          oldScope;
+          oldScope,
+          // TODO(vojta): configure the cache / extract into $tplCache service ?
+          cache = $cacheFactory.get('templates') || $cacheFactory('templates');
 
       function incrementChange() { changeCounter++;}
       this.$watch(srcExp, incrementChange);
@@ -108,26 +111,42 @@ angularWidget('ng:include', function(element){
       });
       this.$watch(function() {return changeCounter;}, function(scope) {
         var src = scope.$eval(srcExp),
-            useScope = scope.$eval(scopeExp);
+            useScope = scope.$eval(scopeExp),
+            fromCache;
+
+        function updateContent(content) {
+          element.html(content);
+          if (useScope) {
+            childScope = useScope;
+          } else {
+            releaseScopes.push(childScope = scope.$new());
+          }
+          compiler.compile(element)(childScope);
+          $autoScroll();
+          scope.$eval(onloadExp);
+        }
+
+        function clearContent() {
+          childScope = null;
+          element.html('');
+        }
 
         while(releaseScopes.length) {
           releaseScopes.pop().$destroy();
         }
         if (src) {
-          $xhr('GET', src, null, function(code, response) {
-            element.html(response);
-            if (useScope) {
-              childScope = useScope;
-            } else {
-              releaseScopes.push(childScope = scope.$new());
-            }
-            compiler.compile(element)(childScope);
-            $autoScroll();
-            scope.$eval(onloadExp);
-          }, false, true);
+          if ((fromCache = cache.get(src))) {
+            scope.$evalAsync(function() {
+              updateContent(fromCache);
+            });
+          } else {
+            $http.get(src).on('success', function(response) {
+              updateContent(response);
+              cache.put(src, response);
+            }).on('error', clearContent);
+          }
         } else {
-          childScope = null;
-          element.html('');
+          clearContent();
         }
       });
     }];
@@ -556,28 +575,48 @@ angularWidget('ng:view', function(element) {
 
   if (!element[0]['ng:compiled']) {
     element[0]['ng:compiled'] = true;
-    return ['$xhr.cache', '$route', '$autoScroll', '$element', function($xhr, $route, $autoScroll, element) {
+    return ['$http', '$cacheFactory', '$route', '$autoScroll', '$element',
+    function($http,   $cacheFactory,   $route,   $autoScroll,   element) {
       var template;
       var changeCounter = 0;
 
+      // TODO(vojta): configure the cache / extract into $tplCache service ?
+      var cache = $cacheFactory.get('templates') || $cacheFactory('templates');
+
       this.$on('$afterRouteChange', function() {
         changeCounter++;
       });
 
       this.$watch(function() {return changeCounter;}, function(scope, newChangeCounter) {
-        var template = $route.current && $route.current.template;
+        var template = $route.current && $route.current.template,
+            fromCache;
+
+        function updateContent(content) {
+          element.html(content);
+          compiler.compile(element)($route.current.scope);
+        }
+
+        function clearContent() {
+          element.html('');
+        }
+
         if (template) {
-          //xhr's callback must be async, see commit history for more info
-          $xhr('GET', template, function(code, response) {
-            // ignore callback if another route change occured since
-            if (newChangeCounter == changeCounter) {
-              element.html(response);
-              compiler.compile(element)($route.current.scope);
+          if ((fromCache = cache.get(template))) {
+            scope.$evalAsync(function() {
+              updateContent(fromCache);
+            });
+          } else {
+            // xhr's callback must be async, see commit history for more info
+            $http.get(template).on('success', function(response) {
+              // ignore callback if another route change occured since
+              if (newChangeCounter == changeCounter)
+                updateContent(response);
+              cache.put(template, response);
               $autoScroll();
-            }
-          });
+            }).on('error', clearContent);
+          }
         } else {
-          element.html('');
+          clearContent();
         }
       });
     }];