From 81abc39929bac55f8e385f265beecee17d669fe7 Mon Sep 17 00:00:00 2001
From: Caitlin Potter <caitpotter88@gmail.com>
Date: Tue, 14 Jul 2015 19:53:04 -0500
Subject: [PATCH] feat(http): add support for JSONP requests

Closes #2905
Closes #2818
---
 modules/angular2/http.ts                      |  16 +-
 modules/angular2/src/facade/lang.dart         |   4 +
 modules/angular2/src/facade/lang.ts           |   4 +
 .../src/http/backends/browser_jsonp.dart      |  59 ++++++
 .../src/http/backends/browser_jsonp.ts        |  48 +++++
 .../src/http/backends/jsonp_backend.ts        |  97 ++++++++++
 modules/angular2/src/http/http.ts             |  31 ++-
 modules/angular2/src/http/http_utils.dart     |   7 +
 modules/angular2/src/http/http_utils.ts       |   1 +
 modules/angular2/src/http/static_response.ts  |  10 +-
 .../test/http/backends/jsonp_backend_spec.ts  | 177 ++++++++++++++++++
 .../examples/e2e_test/jsonp/jsonp_spec.dart   |   5 +
 modules/examples/e2e_test/jsonp/jsonp_spec.ts |  23 +++
 modules/examples/src/jsonp/index.html         |  11 ++
 modules/examples/src/jsonp/index.ts           |  12 ++
 modules/examples/src/jsonp/index_dynamic.html |  11 ++
 modules/examples/src/jsonp/index_dynamic.ts   |  13 ++
 modules/examples/src/jsonp/jsonp_comp.dart    |  23 +++
 modules/examples/src/jsonp/jsonp_comp.ts      |  23 +++
 modules/examples/src/jsonp/people.json        |   2 +
 tools/broccoli/trees/browser_tree.ts          |   1 +
 21 files changed, 566 insertions(+), 12 deletions(-)
 create mode 100644 modules/angular2/src/http/backends/browser_jsonp.dart
 create mode 100644 modules/angular2/src/http/backends/browser_jsonp.ts
 create mode 100644 modules/angular2/src/http/backends/jsonp_backend.ts
 create mode 100644 modules/angular2/src/http/http_utils.dart
 create mode 100644 modules/angular2/src/http/http_utils.ts
 create mode 100644 modules/angular2/test/http/backends/jsonp_backend_spec.ts
 create mode 100644 modules/examples/e2e_test/jsonp/jsonp_spec.dart
 create mode 100644 modules/examples/e2e_test/jsonp/jsonp_spec.ts
 create mode 100644 modules/examples/src/jsonp/index.html
 create mode 100644 modules/examples/src/jsonp/index.ts
 create mode 100644 modules/examples/src/jsonp/index_dynamic.html
 create mode 100644 modules/examples/src/jsonp/index_dynamic.ts
 create mode 100644 modules/examples/src/jsonp/jsonp_comp.dart
 create mode 100644 modules/examples/src/jsonp/jsonp_comp.ts
 create mode 100644 modules/examples/src/jsonp/people.json

diff --git a/modules/angular2/http.ts b/modules/angular2/http.ts
index 2e711aba46..5f44a13a83 100644
--- a/modules/angular2/http.ts
+++ b/modules/angular2/http.ts
@@ -5,9 +5,11 @@
  * class.
  */
 import {bind, Binding} from 'angular2/di';
-import {Http} from 'angular2/src/http/http';
+import {Http, Jsonp} from 'angular2/src/http/http';
 import {XHRBackend, XHRConnection} from 'angular2/src/http/backends/xhr_backend';
+import {JSONPBackend, JSONPConnection} from 'angular2/src/http/backends/jsonp_backend';
 import {BrowserXhr} from 'angular2/src/http/backends/browser_xhr';
+import {BrowserJsonp} from 'angular2/src/http/backends/browser_jsonp';
 import {BaseRequestOptions, RequestOptions} from 'angular2/src/http/base_request_options';
 import {ConnectionBackend} from 'angular2/src/http/interfaces';
 
