Skip to content

Commit 17af481

Browse files
committed
docs(http): add docs and examples for JSONP_BINDINGS
1 parent b2695e4 commit 17af481

File tree

1 file changed

+106
-0
lines changed

1 file changed

+106
-0
lines changed

modules/angular2/http.ts

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,112 @@ export const HTTP_BINDINGS: any[] = [
162162
XHRBackend
163163
];
164164

165+
166+
/**
167+
* Provides a basic set of bindings to use the {@link Jsonp} service in any application.
168+
*
169+
* The `JSONP_BINDINGS` should be included either in a component's injector,
170+
* or in the root injector when bootstrapping an application.
171+
*
172+
* ### Example ([live demo](http://plnkr.co/edit/vmeN4F?p=preview))
173+
*
174+
* ```
175+
* import {Component, NgFor, View} from 'angular2/angular2';
176+
* import {JSONP_BINDINGS, Jsonp} from 'angular2/http';
177+
*
178+
* @Component({
179+
* selector: 'app',
180+
* bindings: [JSONP_BINDINGS]
181+
* })
182+
* @View({
183+
* template: `
184+
* <div>
185+
* <h1>People</h1>
186+
* <ul>
187+
* <li *ng-for="#person of people">
188+
* {{person.name}}
189+
* </li>
190+
* </ul>
191+
* </div>
192+
* `,
193+
* directives: [NgFor]
194+
* })
195+
* export class App {
196+
* people: Array<Object>;
197+
* constructor(jsonp:Jsonp) {
198+
* jsonp.request('people.json').toRx().subscribe(res => {
199+
* this.people = res.json();
200+
* })
201+
* }
202+
* }
203+
* ```
204+
*
205+
* The primary public API included in `JSONP_BINDINGS` is the {@link Jsonp} class.
206+
* However, other bindings required by `Jsonp` are included,
207+
* which may be beneficial to override in certain cases.
208+
*
209+
* The bindings included in `JSONP_BINDINGS` include:
210+
* * {@link Jsonp}
211+
* * {@link JSONPBackend}
212+
* * `BrowserJsonp` - Private factory
213+
* * {@link RequestOptions} - Bound to {@link BaseRequestOptions} class
214+
* * {@link ResponseOptions} - Bound to {@link BaseResponseOptions} class
215+
*
216+
* There may be cases where it makes sense to extend the base request options,
217+
* such as to add a search string to be appended to all URLs.
218+
* To accomplish this, a new binding for {@link RequestOptions} should
219+
* be added in the same injector as `JSONP_BINDINGS`.
220+
*
221+
* ### Example ([live demo](http://plnkr.co/edit/TFug7x?p=preview))
222+
*
223+
* ```
224+
* import {bind, bootstrap} from 'angular2/angular2';
225+
* import {JSONP_BINDINGS, BaseRequestOptions, RequestOptions} from 'angular2/http';
226+
*
227+
* class MyOptions extends BaseRequestOptions {
228+
* search: string = 'coreTeam=true';
229+
* }
230+
*
231+
* bootstrap(App, [JSONP_BINDINGS, bind(RequestOptions).toClass(MyOptions)])
232+
* .catch(err => console.error(err));
233+
* ```
234+
*
235+
* Likewise, to use a mock backend for unit tests, the {@link JSONPBackend}
236+
* binding should be bound to {@link MockBackend}.
237+
*
238+
* ### Example ([live demo](http://plnkr.co/edit/HDqZWL?p=preview))
239+
*
240+
* ```
241+
* import {bind, Injector} from 'angular2/angular2';
242+
* import {JSONP_BINDINGS, Jsonp, Response, JSONPBackend, MockBackend} from 'angular2/http';
243+
*
244+
* var people = [{name: 'Jeff'}, {name: 'Tobias'}];
245+
* var injector = Injector.resolveAndCreate([
246+
* JSONP_BINDINGS,
247+
* MockBackend,
248+
* bind(JSONPBackend).toAlias(MockBackend)
249+
* ]);
250+
* var jsonp = injector.get(Jsonp);
251+
* var backend = injector.get(MockBackend);
252+
*
253+
* // Listen for any new requests
254+
* backend.connections.observer({
255+
* next: connection => {
256+
* var response = new Response({body: people});
257+
* setTimeout(() => {
258+
* // Send a response to the request
259+
* connection.mockRespond(response);
260+
* });
261+
* });
262+
263+
* jsonp.get('people.json').observer({
264+
* next: res => {
265+
* // Response came from mock backend
266+
* console.log('first person', res.json()[0].name);
267+
* }
268+
* });
269+
* ```
270+
*/
165271
export const JSONP_BINDINGS: any[] = [
166272
// TODO(pascal): use factory type annotations once supported in DI
167273
// issue: https://github.com/angular/angular/issues/3183

0 commit comments

Comments
 (0)