Angular、Material、Firebaseの設定方法

千マイルの旅は、一歩から始めなければなりません
-老子

この記事では、Angularアプリケーションをセットアップし、UIコンポーネントのマテリアルライブラリを追加し、アプリケーションをホストするためのFirebaseを追加する手順について説明します。

今日は何を学んでいますか？

AngularCLIを使用したAngularアプリケーションの作成
アプリケーションにマテリアルライブラリを追加します。
Firebaseアカウントを作成し、Firebaseを使用してアプリケーションをデプロイする

1.AngularCLIを使用したAngularアプリケーションの作成

最初のステップは、Node.jsがマシンにインストールされているかどうかを確認することです。そうでない場合は、Node.jsに移動します（インストールは簡単で、デフォルト設定を変更する必要はありません）。インストールが完了したら、ターミナルウィンドウに直接移動し、以下のコマンドを入力すると、インストールされているバージョンが表示されます。

ノード-v

次のステップは、以下のコマンドを使用してangularcliをインストールすることです

npm install -g @ angular / cli

すべてがうまくいったかどうかを確認するには、以下のコマンドを入力する必要があります

ng —バージョン

次に、ターミナルで、アプリケーションを保存する目的のフォルダーに移動し、次のように入力します

新しいyour-application-nameをng

これにより、アプリケーションのルーティングモジュールを追加するように求められます。
次に、使用するスタイルシート形式を尋ねられます。SCSSフォーマットが好きです

角度のあるアプリケーション開発には、VisualStudioコードを使用することをお勧めします。インストールしたら、アプリケーションフォルダに移動し、以下のコマンドを入力します

コード。

これにより、VisualStudioコードインスタンスが開きます

2.アプリケーションにマテリアルライブラリを追加する

ヒットはCtrl + ` VSコード内のターミナル開き、アプリケーションにマテリアルUIを追加するためのコマンドで入力を開始します。

ng add @ angular / material

テーマ（事前に作成されたテーマのいずれかを選択）、グローバルマテリアルタイポグラフィ（「はい」と言う）、角度アニメーション（「はい」と言う）を選択するように求められます。

それでは、「app.module.ts」を開いて「MatButtonModule」のインポートステートメントを追加し、MatButtonModuleをインポート配列に追加しましょう。

次のステップは、mat-raised-buttonを表示して、アプリケーションにマテリアルライブラリを追加する際にすべてがうまくいったかどうかを確認することです。

「app.component.html」に移動し、すべての定型コードを削除し、以下のように「mat-raised-button」ディレクティブを使用してボタンを追加し、を使用してアプリケーションを提供します。

ngサーブ

上記のボタンが表示されている場合は、アプリケーションにマテリアルライブラリが正常に追加されています。

マテリアルライブラリの設定の詳細については、マテリアルのWebサイトを参照してください。

3. Firebaseアカウントを作成し、Firebaseを使用してアプリケーションをデプロイする

この手順は簡単で、ほとんどのオンラインアカウント設定Webサイトと同様です。頭firebaseウェブサイトとアカウントを作成します。

次のステップは、Firebaseをホストとして使用するようにアプリケーションを設定することです。

VSコードターミナルに向かい、言います

npm install -g firebase-tools

インストールしたら、を使用してアカウントにログインする必要があります

Firebaseログイン

次のステップは、Firebase関連の設定ファイルを使用してプロジェクトに追加することです

firebaseinit

この手順では、アプリケーションでFirebaseをどのように使用するかに関するいくつかの質問をします。

このフォルダにどのFirebaseCLI機能を設定しますか？
今のところホスティングを選択してください
「新しいプロジェクトの作成」を選択し、アプリケーションの一意のIDを入力します。
パブリックディレクトリとして何を使用しますか？「dist / yourapplicationname」と言います。これは、Angularアプリケーションの本番ビルドファイルが保存される場所だからです。
シングルページアプリとして構成しますか？（はいと言って"）