cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(http): add basic http service

Browse Source 
This implementation only works in JavaScript, while the Observable transpilation
story gets worked out. Right now, the service just makes a simple request,
and returns an Observable of Response.

Additional functionality will be captured in separate issues.

Fixes #2028
This commit is contained in:
Jeff Cross
2015-04-28 23:07:55 -07:00
parent 363b9ba415
commit 21568106b1
35 changed files with 1054 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
modules/examples/e2e_test/http/http_spec.ts Normal file
View File

@ -0,0 +1,23 @@
/// <reference path="../../../angular2/typings/jasmine/jasmine.d.ts" />
import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
describe('http', function() {
afterEach(verifyNoBrowserErrors);
describe('fetching', function() {
var URL = 'examples/src/http/index.html';
it('should fetch and display people', function() {
browser.get(URL);
expect(getComponentText('http-app', '.people')).toEqual('hello, Jeff');
});
});
});
function getComponentText(selector, innerSelector) {
return browser.executeScript('return document.querySelector("' + selector + '").querySelector("' +
innerSelector + '").textContent.trim()');
}

20
modules/examples/src/http/assign_local_directive.ts Normal file
View File

@ -0,0 +1,20 @@
import {Directive, ViewContainerRef, ProtoViewRef} from "angular2/angular2";
@Directive({selector: '[assign-local]', properties: ['localVariable: assignLocalTo']})
export class LocalVariable {
viewContainer: ViewContainerRef;
protoViewRef: ProtoViewRef;
view: any;
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
this.viewContainer = viewContainer;
this.protoViewRef = protoViewRef;
}
set localVariable(exp) {
if (!this.viewContainer.length) {
this.view = this.viewContainer.create(this.protoViewRef);
}
this.view.setLocal("$implicit", exp);
}
}

30
modules/examples/src/http/http_comp.ts Normal file
View File

@ -0,0 +1,30 @@
import {bootstrap, Component, View, NgFor, NgIf, Inject} from 'angular2/angular2';
import {httpInjectables} from 'angular2/http';
import {Http} from 'angular2/src/http/http';
import {IHttp} from 'angular2/src/http/interfaces';
import {Response} from 'angular2/src/http/static_response';
import {LocalVariable} from './assign_local_directive';
@Component({selector: 'http-app', appInjector: [httpInjectables]})
@View({
directives: [NgFor, NgIf, LocalVariable],
template: `
<h1>people</h1>
<div *assign-local="#unwrappedPeople to people | rx">
<ul *ng-if="unwrappedPeople" class="people">
<li *ng-for="#person of unwrappedPeople">
hello, {{person.name}}
</li>
</ul>
<span *ng-if="!unwrappedPeople">
Fetching people...
</span>
</div>
`
})
export class HttpCmp {
people: Rx.Observable<Object>;
constructor(@Inject(Http) http: IHttp) {
this.people = http('./people.json').map(res => res.json());
}
}

11
modules/examples/src/http/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<title>Hello Http</title>
<body>
<http-app>
Loading...
</http-app>
$SCRIPTS$
</body>
</html>

30
modules/examples/src/http/index.ts Normal file
View File

@ -0,0 +1,30 @@
/// <reference path="../../../angular2/typings/rx/rx.all.d.ts" />
import {
bootstrap,
ElementRef,
Component,
Directive,
View,
Injectable,
NgFor,
NgIf,
Inject
} from 'angular2/angular2';
import {bind} from 'angular2/di';
import {PipeRegistry, defaultPipes} from 'angular2/change_detection';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {httpBindings} from 'angular2/http';
import {Http} from 'angular2/src/http/http';
import {IHttp} from 'angular2/src/http/interfaces';
import {Response} from 'angular2/src/http/static_response';
import {LocalVariable} from './assign_local_directive';
import {RxPipeFactory} from './rx_pipe';
import {HttpCmp} from './http_comp';
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
defaultPipes.rx = [new RxPipeFactory()] bootstrap(
HttpCmp, [bind(PipeRegistry).toValue(new PipeRegistry(defaultPipes))]);
}

11
modules/examples/src/http/index_dynamic.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<title>Angular 2.0 Http (Reflection)</title>
<body>
<http-app>
Loading...
</http-app>
$SCRIPTS$
</body>
</html>

15
modules/examples/src/http/index_dynamic.ts Normal file
View File

@ -0,0 +1,15 @@
import {HttpCmp} from './http_comp';
import {bootstrap} from 'angular2/angular2';
import {bind} from 'angular2/di';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {PipeRegistry, defaultPipes} from 'angular2/change_detection';
import {RxPipeFactory} from './rx_pipe';
export function main() {
// This entry point is not transformed and exists for testing purposes.
// See index.js for an explanation.
reflector.reflectionCapabilities = new ReflectionCapabilities();
defaultPipes.rx = [new RxPipeFactory()] bootstrap(
HttpCmp, [bind(PipeRegistry).toValue(new PipeRegistry(defaultPipes))]);
}

1
modules/examples/src/http/people.json Normal file
View File

@ -0,0 +1 @@
[{"name":"Jeff"}]

38
modules/examples/src/http/rx_pipe.ts Normal file
View File

@ -0,0 +1,38 @@
/// <reference path="../../../angular2/typings/rx/rx.all.d.ts" />
import {isBlank, isPresent, CONST} from 'angular2/src/facade/lang';
import {Observable, ObservableWrapper} from 'angular2/src/facade/async';
import {Pipe, WrappedValue, PipeFactory} from 'angular2/src/change_detection/pipes/pipe';
import {ObservablePipe} from 'angular2/src/change_detection/pipes/observable_pipe';
import {ChangeDetectorRef} from 'angular2/src/change_detection/change_detector_ref';
import * as Rx from 'rx';
export class RxPipe extends ObservablePipe {
supports(obs): boolean {
if (Rx.hasOwnProperty('default')) {
return obs instanceof (<any>Rx).default.Rx.Observable;
} else {
return obs instanceof <any>Rx.Observable;
}
}
_subscribe(obs): void {
this._observable = obs;
this._subscription =
(<any>obs).subscribe(value => {this._updateLatestValue(value)}, e => { throw e; });
}
}
/**
* Provides a factory for [ObervablePipe].
*
* @exportedAs angular2/pipes
*/
@CONST()
export class RxPipeFactory extends PipeFactory {
constructor() { super(); }
supports(obs): boolean { return obs instanceof (<any>Rx).default.Rx.Observable }
create(cdRef): Pipe { return new RxPipe(cdRef); }
}