Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Refactoring in Real World

618 views

Published on

bitbank LT Night #3 Angularの資料

Published in: Engineering
  • Be the first to comment

Angular Refactoring in Real World

  1. 1. 👇
  2. 2. 🎉 🎉
  3. 3. 🎉 🎉
  4. 4. 😇
  5. 5. userInfo: any = {}; ticker: any[] = [];
  6. 6. userInfo: UserInfo | null = null; ticker: Ticker[] = [];
  7. 7. const observableData$ = of(3); const observableDataWithParam$ = (param: number) => of(10 * param); observableData$.subscribe((res) => { observableDataWithParam$(res).subscribe((data) => { console.log(data); }) });
  8. 8. const observableData$ = of(3); const observableDataWithParam$ = (param: number) => of(10 * param); observableData$.pipe( mergeMap(res) => observableDataWithParam(res)), ).subscribe((data) => { console.log(data); });
  9. 9. const observableData$ = of(3); const observableData2$ = of(5).pipe(delay(2000)); const observableDataWithParam$ = (param: number) => of(10 * param); observableData$.pipe( mergeMap((res) => observableData2$.pipe( mergeMap((res2) => observableDataWithParam$(res + res2)) )), ).subscribe((data) => console.log(data));
  10. 10. const observableData$ = of(3); const observableData2$ = of(5).pipe(delay(2000)); const observableDataWithParam$ = (param: number) => of(10 * param); combineLatest(observableData$, observableData2).pipe( mergeMap(([res, res2]) => observableDataWithParam$(res + res2)) ).subscribe((data) => console.log(data));
  11. 11. <div> <p>{{ (userInfo$ | async).id }}</p> <p>{{ (userInfo$ | async).name }}</p> <p>{{ (userInfo$ | async).age }}</p> </div>
  12. 12. <div *ngIF=”userInfo$ | async as userInfo”> <p>{{ userInfo.id }}</p> <p>{{ userInfo.name }}</p> <p>{{ userInfo.age }}</p> </div>

×