書きます。 何をテストするのか なぜ書くのか 入力と出力とは何か テストを書く前に調べること 一般的なコンポーネントのテストシナリオ Vue 単体テストのサンプル props と emit のテスト nuxt-link (router-link) を利用しているコンポーネントのテスト Ro…

8月に調べたことのメモです。 Vue 関連 基礎 ちょっと応用 Angular 関連 JavaScript その他 その他 Vue 関連 基礎 Vue.js 学習メモ - ryotah’s blog Vuex 学習メモ - ryotah’s blog Nuxt.js 学習メモ - ryotah’s blog How to redirect with vue-router? · Is…

これは何か 始める前に 最初に 基礎 基礎（適宜） 応用 RxJS ngrx TypeScript VS Code エクステンション for Angular for TypeScript for Lint and Code format Util これは何か Angular を習得するために必要な情報をまとめてみようとしたもの Angular の …

これは何か 前提知識 Jasmine 用語 Service Tests Testing without beforeEach() Testing HTTP services Component Test Basics Component DOM testing コンポーネントを生成するテストコード nativeElement DebugElement Component Test Scenarios Componen…

6月に調べたことのメモです。 Angular 関連 ngrx 関連 ngrx 実装メモ 結果 Actions Reducers Effects Container CSS 関連 Angular 関連 (WIP) Angular Testing メモ - ryotah’s blog Angular のドキュメント + テストに関する前提知識（用語、Jasmine使い方…

5 月に調べたことのメモです。 Angular 関連 third party lib Testing in ngrx Version 6 Rx 関連 catchError Rails 関連 その他 Angular 関連 third party lib stories global scripts · angular/angular-cli Wiki · GitHub 例えばグローバルに jQuery を i…

4 月に調べたことのメモです。 Angular 関連 Angular 6 モーダルの状態を ngrx で管理する ngrx の状態管理を Router (URL) 起点にする Rails 関連 マイグレーション Active Record クエリインターフェイス Active Record コールバック JSのテスト 関連 Dock…

3月に調べたことのメモです。 Angular関連 React関連 CircleCI関連 2.0 Docs - CircleCI（オフィシャルドキュメント） Angular対応 その他 Rails関連 Android関連 その他 Angular関連 DESIGN DOC (Ivy): Separate Compilationを読む - らこらこブログ RxJS: …

2月に調べたことのメモです。 リサイザー Show More/Less コンポーネント ドラッグアンドドロップ（dnd） Googleスプレッドシート的なスクロール AngularのDIに関して Ruby, Rails関連 VS CodeでRubyを書く その他 リサイザー angular-resizer - StackBlitz …

1月に調べたことのメモです。 Angular関連 Date系ライブラリとIANA 複数のプロジェクタで共有したいロジックとコンポーネントをパッケージ化した 必要な前提知識 ReactのHOCs その他 Angular関連 AngularのCDK Tableのコードを読みながら、Viewの組み立て方…

CDK Tableのドキュメント 0: 完成版 1: コンポーネントを動的にaddする 2: 対象のコンポーネント内にaddする 3: コンポーネントのaddからテンプレートを取得してaddする方式に変更 4: table.ts, row.ts, cell.tsを用意 5: 行定義を追加（RowDef） 6: ヘッダ…

12月に調べたことのメモです。 Angular関連 View作成や再利用について Form関連 Dateライブラリ VSCode コードフォーマット Go環境用意 Reactチュートリアル Tutorial その他 Google Analytics コンポーネントを設計するときに Angular関連 View作成や再利用…

