L08084のブログ

技術記事の執筆は祈りに似ている

Angular Material

Angular Materialでサイドメニューを作る

初期状態 上記画像の画面に、Angular Materialを使ってサイドメニューを追加します。 前提 バージョン情報 開発 AppModuleの設定 サイドメニューの雛形を作成 ナビゲーション(メニュー)の表示 参考サイト 前提 下記の対応についてはすでに完了しているものと…

【Angular】Guardで認証されていないアカウントをブロックする

やりたいこと 前提 Guardを作成する ログインしてないアカウントをホーム画面に入れない ログイン済みのアカウントをログイン画面に入れない 動作確認 未ログインのアカウントをホーム画面に遷移させない ログイン済のアカウントをログイン画面に遷移させな…

【Angular】Firebase認証からログアウトする

AngularとFirebaseを使ったログイン処理については、下記の記事ですでに実装済みのため、今回はログアウト処理を実装していきます。 関連記事 バージョン情報 実装 ヘッダーにログアウトボタンをつける ログアウト処理を実装する 動作確認 関連記事 Angular…

【Angular】HttpInterceptorを使ってスピナーを表示する

スピナーが表示されている様子 はじめに バージョン情報 開発 AppModuleの設定 スピナーコンポーネントの作成 スピナーサービスの作成 インターセプターの作成 AppModuleの設定 動作確認 HttpClientによるHTTPリクエスト HttpClientを使わない場合 参考サイ…

Angular + Firebase でアカウント登録画面の作成

AngularでFirebase認証(その1) Firebaseのセットアップ - L08084のブログ AngularでFirebase認証(その2) Angular Materialを使ったログイン画面の作成 - L08084のブログ AngularでFirebase認証(その3) Firebase Authentication の呼び出し - L08084のブロ…

AngularでFirebase認証(その3) Firebase Authentication の呼び出し

前回の記事はこちら 引き続き、AngularとFirebaseを使って認証機能を作成していきます。 前回はログイン画面の見た目を作成したので、今回はそのログイン画面にFirebase Authenticationを使って認証機能を導入していきます。 テストアカウントの作成 認証機…

AngularでFirebase認証(その2) Angular Materialを使ったログイン画面の作成

前回の記事はこちら 引き続き、AngularとFirebaseを使って認証機能を作成していきます。 前回ではFirebaseコンソールで認証機能を有効化したあと、AngularプロジェクトにAngularFireをインストールするところまで実施しました。 今回の記事では、AppModuleの…

【JavaScript】Angularでモールス信号を翻訳するWebサイトを作成した

はじめに 使用ライブラリ・言語のバージョン情報 「モールス信号 翻訳」の機能 実装 ディレクトリ構成 コンポーネントの構成 ルートコンポーネントの実装 input コンポーネントの実装 convert サービスクラスの実装 share-buttonコンポーネントの実装 デプロ…

【Angular】シャイニングブルートウキョウでは、プログラムがあなたを条件分岐する!!

はじめに 引用元の記事 試しに触ってみる 実装 バージョン情報 質問フォーム作成 回答を表示するコンポーネントを作成する 動作確認 あとがき はじめに Vue.jsの公式ドキュメントに、質問するとユーザーの代わりにYES or NOの意思決定を行ってくれるWebAPI(Y…

【Angular】複数項目にまたがるカスタムバリデーションを作る(パスワード・確認用パスワードなど)

パスワード・確認用パスワード入力フォームの例 はじめに アカウント登録画面を作っていて出現頻度が著しく高い項目といえば............そう!パスワードの入力フォームですね。というわけで今回は、パスワードと確認用パスワードが一致しているか確認する…

【JavaScript】文字列の間に空白(スペース)が入力されているか確認する(氏名などのバリデーション)

はじめに アカウント登録画面でよく見る姓と名の入力欄について、フォームが二つに別れているパターンと、フォームが一つになっていてスペースで姓と名を区切るパターンの二つがあると思います。 今回は後者を採用した場合に必要になるバリデーションについ…

Angular Materialでログインフォームを作る

Angular Materialを使って、ログイン用のフォームを作ります Angular Materialのインストールから解説している記事はこちら バージョン情報 テンプレート駆動型とモデル駆動型 NgModuleの設定 index.htmlにアイコンのCDNを追加 ログインフォームを作る 参考…

Angular Material でヘッダーを作る

Angular Materialを使ってナビゲーション付きのヘッダーを作る Angular Materialのインストールから解説している記事は、こちら バージョン情報 NgModuleの設定 テンプレートを編集する バージョン情報 Angular: 5.2.9 Node: 8.1.4 @angular/material: 5.2.4…

Angular Material の Tableを使う

Angular Materialをインストールして、テーブルを表示するところまでやる。 バージョン情報 Angular Materialをインストールする AppModuleの設定 CSSのインポート Tableを表示する 動作確認 参考サイト バージョン情報 Angular: 5.2.8 Angular CLI: 1.7.3 N…