@@ -26,7 +28,8 @@ export {
 export {BaseRequestOptions, RequestOptions} from 'angular2/src/http/base_request_options';
 export {BaseResponseOptions, ResponseOptions} from 'angular2/src/http/base_response_options';
 export {XHRBackend, XHRConnection} from 'angular2/src/http/backends/xhr_backend';
-export {Http} from 'angular2/src/http/http';
+export {JSONPBackend, JSONPConnection} from 'angular2/src/http/backends/jsonp_backend';
+export {Http, Jsonp} from 'angular2/src/http/http';
 
 export {Headers} from 'angular2/src/http/headers';
 
@@ -65,3 +68,12 @@ export var httpInjectables: List<any> = [
   bind(ResponseOptions).toClass(BaseResponseOptions),
   Http
 ];
+
+export var jsonpInjectables: List<any> = [
+  bind(ConnectionBackend)
+      .toClass(JSONPBackend),
+  BrowserJsonp,
+  bind(RequestOptions).toClass(BaseRequestOptions),
+  bind(ResponseOptions).toClass(BaseResponseOptions),
+  Jsonp
+];
diff --git a/modules/angular2/src/facade/lang.dart b/modules/angular2/src/facade/lang.dart
index 1b555e62f3..7f64937600 100644
--- a/modules/angular2/src/facade/lang.dart
+++ b/modules/angular2/src/facade/lang.dart
@@ -190,6 +190,10 @@ class BaseException extends Error {
   }
 }
 
+Error makeTypeError([String message = ""]) {
+  return new BaseException(message);
+}
+
 const _NAN_KEY = const Object();
 
 // Dart can have identical(str1, str2) == false while str1 == str2
diff --git a/modules/angular2/src/facade/lang.ts b/modules/angular2/src/facade/lang.ts
index 1bf4e4dd78..03402316cf 100644
--- a/modules/angular2/src/facade/lang.ts
+++ b/modules/angular2/src/facade/lang.ts
@@ -15,6 +15,10 @@ export class BaseException extends Error {
   toString(): string { return this.message; }
 }
 
+export function makeTypeError(message?: string): Error {
+  return new TypeError(message);
+}
+
 export var Math = _global.Math;
 export var Date = _global.Date;
 