ちょっとしたモック作成や動作確認をしたいときに使ってみようかと思います。 Parcel v1.2.0を利用。 準備 Parcelをインストール npm install -g parcel-bundler tsconfig.jsonを用意 { "compilerOptions": { "target": "es5", "module": "commonjs", "stric…

ローディング ローダーの種類 Aの実装方針 actionとstate stateをsubscribe Bの実装方針 利用例 stateをsubscribe BlockerComponent 通信エラー 実装方針 利用例 Angularアプリのローダーと通信時エラーの実装について。 （Angular 5.0.1を利用） ローディン…

templateを利用して動的にコンポーネントを生成する ViewContainerRef TemplateRef EmbeddedViewRef サンプル 参考 templateを利用して動的にコンポーネントを生成する this.viewContainer.createEmbeddedView(this.templateRef); 何が起きているか Angular…

(change)を利用 ViewChildrenを利用 ref.nativeElement.checked = true;でViewを更新 RadioComponent import { Component, ElementRef, QueryList, ViewChildren } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angula…

11月に調べたことのメモです。 ngrx関連 各Feature Module（Page Module）のステートを、画面遷移時にリセットする Angular関連 Component/Directive関連 アプリケーションに依存するデータを表示するコンポーネントのインターフェース（@Input）について Fo…

これは何か Custom Form Controls NG_VALUE_ACCESSORを利用する NgControlを利用する サンプルコード メモ フォームの入れ子 ControlValueAccessorを利用 Template-driven専用 Reactive専用 サンプルコード メモ Error Aggregator サンプルコード 参考 メモ …

これは何か ngrx関連 ngrxとフォーム Introducing @ngrx/entity – @ngrx – Medium 状態のリセット How to share state between reducers best practice · Issue #159 · ngrx/example-app · GitHub Rx関連 unsubscribe その他 Angular関連 view操作 フォーム …

example-app/book.ts at ee0f331bf808525e003efa264b5065964c7f942b · ngrx/example-app · GitHub 元ネタ（NgRx4のサンプルアプリより） シュミレート用サンプルコード テキスト入力の代わりに、画面クリックで一連の流れが確認できる簡易版コードです。 ブ…

これは何か NgRx, アプリケーションの状態管理 A Comprehensive Introduction to @ngrx/store - Companion to Egghead.io Series Using NgRx 4 to Manage State in Angular Applications NgRx: Patterns and Techniques – nrwl platform/README.md at master…

LOCALE_IDを利用。 以下のようにAOTでコンパイルしていない場合、初期値のen-USになります。 ng serve --aot --locale ja import { Component, OnInit, LOCALE_ID, Injector } from '@angular/core'; export class FooComponent implements OnInit { constru…

Angular - Template Syntaxを読んだメモです。 （v4.3.6対応） Binding一覧 参考 Operator一覧 参考 Built-in attribute directives ngClass ngStyle ngModel Two-way *ngForのtrackByを使って描画対象かどうかを判断する Template reference variables ( #v…

ryotah.hatenablog.com 別記事でこんなのも書きました。 （Angular v.4.3.6を利用） Reactive Formとは Template-driven Formsとの比較 主要4クラス FormGroup, FormArrayを利用した例 フォームの値を変更する フォームの変更を監視する データモデルとフォ…

（Angular v.4.3.6を利用） <select>を利用する NgFormとは ngModelとname属性 NgModelインスタンスを取得 参考 バリデーション <input>関連その他 参考 <input>操作時のイベントを取得したい キーイベントをフィルタリングしたい <select>を利用する *ngForを利用する AngularJSのng-optio</select></select>…

（Angular v.4.3.6を利用） 参考 リンクを設定したい 通常 パラメータがついたリンク アンカー(#)がついたリンク アクティブなリンクにクラスを設定したい ts内で遷移の制御をしたい 通常 パラメータをつける アンカー(#)をつける クエリを保存して遷移した…

把握 --stats-jsonオプションを有効にしてstats.jsonを出力 ng build --prod --stats-json https://github.com/angular/angular-cli/wiki/build webpack-bundle-analyzerを利用 https://github.com/th0r/webpack-bundle-analyzer –build-optimizer 容量の把…

stories asset configuration · angular/angular-cli Wiki · GitHub assetsに、対象のhtmlかそれを含むディレクトリを設定する。 "assets": [ "assets", "favicon.ico", "static/test.html" ] これでhttp://localhost:4200/static/test.htmlが利用できる。 …

（Angular v.4.3.6を利用） 起動時にlocaleを設定 (JIT) 動的にlocaleを変更 タイムゾーンを変更 参考Url 起動時にlocaleを設定 (JIT) LOCALE_IDを設定 DatePipe error when using `navigator.language` as LOCALE_ID with aot · Issue #6618 · angular/angu…

（Angular v.4.3.6を利用） これは何か 概要 Built-in カスタムパイプ Change detection 上記のような場合の対応策 Impure pipes AsyncPipe ServiceやComponent内でも利用したい DatePipeのlocaleを変更したい場合 その他 これは何か Angular (4+)を始めたの…