ANgularJS 2.0+

observable 관련 (수정중)

k9e4h 2016. 9. 6. 09:12

http.get 이 return 하는 observable은 angular 2가 아니라 rxjs에 있는 것이다.

rxjs는 systemjs.config.js에 있다.

Angular 1.x에서 http.get은 promise를 반환, Anguar 2.x에서는 observable을 반환

data loading 하기 위해 ngOnInit() 사용

.map((res:Response)=>res.json()) 은 observable을 반환


Observables are a powerful way to manage asynchronous data flows. 

Http method는 HTTP Response의 Observable을 반환한다.



angular observable document

https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#observables

rxjs document?

https://github.com/ReactiveX/RxJS/blob/master/MIGRATION.md

angular에서 observable API 설명

http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http


angular에서 observable, asyncronized

http://chariotsolutions.com/blog/post/angular2-observables-http-separating-services-components/

http://www.metaltoad.com/blog/angular-2-http-observables


RxJS의 operation

1. map

각 항목에 함수를 적용하여 관찰함으로써 방출 된 항목을 변환


1
2
3
getData (){
    return this.http.get(this.openApiUrl).map(res => res.json());
  }
cs



결과값은 res라는 변수에 담기고 map을 통하여 res를 res.json()으로 변환


람다


2. Rx.Observable.prototype.take(count,[scheduler])


returns a specified number of contiguous elements from the start of an observable sequence, using the specified scheduler for the edge case of take(0)


count(Number) : The number of elements to return

scheduler(Scheduler) : Scheduler used to produce an onCompleted message in case count is set to 0


return : An observable sequence that contains the elements before and including the specified index in the input sequence


3.


1
///<reference path="~~~s"/>
cs


DefinitelyTyped에서 제공하는 ts 정의 파일. 없어도 되지만 이게 있을 경우 손쉽게 코드 작성 가능



http://reactivex.io/documentation/operators/map.html



https://angular.io/docs/ts/latest/guide/server-communication.html



typescript extend

ts는 객체지향 사상을 javascript에 반영시킬 수 있는 수퍼셋이기 때문에 class, interface, name space 등의 개념을 적용시킬 수 있다.


4. observables give us additional functionality on our http calls - one of which is to treat the return value like an array.


반응형

'ANgularJS 2.0+' 카테고리의 다른 글

[AngularJS 2.0] AngularJS 2.0 Tutorial1  (0) 2016.09.19
angular interval interceptor (수정중)  (0) 2016.09.06
ng2-translate 2.2.2  (0) 2016.08.25
[AngularJS 2.0] AngularJS 2.0 Tutorial 흐름  (2) 2016.08.05
TypeScript  (0) 2016.08.03