Carpe Diem

備忘録。https://github.com/jun06t

Angular

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がいいって聞くけどどうなんだろ」 「テストフレームワークは何がいいんだろう」 みたいなことで悩んでなかなか進…