diff --git a/modules/angular2/src/http/backends/browser_jsonp.dart b/modules/angular2/src/http/backends/browser_jsonp.dart
new file mode 100644
index 0000000000..9bf4ef2ef0
--- /dev/null
+++ b/modules/angular2/src/http/backends/browser_jsonp.dart
@@ -0,0 +1,59 @@
+library angular2.src.http.backends.browser_jsonp;
+import 'package:angular2/di.dart';
+import 'dart:html' show document;
+import 'dart:js' show context, JsObject, JsArray;
+
+int _nextRequestId = 0;
+const JSONP_HOME = '__ng_jsonp__';
+
+var _jsonpConnections = null;
+
+JsObject _getJsonpConnections() {
+  if (_jsonpConnections == null) {
+    _jsonpConnections = context[JSONP_HOME] = new JsObject(context['Object']);
+  }
+  return _jsonpConnections;
+}
+
+// Make sure not to evaluate this in a non-browser environment!
+@Injectable()
+class BrowserJsonp {
+  // Construct a <script> element with the specified URL
+  dynamic build(String url) {
+    var node = document.createElement('script');
+    node.src = url;
+    return node;
+  }
+
+  nextRequestID() {
+    return "__req${_nextRequestId++}";
+  }
+
+  requestCallback(String id) {
+    return """${JSONP_HOME}.${id}.finished""";
+  }
+
+  exposeConnection(String id, dynamic connection) {
+    var connections = _getJsonpConnections();
+    var wrapper = new JsObject(context['Object']);
+
+    wrapper['_id'] = id;
+    wrapper['__dart__'] = connection;
+    wrapper['finished'] = ([dynamic data]) => connection.finished(data);
+
+    connections[id] = wrapper;
+  }
+
+  removeConnection(String id) {
+    var connections = _getJsonpConnections();
+    connections[id] = null;
+  }
+
+  // Attach the <script> element to the DOM
+  send(dynamic node) { document.body.append(node); }
+
+  // Remove <script> element from the DOM
+  cleanup(dynamic node) {
+    node.remove();
+  }
+}
diff --git a/modules/angular2/src/http/backends/browser_jsonp.ts b/modules/angular2/src/http/backends/browser_jsonp.ts
new file mode 100644
index 0000000000..ba7b53af30
--- /dev/null
+++ b/modules/angular2/src/http/backends/browser_jsonp.ts
@@ -0,0 +1,48 @@
+import {Injectable} from 'angular2/di';
+import {global} from 'angular2/src/facade/lang';
+
+let _nextRequestId = 0;
+export const JSONP_HOME = '__ng_jsonp__';
+var _jsonpConnections = null;
+
+function _getJsonpConnections(): {[key: string]: any} {
+  if (_jsonpConnections === null) {
+    _jsonpConnections = global[JSONP_HOME] = {};
+  }
+  return _jsonpConnections;
+}
+
+// Make sure not to evaluate this in a non-browser environment!
+@Injectable()
+export class BrowserJsonp {
+  // Construct a <script> element with the specified URL
+  build(url: string): any {
+    let node = document.createElement('script');
+    node.src = url;
+    return node;
+  }
+
+  nextRequestID(): string { return `__req${_nextRequestId++}`; }
+
+  requestCallback(id: string): string { return `${JSONP_HOME}.${id}.finished`; }
+
+  exposeConnection(id: string, connection: any) {
+    let connections = _getJsonpConnections();
+    connections[id] = connection;
+  }
+
+  removeConnection(id: string) {
+    var connections = _getJsonpConnections();
+    connections[id] = null;
+  }
+
+  // Attach the <script> element to the DOM
+  send(node: any) { document.body.appendChild(<Node>(node)); }
+
+  // Remove <script> element from the DOM
+  cleanup(node: any) {
+    if (node.parentNode) {
+      node.parentNode.removeChild(<Node>(node));
+    }
+  }
+}
diff --git a/modules/angular2/src/http/backends/jsonp_backend.ts b/modules/angular2/src/http/backends/jsonp_backend.ts
new file mode 100644
index 0000000000..37c963eed3
--- /dev/null
+++ b/modules/angular2/src/http/backends/jsonp_backend.ts
@@ -0,0 +1,97 @@
+import {ConnectionBackend, Connection} from '../interfaces';
+import {ReadyStates, RequestMethods, RequestMethodsMap} from '../enums';
+import {Request} from '../static_request';
+import {Response} from '../static_response';
+import {ResponseOptions, BaseResponseOptions} from '../base_response_options';
+import {Injectable} from 'angular2/di';
+import {BrowserJsonp} from './browser_jsonp';
+import {EventEmitter, ObservableWrapper} from 'angular2/src/facade/async';
+import {StringWrapper, isPresent, ENUM_INDEX, makeTypeError} from 'angular2/src/facade/lang';
+
+export class JSONPConnection implements Connection {
+  readyState: ReadyStates;
+  request: Request;
+  response: EventEmitter;
+  private _id: string;
+  private _script: Element;
+  private _responseData: any;
+  private _finished: boolean = false;
+
+  constructor(req: Request, private _dom: BrowserJsonp,
+              private baseResponseOptions?: ResponseOptions) {
+    if (req.method !== RequestMethods.GET) {
+      throw makeTypeError("JSONP requests must use GET request method.");
+    }
+    this.request = req;
+    this.response = new EventEmitter();
+    this.readyState = ReadyStates.LOADING;
+    this._id = _dom.nextRequestID();
+
+    _dom.exposeConnection(this._id, this);
+
+    // Workaround Dart
+    // url = url.replace(/=JSONP_CALLBACK(&|$)/, `generated method`);
+    let callback = _dom.requestCallback(this._id);
+    let url: string = req.url;
+    if (url.indexOf('=JSONP_CALLBACK&') > -1) {
+      url = StringWrapper.replace(url, '=JSONP_CALLBACK&', `=${callback}&`);
+    } else if (url.lastIndexOf('=JSONP_CALLBACK') === url.length - '=JSONP_CALLBACK'.length) {
+      url = StringWrapper.substring(url, 0, url.length - '=JSONP_CALLBACK'.length) + `=${callback}`;
+    }
+
+    let script = this._script = _dom.build(url);
+
+    script.addEventListener('load', (event) => {
+      if (this.readyState === ReadyStates.CANCELLED) return;
+      this.readyState = ReadyStates.DONE;
+      _dom.cleanup(script);
+      if (!this._finished) {
+        ObservableWrapper.callThrow(
+            this.response, makeTypeError('JSONP injected script did not invoke callback.'));
+        return;
+      }
+
+      let responseOptions = new ResponseOptions({body: this._responseData});
+      if (isPresent(this.baseResponseOptions)) {
+        responseOptions = this.baseResponseOptions.merge(responseOptions);
+      }
+
+      ObservableWrapper.callNext(this.response, new Response(responseOptions));
+    });
+
+    script.addEventListener('error', (error) => {
+      if (this.readyState === ReadyStates.CANCELLED) return;
+      this.readyState = ReadyStates.DONE;
+      _dom.cleanup(script);
+      ObservableWrapper.callThrow(this.response, error);
+    });
+
+    _dom.send(script);
+  }
+
+  finished(data?: any) {
+    // Don't leak connections
+    this._finished = true;
+    this._dom.removeConnection(this._id);
+    if (this.readyState === ReadyStates.CANCELLED) return;
+    this._responseData = data;
+  }
+
+  dispose(): void {
+    this.readyState = ReadyStates.CANCELLED;
+    let script = this._script;
+    this._script = null;
+    if (isPresent(script)) {
+      this._dom.cleanup(script);
+    }
+    ObservableWrapper.callReturn(this.response);
+  }
+}
+
+@Injectable()
+export class JSONPBackend implements ConnectionBackend {
+  constructor(private _browserJSONP: BrowserJsonp, private _baseResponseOptions: ResponseOptions) {}
+  createConnection(request: Request): JSONPConnection {
+    return new JSONPConnection(request, this._browserJSONP, this._baseResponseOptions);
+  }
+}
diff --git a/modules/angular2/src/http/http.ts b/modules/angular2/src/http/http.ts
index f1508f80c3..74c2f3519b 100644
--- a/modules/angular2/src/http/http.ts
+++ b/modules/angular2/src/http/http.ts
@@ -1,4 +1,4 @@
-import {isString, isPresent, isBlank} from 'angular2/src/facade/lang';
+import {isString, isPresent, isBlank, makeTypeError} from 'angular2/src/facade/lang';
 import {Injectable} from 'angular2/src/di/decorators';
 import {IRequestOptions, Connection, ConnectionBackend} from './interfaces';
 import {Request} from './static_request';
