Angular.js Observable

[기초]

Observable 은  어플리케이션 내의 부분끼리 통신할 수 있게 해주는 방법을 제공한다.

 이들은 앵귤러에서 자주쓰이며 특히  , 이벤트 핸들링을 할경우 Observable을 하라고 추천받는다.

 

observer패턴은 subject라고 불리는 객체지향패턴에서의 subject라불리는 객체이다.

 여기서 subject란 dependents 리스트들을 유지하고, 자동으로 state 변화를 관찰하는 소프트웨어 패턴이다.

 

이 패턴은 [ publish / subscribe ] 와 비슷하다.

 

 

Observable 은 우리가 선언해서 사용한다.

  즉, values들을 publish 하는 함수를 선언한다. 

  하지만, 소비자가 subscribe 하기 전까지는 보내주지않는다. !!  Lazy하므로 구독을 꼭 해야한다 

          , 소비자는 위 함수가 끝나거나 unsubscribe할떄까지 알림을 받는다.'

 

Observable 은 문맥에 따라 다양한 type 뿐아니라 이벤트 까지도 전달 할 수 있다.

 값을 수신받는 API 는 값 전달 방식이 동기적이던지 비동기적이던지 동일하다.

 

=======================================

[사용법 ]

 

앵귤러에서 우리는 Http 통신이나 이벤트 등의 경우에 리턴값을 Observable 로 자주 받게 될것이다.

참고로 최신의 앵귤러는 자동을 unSubscribe를 해주고있다.

이를 Subscribe하는 방법은 크게 두가지가 있다. 

---

첫번쨰 .  변수명$ 으로 변수이름을 지정하고

            사용시 "  변수명$  |aync  "이렇게 작성해준다.

====== HttpService.ts ===========

  public getUsers(){
    return this.http.get("/api/Users")
       .map( (res: Response ) => res.json()) ;
  }



======= UsersView.ts ====================
 public users$: Observable<User[]

  public getUsers(){
     this.user$ =  this.HttpService.getUsers()
  }
  
  
  
====== UsersView.html ==================
  //users$  뒤에 |async를 붙여서 구독하게 된다. 
  <ul class="user__list" *ngIf="(users$ | async).length">
     <li class="user" *ngFor="let user of users$ | async">
         {{ user.name }} - {{ user.birth_date }}
     </li>
  </ul>

---

두번쨰. subscribe()메소드를 직접 작성해서 Observable을 구독한다. 이렇게 할경우 직접 unSubscribe를 관리해주어야 한다.

====== HttpService.ts ===========
//위와동일
  public getUsers(){
    return this.http.get("/api/Users")
       .map( (res: Response ) => res.json()) ;
  }



======= UsersView.ts ====================
 public users$: Observable<User[]

  public getUsers(){
     this.user$ =  this.HttpService.getUsers()
                                             .subscribe( (users: User[] )=>{
                                                
                                                 this.users= users;
                                              
                                              }
  }
  
  
  
====== UsersView.html ==================
  //users$  뒤에 |async를 붙여서 구독하게 된다. 
  <ul class="user__list" *ngIf="(users).length">
     <li class="user" *ngFor="let user of users">
         {{ user.name }} - {{ user.birth_date }}
     </li>
  </ul>

---

[직접 Observable 만들기 (publisher 만들기 ) ] 

 

옵져버블 만들기 ( 즉, 유튜버가 되는거야! )
const simpleObservable = new Observable((observer) => {
    
    // 구독자들에게 메세지 보냄
    observer.next("bla bla bla")
    observer.complete()
})

// 유튜버를 구독한거야!
simpleObservable.subscribe()

//생명주기가 끝난다면 , 구독 해제는 필수
simpleObservable.unsubscribe()