きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × Angularなどの忘備録

Angular

angular × Docker × 開発環境の構築(改善)

Goal Angular開発環境をDockerを使って構築する。の改善。 ref) www.kinakomotitti.net 改善ポイント 以前は、node_moduleディレクトリの同期のために、docker-compose.yamlを変種して、つど共有するVolumeの設定を変更していた。 この操作を設定ファイルの…

Docker × Anguler × 開発環境の整理

Goal 背景 コーディング インテリセンス、パスの検証の有効化 alternative 1 alternative 2 alternative 3 Step1: node_moduleのインストール Step2: node_moduleの同期を切ってコンテナを立ち上げなおす。 Step3: インテリセンスの確認 デバッグ環境 Chrome…

Angular × Template × 認証機能もどきを追加してみた。

Goal Repository 手順 やってみた サービスディレクトリとサービスの作成 CanActiveインターフェースを実装する Routerの設定を変更する Goal anguar-material-templateを参考に、Angular13に対応したシンプルなテンプレートを用意する。(上記TemplateはAngu…

Angular × Template × 基本的なレアいアウトを設定してみた。 

Goal Repository 下準備編 Angular materialのインストール ヘッダー編 サブメニュー編 フッター編 Goal anguar-material-templateを参考に、Angular13に対応したシンプルなテンプレートを用意する。(上記TemplateはAngular8に対応。) Step2では、ヘッダー…

Angular13 × App Template × ルーティング設定と、初期Componentの作成

Goal Reference Step1: 大枠の作成 新しいアプリケーションの作成 Rootページの作成 Homeページの作成 Layout componentの作成 ルーティングの構成 ここまででできたディレクトリ構造まとめ Point ディレクトリ構成 遅延ロード Goal anguar-material-templat…

Angular × もやもや(放置してきたもの) × 調査

目的 Styleの適用について Q :Styleの適用方法について Answers 参考 ディレクトリ構造について Q:ディレクトリ構造が壊滅的になってしまう。 Answers ファイルを見つけやすくする スパゲッティコードについて Q:コンポーネントの役割、サービスの役割があ…

Angular material × form control × いろいろな入力チェック方法をためしてみた

目的 組み込みValidationの種類 必須入力チェック 正規表現でのチェック カスタム同期バリデーション カスタム非同期バリデーション (番外編)Composeについて その他参考 目的 Angular MaterialのFormControlを使って実現できる入力方法を学ぶ 組み込みVal…

mat-select-autocomplete×Lifecycle-Hooks×幅の変更を適用

目的 やったこと [解決方法]コンポーネントが初期化された後にコードからstyleを変更。 マニュアル確認 CSSからのStyle指定 目的 mat-select-autocompleteで定義したドロップダウンのWidthを変更する。 やったこと [解決方法]コンポーネントが初期化された後…

Observable × Subject/BehaviorSubject × それぞれの使い方を調べてみた

Purpose 概要 それぞれの依存関係 class Observable 利用方法と考え方 Point Subject, BehaviorSubject class Subject class BehaviorSubject Point Sample 参考 Purpose Observableについて理解する。 概要 似たような用語(Observer、Observable、Subject、…

Angular Material × Selenium × DatePickerのカレンダーを操作するサンプル

目的 背景 本題 コード Step1 Step2 Step3 Step4 目的 SeleniumのSample. Angular MaterialのDatePickerで日付を選択する。 値を直接Inputできない場合を想定。 背景 DatePickerをSeleniumで操作しようとしたとき、テキストボックスに日付が直接入力できれば…

Angular画面遷移 × Bad Request × 長い文字列を別画面に送ろうとしてはまった点について

Purpose 背景 問題 原因 対応 実際の対応 そのほかに考えた方法 まとめ Purpose AngularのアプリケーションをIISにデプロイしたとき、Http Status 400 : Bad Requestのエラーが出てはまったときの対応方法についてまとめる 背景 A画面から、B画面に遷移する…

Angular Material × Tooltip × 見た目を変更する方法の違い(v8.2.3 vs v11.2.6)

目的 Version 8.2.3 Version 11.2.6 [Set font size of Angular Material Tooltip API reference for Angular Material tooltipを参考に・・・ まとめ 目的 Angular MaterialのTooltipの見た目を変更する方法の違いについてまとめる。 対象のバージョンは、8…

Angular × ディレクティブとコンポーネントの親子間でのデータ共有 × ClassとInterfaceとStringを使った挙動の比較

Purpose ディレクティブとコンポーネントの親子間でのデータ共有を参考に、親子間でのデータの共有方法を考える。特に、双方向でデータをやり取りする場合についてまとめる。 Motivation 上記サイトや、他の数多のブログで紹介されているような”String型”の…

Angular × データバインド × いろいろなバインド方法を整理してみた

この記事の目的 本題 データバインディングの種類がいろいろあってわからない。 コンポーネント→Viewへのバインディング {{ }} 型 コンポーネント→Viewへのバインディング プロパティバインド型 View→コンポーネントへのバインディング Viewと、コンポーネン…

Angular Material × MatSort × 動く列と動かない列が同時に表示された件について

この記事の目的 本題 Mat Tableとは 問題となった現象 原因と対策 原因 対策 補足:Column名とデータソースのプロパティを一緒にしたくない場合 補足:ソート順序をカスタマイズする場合 結論 この記事の目的 この記事は、 Angular MaterialのMat Tableを利…

Angular Material × FormGroup × FormControl実装手順を整理してみた

この記事の目的 本題 成果物 ReactiveFormsModuleの有効化 FormControlの作成 FormGroupの作成 画面の作成 FromをSubmitしてみる まとめ この記事の目的 この記事は、 Angular Materialを使ったForm開発 を目的としています。 本題 成果物 Angularのコードを…

Angular × vie.js/D3.js × ネットワークグラフを描いてみた

この記事の目的 本題 ネットワークグラフ表示ライブラリ 対象とするライブラリ Angular アプリケーションへの導入方法 Tips1 Tips2 sigma.js D3.js 雑感 できたもの 実装 vis.js 雑感 できたもの 実装 まとめ この記事の目的 この記事は、 Angularのアプリ…

VS Code × Debugger for Chrome × Unverified breakpointを解決した話

この記事の目的 要約 本題 実行環境 現象 調べたこと1:Google先生 調べたこと2:Winmarge 何のための設定変更か? まとめ この記事の目的 この記事は、 Visual Studio CodeでAngularをデバッグ設定をしているときにはまったことのまとめ です。 要約 Angu…