12月メモ・リンク集

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

moment -> Luxon

Momentと比較してみて 使ってみて1週間ほど経た感想です。v0.2.9を利用。 気に入ったところ Immutability momentのようにcloneメソッドが不要 const bar = foo.clone().add(1, 'month') 月を1から12で計算できる momentはネイティブのDateと同様に0スタート …

Parcelを利用してReact × Typescriptの環境を用意

ちょっとしたモック作成や動作確認をしたいときに使ってみようかと思います。 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を利用) ローディン…

(WIP) createEmbeddedViewとcreateComponen

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

ControlValueAccessorでRadioボタンを含むコンポーネントを実装するメモ

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

11月メモ・リンク集

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

AngularのForm(応用)

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

10月メモ・リンク集

これは何か 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操作 フォーム …

Observable.throw()が返すオブジェクトの型はErrorObservable

import { Observable } from 'rxjs/Observable'; import { ErrorObservable } from 'rxjs/Observable/ErrorObservable'; // ... handleError(err): Observable<any>| ErrorObservable { if (/* 何か */) { return Observable.of('ok'); } else { return Observabl</any>…

「テキスト入力 -> 自動で検索開始」を実現するためのRx使い方

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

9月リンク集

これは何か 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…

Angular (4)で設定したLocale IDを取得

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…

雑メモはGist (Lepton) に

プログラムに関する備忘録をこのブログに書いていましたが、それくらいの文章やコードならGistにあげればいいのかと思い始めました。 Leptonというアプリがあるのでしばらくそれを使ってみようかと思います。 Lepton - A Lean GitHub Gist Client Quiver、Sn…

AngularのTemplate Syntax

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

AngularのForm(Reactive Forms)メモ

(Angular v.4.3.6を利用) Reactive Formとは Template-driven Formsとの比較 主要4クラス FormGroup, FormArrayを利用した例 フォームの値を変更する フォームの変更を監視する データモデルとフォームモデル バリデーション Reactive Formとは Template-d…

AngularのForm(Template-driven Forms)メモ

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

Angular Routerメモ

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

Angular CLIでビルドされたファイルの容量を把握する

把握 --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 容量の把…

RxJSの各種オペレーターなどをimportする場合

全部をimportしない // 禁止 import 'rxjs/Rx'; ライブラリ全体が読み込まれてしまいます。 TSLintでエラーが出るようにしておくと安全です。 Rule: import-blacklist "import-blacklist": [ true, "rxjs", "rxjs/Rx", ] import用のファイルを用意する rxjs-…

Angular CLIでメインアプリとは別にページ(html)を用意する

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

AngularのDatePipeのlocaleを変更したい場合(タイムゾーンを変更したい場合、も)

(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…

カレンダー生成

生成の流れ 対象月の日数を調べる カレンダー上で、1日の前に何日(何マス)あるか カレンダー上で、最終日の後ろに何日(何マス)あるか カレンダーに表示される日数を調べる 前月、翌月も含んだ数 日数分の配列を生成 chunkする 最終的に[Array(7), Array(…

AngularのPipe

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

AngularのHttpClientメモ

(Angular v.4.3.6を利用) 参考 データを取得する レスポンスデータの詳細を見る retry データを送信する Headersを追加 URL Parametersを追加 進捗を確認 応用 Interceptorを利用してヘッダーを追加 Interceptorを利用してログを表示 Interceptorを利用し…

削除したリモートブランチがローカルで表示される場合

git

# リモートのブランチを表示 git branch --remote # リモートに存在しない(削除された)ブランチを削除 git fetch --prune

Angularでi18n

(Angular v.4.3.6を利用) 準備 翻訳対象(HTMLのタグ)にi18n属性を設定 要素を追加しない方法 属性値を翻訳 複数形、代替テキスト ファイル(XLIFF)の書き出し XLIFFファイルについて Serve Build Report missing translations 参考 Angular CLI環境でアプ…

(WIP) NgUpgradeのドキュメント読む

読んだドキュメント NgUpgrade in Depth – nrwl Victor Savkinによる記事。3部構成で仕組みとベストプラクティスについて説明。 こっちを読んでから公式ドキュメントに目を通した方がわかりやすいかも Angular - Upgrading from AngularJS 公式ドキュメント …

TSlintで、特定ファイルや特定行のみ設定を変更したい

ライブラリやレスポンスデータの関係で対応が難しい場合や、他環境にあったファイルを一旦そのまま利用したい場合などに。 https://palantir.github.io/tslint/usage/rule-flags/ // ファイル全体に以下設定を反映 /* tslint:disable:no-null-keyword */ // …

Highchartsメモ

これは何か 基本 レシピ legendを外したい (c-1) 高さを変更したい (c-1) crosshair(照準線)を表示 (c-1) タイトルを非表示にする (c-2) Axisを非表示にする (c-2) どのAxisタイプを利用すべきか Axisに日付を利用したい Axisのタイプにdatetimeを設定 (c-3,…