RxJSを覚えないAngularの書き方【2021年/RxJS7版】
本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。 RxJS7のリリースに伴い RxJSを覚えないAngularの書き方 は非推奨となったので、2021年/RxJS7版としてリライトして公開しています。 「RxJSを覚えないといけないからAngularは大変だ！」「RxJSはテスト難しいからつかいたくない」などと時々聞くので、RxJSを覚えないAngularの書き方を書いておきます。 AngularでRxJSを使う場所 まず、よく「AngularはRxJSを使う」とよくいいますが、具体的にどこに使われていますでしょうか。 これいうと、大体驚かれるんですが「package.jsonでインストールされているだけ」です。[1] 特にデフォルトでRxJSが書かれてて、
コンポーネントにおけるObservableの購読 - Angular After Tutorial
この章では AngularコンポーネントにおいてどのようにObservableを購読すべきなのかについて学びます。単純なsubscribeからはじめ、段階的にAsyncパイプを使ったリアクティブなパターンの使い方へステップアップしていきます。 Angularのコンポーネントの基本とRxJSの基本を習得したら、次に学ぶのは実際にどうやってObservableとコンポーネントを組み合わせるかというプラクティスです。うまくObservableを利用することで、ユーザーインタラクションとリアクティブに協調するコンポーネントを簡単に実装できるようになるでしょう。 最初に解説する方法は明示的な購読です。これはObservableの使い方の中でもっとも基本的で単純な方法です。これは公式チュートリアルの中でも、HeroServiceから値を取得するために学んだはずです。 コンポーネントを実装する前に、まず
Angular: Don't forget to unsubscribe() | Brian Love
Google Developer Expert in Angular, software engineer and skier located in Denver, CO Don’t forget to unsubscribe from subscriptions in Angular components using the OnDestroy lifecycle hook. We’ll look at: Why you need to unsubscribe When you likely should unsubscribe How you unsubscribe Updated July 7, 2018 I have updated this post to correctly use the takeUntil() operator over the takeWhile() ap
Angular2でObservableを使ってHTTPリクエストを複数送信 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
Observableを使ってhttpリクエストを複数実行する方法を確認しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．3つのhttpリクエストをチェインして実行 ２．3つのhttpリクエストをパラレルに実行 ３．デモ １）ライブラリ、サービス、依存性の指定 こちらの記事参照 Angular2でHTTPでサーバーからJSONデータ取得 Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。 ※ObservableのflatMapメソッド 例）３つのhttpリクエストを順番に実行 chain() { this._h
AngularでAsync pipeを使う - Carpe Diem
概要 AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。 環境 angular 2.4.8 rxjs 5.2.0 async pipeのメリット 主なメリットは以下の２つです。 template側に役割を任せられるのでコードがスッキリする コンポーネントが破棄される時に自動でunsubscribeするのでメモリリークを防げる フロントではメモリ管理が大切なので、特に後者は嬉しいメリットですね。 基本的な使い方 @Component({ selector: 'async-pipe', template: '<div>Time: {{ date | async }}</div>' }) export class AsyncPipeCompone
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular pitfall: Multiple HTTP requests with RxJS and observable$ | async
