Carpe Diem

備忘録

Angular

Angular のバンドルファイルのサイズを可視化

概要 Angular CLIはTree Shakingだったりbuild-optimizerなど、それだけである程度最適化する事が可能ですが、一方で外部ライブラリなどはどれくらいファイルがあるか見落としがちです。 今回はそういったものを可視化する方法を紹介します。 環境 Angular 7…

AngularのPipeでデータの表示形式を簡単に操作する

概要 元はunixtimeだったり、単純な数値データなものだったりを以下のようなフォーマットにしたいことは往々にしてあります。 日付 通過 パーセント 大文字に統一 AngularではPipesという機能を使うことでテンプレート上で簡単に実現できます。 ビルトインPi…

Angularでのコンポーネント→ビューのバインディング

概要 Angularではコンポーネント→ビュー方向のバインディングは以下の4種類があります。 プロパティバインディング 属性バインディング クラスバインディング スタイルバインディング これらの違いと使い分けを説明します。 環境 Angular v5.2.9 angular-cli…

TypeScriptのthisでハマった話

概要 AngularでエラーハンドリングをまとめようとしたらTypeScriptのthisの扱いにハマった話です。 環境 TypeScript 2.5.3 Angular 4.4.6 どんな問題が起きていたか APIコールのロジックでエラーが発生した時のハンドリングをまとめることができるよう、共通…

AngularのInjectorとProviderとDependencyの関係

概要 過去の記事で christina04.hatenablog.com を書いた時に、AngularのInjectorとProviderとDependencyの関係を理解していないとよく分からないと思ったので追記的にまとめます。 環境 Angular 4.3.5 覚え方 結論から言うと、以下のように考えるとすっきり…

BehaviorSubjectでAPIの結果をキャッシュ

概要 クライアントからのAPIコールは可能であれば避けた方がサーバの負荷も下がり、ユーザの体感速度も上がります。 1度取得すればほぼ変わらないデータなどは、最初にAPIコールした後はできれば避けたいです。 一方でcookieやlocalstorageで管理するほどで…

AngularのHttpClientModuleの使い方

概要 Angular 4.3からこれまでのHttpModuleに代わってより軽量かつ使いやすいHttpClientModuleと言うものが出てきました。 今回はその移行作業を書きます。 環境 Angular 4.3.1 angular-cli 1.2.3 成果物 今回の成果物は以下です。 github.com

SPAを S3+CloudFront で表示する方法

概要 AngularなどのSPAをS3+CloudFrontで表示する方法についてです。 要件 SSL/TLSを使いたい https://example.com/hoge のようなサブディレクトリのようなパスで403にならないようにしたい ↑のようなパスでもOGPがきちんと表示される リロードしても404にな…

RxJSのfinallyの挙動

概要 Angularにはリクエストのクエリパラメータを取得する方法として、 @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { this.activatedRoute.params.subscribe((par…

Tasks(Macrotasks), Microtasksについて

概要 Angularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。 実験 以下のjsのログ順はどうなるでしょうか? console.log('script start'); setTimeout(function() { console.log('setTimeout');…

AngularでAsync pipeを使う

概要 AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。 環境 angular 2.4.8 rxjs 5.2.0 async pipeのメリット 主なメリットは以下の2つです。…

Angularで中身を動的に変えられるModalを作る【応用編】

概要 前回の続きです。 前回の要件に加え、今回対応したいのは以下です。 開く時にパラメータを渡して、Modal内のComponentで利用したい 例えばエラーメッセージを渡して上部に通知バーを表示するなどを作る時にこういった仕組みが必要になると思います。 今…

Angularで中身を動的に変えられるModalを作る【基本編】

概要 確認用ダイアログなど、モーダルが必要になるシーンは多々あると思います。 今回はAngular2で実装する方法を紹介します。 環境 angular 2.4.7 angular-cli 1.0.0-beta.32.3 要件 今回満たしているのは以下の項目です。 serviceとしてどこからでも呼べる…

Angularで作ったサイトでリロードすると404エラー

概要 Angular2で作ったサイトをS3のstatic website hostingで動かし、 https://www.mysite.com/login というURLにいる状態でリロードしたところ、Not Foundエラーが出てしまったのでその対応方法をまとめます。 環境 angular 2.4.7 angular-cli 1.0.0-beta.2…

AngularでFormのCustom Validation

概要 AngularでのFormのカスタムバリデーションには主に以下の方法があります。 Directiveで用意する ビルトインのValidatorsのような関数を用意する 今回は後者の実装例を紹介します。 validationロジック 今回はクレジットカードの簡易チェックをするvalid…

Angular2でのForm 〜Model Driven編〜

概要 前回はTemaplate Drivenなフォームの作り方を紹介しました。 今回はModel Drivenなフォームの作り方を紹介します。 環境 angular-cli 1.0.0-beta.25.5 Angular 2.4.3 完成形 成果物はこちら github.com

Angular2でのForm 〜Template Driven編〜

概要 AngularのFormの書き方は主に2つあります。 1つはTemplate Drivenなやり方。 もう1つはModel Driven(Reactive Form)なやり方。 フォームの作り方を調べた時にどっちがどっちの情報なのか分からず混乱したのでまとめてみました。 今回はTemplate Dr…

Angular2でComponentをまたがったデータのやり取り

概要 Angular2でComponent間でデータをやり取りしたい状況が出てくると思います。 例えば「このボタンを押したら外部APIを叩いて状態を更新したい。その状態を他のComponentでも使っているので更新を反映したい」ときなどです。 今回はServiceにデータを保持…

angular-cliで手軽にAngular2を始める

概要 Angular2のチュートリアルを終えた後で「いざ作ってみよう」となると 「package.jsonやtsconfigとかどうしよう」 「system.jsよりwebpackがいいって聞くけどどうなんだろ」 「テストフレームワークは何がいいんだろう」 みたいなことで悩んでなかなか進…