@@ -102,7 +102,7 @@ function mergeOptions(defaultOpts, providedOpts, method, url): RequestOptions {
  **/
 @Injectable()
 export class Http {
-  constructor(private _backend: ConnectionBackend, private _defaultOptions: RequestOptions) {}
+  constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {}
 
   /**
    * Performs any type of http request. First argument is required, and can either be a url or
@@ -176,3 +176,30 @@ export class Http {
                                                                RequestMethods.HEAD, url)));
   }
 }
+
+@Injectable()
+export class Jsonp extends Http {
+  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
+    super(backend, defaultOptions);
+  }
+
+  /**
+   * Performs any type of http request. First argument is required, and can either be a url or
+   * a {@link Request} instance. If the first argument is a url, an optional {@link RequestOptions}
+   * object can be provided as the 2nd argument. The options object will be merged with the values
+   * of {@link BaseRequestOptions} before performing the request.
+   */
+  request(url: string | Request, options?: IRequestOptions): EventEmitter {
+    var responseObservable: EventEmitter;
+    if (isString(url)) {
+      url = new Request(mergeOptions(this._defaultOptions, options, RequestMethods.GET, url));
+    }
+    if (url instanceof Request) {
+      if (url.method !== RequestMethods.GET) {
+        makeTypeError('JSONP requests must use GET request method.');
+      }
+      responseObservable = httpRequest(this._backend, url);
+    }
+    return responseObservable;
+  }
+}
diff --git a/modules/angular2/src/http/http_utils.dart b/modules/angular2/src/http/http_utils.dart
new file mode 100644
index 0000000000..7c9cd61de5
--- /dev/null
+++ b/modules/angular2/src/http/http_utils.dart
@@ -0,0 +1,7 @@
+library angular2.src.http.http_utils;
+import 'dart:js' show JsObject;
+import 'dart:collection' show LinkedHashMap, LinkedHashSet;
+
+bool isJsObject(o) {
+  return o is JsObject || o is LinkedHashMap || o is LinkedHashSet;
+}
diff --git a/modules/angular2/src/http/http_utils.ts b/modules/angular2/src/http/http_utils.ts
new file mode 100644
index 0000000000..082d493f24
--- /dev/null
+++ b/modules/angular2/src/http/http_utils.ts
@@ -0,0 +1 @@
+export {isJsObject} from 'angular2/src/facade/lang';
diff --git a/modules/angular2/src/http/static_response.ts b/modules/angular2/src/http/static_response.ts
index dc0516dc04..1f11707ceb 100644
--- a/modules/angular2/src/http/static_response.ts
+++ b/modules/angular2/src/http/static_response.ts
@@ -1,14 +1,8 @@
 import {ResponseTypes} from './enums';
-import {
-  BaseException,
-  CONST_EXPR,
-  isJsObject,
-  isString,
-  isPresent,
-  Json
-} from 'angular2/src/facade/lang';
+import {BaseException, CONST_EXPR, isString, isPresent, Json} from 'angular2/src/facade/lang';
 import {Headers} from './headers';
 import {ResponseOptions} from './base_response_options';
+import {isJsObject} from './http_utils';
 
 /**
  * Creates `Response` instances from provided values.
diff --git a/modules/angular2/test/http/backends/jsonp_backend_spec.ts b/modules/angular2/test/http/backends/jsonp_backend_spec.ts
new file mode 100644
index 0000000000..87eb0fa2d9
--- /dev/null
+++ b/modules/angular2/test/http/backends/jsonp_backend_spec.ts
@@ -0,0 +1,177 @@
+import {
+  AsyncTestCompleter,
+  afterEach,
+  beforeEach,
+  ddescribe,
+  describe,
+  expect,
+  iit,
+  inject,
+  it,
+  xit,
+  SpyObject
+} from 'angular2/test_lib';
+import {ObservableWrapper} from 'angular2/src/facade/async';
+import {BrowserJsonp} from 'angular2/src/http/backends/browser_jsonp';
+import {JSONPConnection, JSONPBackend} from 'angular2/src/http/backends/jsonp_backend';
+import {bind, Injector} from 'angular2/di';
+import {isPresent, StringWrapper} from 'angular2/src/facade/lang';
+import {TimerWrapper} from 'angular2/src/facade/async';
+import {Request} from 'angular2/src/http/static_request';
+import {Map} from 'angular2/src/facade/collection';
+import {RequestOptions, BaseRequestOptions} from 'angular2/src/http/base_request_options';
+import {BaseResponseOptions, ResponseOptions} from 'angular2/src/http/base_response_options';
+import {ResponseTypes, ReadyStates, RequestMethods} from 'angular2/src/http/enums';
+
+var addEventListenerSpy;
+var existingScripts = [];
+
+class MockBrowserJsonp extends BrowserJsonp {
+  src: string;
+  callbacks: Map<string, (data: any) => any>;
+  constructor() {
+    super();
+    this.callbacks = new Map();
+  }
+
+  addEventListener(type: string, cb: (data: any) => any) { this.callbacks.set(type, cb); }
+
+  dispatchEvent(type: string, argument?: any) {
+    if (!isPresent(argument)) {
+      argument = {};
+    }
+    this.callbacks.get(type)(argument);
+  }
+
+  build(url: string) {
+    var script = new MockBrowserJsonp();
+    script.src = url;
+    existingScripts.push(script);
+    return script;
+  }
+
+  send(node: any) { /* noop */
+  }
+  cleanup(node: any) { /* noop */
+  }
+}
+
+export function main() {
+  describe('JSONPBackend', () => {
+    let backend;
+    let sampleRequest;
+
+    beforeEach(() => {
+      let injector = Injector.resolveAndCreate([
+        bind(ResponseOptions)
+            .toClass(BaseResponseOptions),
+        bind(BrowserJsonp).toClass(MockBrowserJsonp),
+        JSONPBackend
+      ]);
+      backend = injector.get(JSONPBackend);
+      let base = new BaseRequestOptions();
+      sampleRequest = new Request(base.merge(new RequestOptions({url: 'https://google.com'})));
+    });
+
+    afterEach(() => { existingScripts = []; });
+
+    it('should create a connection', () => {
+      var instance;
+      expect(() => instance = backend.createConnection(sampleRequest)).not.toThrow();
+      expect(instance).toBeAnInstanceOf(JSONPConnection);
+    });
+
+
+    describe('JSONPConnection', () => {
+      it('should use the injected BaseResponseOptions to create the response',
+         inject([AsyncTestCompleter], async => {
+           let connection = new JSONPConnection(sampleRequest, new MockBrowserJsonp(),
+                                                new ResponseOptions({type: ResponseTypes.Error}));
+           ObservableWrapper.subscribe(connection.response, res => {
+             expect(res.type).toBe(ResponseTypes.Error);
+             async.done();
+           });
+           connection.finished();
+           existingScripts[0].dispatchEvent('load');
+         }));
+
+      it('should ignore load/callback when disposed', inject([AsyncTestCompleter], async => {
+           var connection = new JSONPConnection(sampleRequest, new MockBrowserJsonp());
+           let spy = new SpyObject();
+           let loadSpy = spy.spy('load');
+           let errorSpy = spy.spy('error');
+           let returnSpy = spy.spy('cancelled');
+
+           ObservableWrapper.subscribe(connection.response, loadSpy, errorSpy, returnSpy);
+           connection.dispose();
+           expect(connection.readyState).toBe(ReadyStates.CANCELLED);
+
+           connection.finished('Fake data');
+           existingScripts[0].dispatchEvent('load');
+
+           TimerWrapper.setTimeout(() => {
+             expect(loadSpy).not.toHaveBeenCalled();
+             expect(errorSpy).not.toHaveBeenCalled();
+             expect(returnSpy).toHaveBeenCalled();
+             async.done();
+           }, 10);
+         }));
+
+      it('should report error if loaded without invoking callback',
+         inject([AsyncTestCompleter], async => {
+           let connection = new JSONPConnection(sampleRequest, new MockBrowserJsonp());
+           ObservableWrapper.subscribe(
+               connection.response,
+               res => {
+                 expect("response listener called").toBe(false);
+                 async.done();
+               },
+               err => {
+                 expect(StringWrapper.contains(err.message, 'did not invoke callback')).toBe(true);
+                 async.done();
+               });
+
+           existingScripts[0].dispatchEvent('load');
+         }));
+
+      it('should report error if script contains error', inject([AsyncTestCompleter], async => {
+           let connection = new JSONPConnection(sampleRequest, new MockBrowserJsonp());
+
+           ObservableWrapper.subscribe(connection.response,
+                                       res => {
+                                         expect("response listener called").toBe(false);
+                                         async.done();
+                                       },
+                                       err => {
+                                         expect(err['message']).toBe('Oops!');
+                                         async.done();
+                                       });
+
+           existingScripts[0].dispatchEvent('error', ({message: "Oops!"}));
+         }));
+
+      it('should throw if request method is not GET', () => {
+        [RequestMethods.POST, RequestMethods.PUT, RequestMethods.DELETE, RequestMethods.OPTIONS,
+         RequestMethods.HEAD, RequestMethods.PATCH]
+            .forEach(method => {
+              let base = new BaseRequestOptions();
+              let req = new Request(
+                  base.merge(new RequestOptions({url: 'https://google.com', method: method})));
+              expect(() => new JSONPConnection(req, new MockBrowserJsonp())).toThrowError();
+            });
+      });
+
+      it('should respond with data passed to callback', inject([AsyncTestCompleter], async => {
+           let connection = new JSONPConnection(sampleRequest, new MockBrowserJsonp());
+
+           ObservableWrapper.subscribe(connection.response, res => {
+             expect(res.json()).toEqual(({fake_payload: true, blob_id: 12345}));
+             async.done();
+           });
+
+           connection.finished(({fake_payload: true, blob_id: 12345}));
+           existingScripts[0].dispatchEvent('load');
+         }));
+    });
+  });
+}
diff --git a/modules/examples/e2e_test/jsonp/jsonp_spec.dart b/modules/examples/e2e_test/jsonp/jsonp_spec.dart
new file mode 100644
index 0000000000..3ad71e3cb9
--- /dev/null
+++ b/modules/examples/e2e_test/jsonp/jsonp_spec.dart
@@ -0,0 +1,5 @@
+library examples.e2e_test.jsonp.jsonp_spec;
+
+main() {
+
+}
diff --git a/modules/examples/e2e_test/jsonp/jsonp_spec.ts b/modules/examples/e2e_test/jsonp/jsonp_spec.ts
new file mode 100644
index 0000000000..bd1e722941
--- /dev/null
+++ b/modules/examples/e2e_test/jsonp/jsonp_spec.ts
@@ -0,0 +1,23 @@
+/// <reference path="../../../angular2/typings/jasmine/jasmine.d.ts" />
+
+import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
+
+describe('jsonp', function() {
+
+  afterEach(verifyNoBrowserErrors);
+
+  describe('fetching', function() {
+    var URL = 'examples/src/jsonp/index.html';
+
+    it('should fetch and display people', function() {
+      browser.get(URL);
+
+      expect(getComponentText('jsonp-app', '.people')).toEqual('hello, caitp');
+    });
+  });
+});
+
+function getComponentText(selector, innerSelector) {
+  return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
+                               innerSelector + '").textContent.trim()');
+}
diff --git a/modules/examples/src/jsonp/index.html b/modules/examples/src/jsonp/index.html
new file mode 100644
index 0000000000..e2ec5c6696
--- /dev/null
+++ b/modules/examples/src/jsonp/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Hello Jsonp</title>
+<body>
+  <jsonp-app>
+    Loading...
+  </jsonp-app>
+
+  $SCRIPTS$
+</body>
+</html>
diff --git a/modules/examples/src/jsonp/index.ts b/modules/examples/src/jsonp/index.ts
new file mode 100644
index 0000000000..9bbdb31b5e
--- /dev/null
+++ b/modules/examples/src/jsonp/index.ts
@@ -0,0 +1,12 @@
+/// <reference path="../../../angular2/typings/rx/rx.all.d.ts" />
+
+import {bootstrap} from 'angular2/angular2';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+import {jsonpInjectables} from 'angular2/http';
+import {JsonpCmp} from './jsonp_comp';
+
+export function main() {
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap(JsonpCmp, [jsonpInjectables]);
+}
diff --git a/modules/examples/src/jsonp/index_dynamic.html b/modules/examples/src/jsonp/index_dynamic.html
new file mode 100644
index 0000000000..c52d52efa4
--- /dev/null
+++ b/modules/examples/src/jsonp/index_dynamic.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <title>Angular 2.0 Jsonp (Reflection)</title>
+<body>
+  <jsonp-app>
+    Loading...
+  </jsonp-app>
+
+  $SCRIPTS$
+</body>
+</html>
diff --git a/modules/examples/src/jsonp/index_dynamic.ts b/modules/examples/src/jsonp/index_dynamic.ts
new file mode 100644
index 0000000000..b09e5da4d4
--- /dev/null
+++ b/modules/examples/src/jsonp/index_dynamic.ts
@@ -0,0 +1,13 @@
+import {JsonpCmp} from './jsonp_comp';
+import {bootstrap} from 'angular2/angular2';
+import {reflector} from 'angular2/src/reflection/reflection';
+import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
+import {jsonpInjectables} from 'angular2/http';
+
+
+export function main() {
+  // This entry point is not transformed and exists for testing purposes.
+  // See index.js for an explanation.
+  reflector.reflectionCapabilities = new ReflectionCapabilities();
+  bootstrap(JsonpCmp, [jsonpInjectables]);
+}
diff --git a/modules/examples/src/jsonp/jsonp_comp.dart b/modules/examples/src/jsonp/jsonp_comp.dart
new file mode 100644
index 0000000000..79df410204
--- /dev/null
+++ b/modules/examples/src/jsonp/jsonp_comp.dart
@@ -0,0 +1,23 @@
+library examples.src.jsonp.jsonp_comp;
+
+import "package:angular2/angular2.dart" show Component, View, NgFor;
+import "package:angular2/http.dart" show Jsonp;
+import "package:angular2/src/facade/async.dart" show ObservableWrapper;
+
+@Component(selector: "jsonp-app")
+@View(directives: const [NgFor], template: '''
+    <h1>people</h1>
+    <ul class="people">
+      <li *ng-for="#person of people">
+        hello, {{person[\'name\']}}
+      </li>
+    </ul>
+  ''')
+class JsonpCmp {
+  Object people;
+  JsonpCmp(Jsonp jsonp) {
+    ObservableWrapper.subscribe(
+        jsonp.get("./people.json?callback=JSONP_CALLBACK"),
+        (res) => this.people = res.json().toList());
+  }
+}
diff --git a/modules/examples/src/jsonp/jsonp_comp.ts b/modules/examples/src/jsonp/jsonp_comp.ts
new file mode 100644
index 0000000000..1ed80aaf41
--- /dev/null
+++ b/modules/examples/src/jsonp/jsonp_comp.ts
@@ -0,0 +1,23 @@
+import {Component, View, NgFor} from 'angular2/angular2';
+import {Jsonp} from 'angular2/http';
+import {ObservableWrapper} from 'angular2/src/facade/async';
+
+@Component({selector: 'jsonp-app'})
+@View({
+  directives: [NgFor],
+  template: `
+    <h1>people</h1>
+    <ul class="people">
+      <li *ng-for="#person of people">
+        hello, {{person['name']}}
+      </li>
+    </ul>
+  `
+})
+export class JsonpCmp {
+  people: Object;
+  constructor(jsonp: Jsonp) {
+    ObservableWrapper.subscribe(jsonp.get('./people.json?callback=JSONP_CALLBACK'),
+                                res => this.people = res.json());
+  }
+}
diff --git a/modules/examples/src/jsonp/people.json b/modules/examples/src/jsonp/people.json
new file mode 100644
index 0000000000..764beb25d7
--- /dev/null
+++ b/modules/examples/src/jsonp/people.json
@@ -0,0 +1,2 @@
+// This can only be requested once due to constant method name :(
+__ng_jsonp__.__req0.finished([{"name":"caitp"}])
diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts
index 50b08b5495..f665fd0deb 100644
--- a/tools/broccoli/trees/browser_tree.ts
+++ b/tools/broccoli/trees/browser_tree.ts
@@ -45,6 +45,7 @@ const kServedPaths = [
   'examples/src/gestures',
   'examples/src/hello_world',
   'examples/src/http',
+  'examples/src/jsonp',
   'examples/src/key_events',
   'examples/src/sourcemap',
   'examples/src/todo',