docs(http): add docs and examples for JSONP_BINDINGS

This commit is contained in:
Jeff Cross 2015-09-17 15:00:30 -07:00
parent b2695e46e1
commit 17af481134
1 changed files with 106 additions and 0 deletions

View File

@ -162,6 +162,112 @@ export const HTTP_BINDINGS: any[] = [
XHRBackend
];
/**
* Provides a basic set of bindings to use the {@link Jsonp} service in any application.
*
* The `JSONP_BINDINGS` should be included either in a component's injector,
* or in the root injector when bootstrapping an application.
*
* ### Example ([live demo](http://plnkr.co/edit/vmeN4F?p=preview))
*
* ```
* import {Component, NgFor, View} from 'angular2/angular2';
* import {JSONP_BINDINGS, Jsonp} from 'angular2/http';
*
* @Component({
* selector: 'app',
* bindings: [JSONP_BINDINGS]
* })
* @View({
* template: `
* <div>
* <h1>People</h1>
* <ul>
* <li *ng-for="#person of people">
* {{person.name}}
* </li>
* </ul>
* </div>
* `,
* directives: [NgFor]
* })
* export class App {
* people: Array<Object>;
* constructor(jsonp:Jsonp) {
* jsonp.request('people.json').toRx().subscribe(res => {
* this.people = res.json();
* })
* }
* }
* ```
*
* The primary public API included in `JSONP_BINDINGS` is the {@link Jsonp} class.
* However, other bindings required by `Jsonp` are included,
* which may be beneficial to override in certain cases.
*
* The bindings included in `JSONP_BINDINGS` include:
* * {@link Jsonp}
* * {@link JSONPBackend}
* * `BrowserJsonp` - Private factory
* * {@link RequestOptions} - Bound to {@link BaseRequestOptions} class
* * {@link ResponseOptions} - Bound to {@link BaseResponseOptions} class
*
* There may be cases where it makes sense to extend the base request options,
* such as to add a search string to be appended to all URLs.
* To accomplish this, a new binding for {@link RequestOptions} should
* be added in the same injector as `JSONP_BINDINGS`.
*
* ### Example ([live demo](http://plnkr.co/edit/TFug7x?p=preview))
*
* ```
* import {bind, bootstrap} from 'angular2/angular2';
* import {JSONP_BINDINGS, BaseRequestOptions, RequestOptions} from 'angular2/http';
*
* class MyOptions extends BaseRequestOptions {
* search: string = 'coreTeam=true';
* }
*
* bootstrap(App, [JSONP_BINDINGS, bind(RequestOptions).toClass(MyOptions)])
* .catch(err => console.error(err));
* ```
*
* Likewise, to use a mock backend for unit tests, the {@link JSONPBackend}
* binding should be bound to {@link MockBackend}.
*
* ### Example ([live demo](http://plnkr.co/edit/HDqZWL?p=preview))
*
* ```
* import {bind, Injector} from 'angular2/angular2';
* import {JSONP_BINDINGS, Jsonp, Response, JSONPBackend, MockBackend} from 'angular2/http';
*
* var people = [{name: 'Jeff'}, {name: 'Tobias'}];
* var injector = Injector.resolveAndCreate([
* JSONP_BINDINGS,
* MockBackend,
* bind(JSONPBackend).toAlias(MockBackend)
* ]);
* var jsonp = injector.get(Jsonp);
* var backend = injector.get(MockBackend);
*
* // Listen for any new requests
* backend.connections.observer({
* next: connection => {
* var response = new Response({body: people});
* setTimeout(() => {
* // Send a response to the request
* connection.mockRespond(response);
* });
* });
* jsonp.get('people.json').observer({
* next: res => {
* // Response came from mock backend
* console.log('first person', res.json()[0].name);
* }
* });
* ```
*/
export const JSONP_BINDINGS: any[] = [
// TODO(pascal): use factory type annotations once supported in DI
// issue: https://github.com/angular/angular/issues/3183