Angular❎Firebaseでの本格的なSPA開発｜もり

FireAuth(Google認証)について

今回はFirebaseのAuthentication(認証)について書いていこうと思います。Authenticationは現在たくさんの認証方法があります。その中でもよく使うであろうGoogle認証についてやっていこうと思います。実際僕のプロジェクトでもGoogle認証を使用しています。まず始めにやることは、FirebaseのAuthenticationからGoogle認証を有効にします。次にserviceファイルを作成する。 ng g s services/aut

FirebaseとAngularの連携

前回Firebaseの環境構築を行いました。ですがこれだけではダメです。次はAngularとFirerbaseの連携を行います。進め方なのですが具体的な手順に関しましては英語なのですがこちらに記載されていますので参照してみてください。これに沿ってやっていきます。まずはコマンドを叩きます。 npm install firebase @angular/fire --save これをプロジェクトルートで叩きます。次に、Installation and Setupを押

Firebaseの導入

結構前になりますが、AngularにFirebaseの導入をしたので忘れないうちに書き留めておこうと思います。 Firebase とは Google が提供しているモバイルおよび Web アプリケーションのBaaS(バックエンドサービス)です。 Firebaseの機能としては、認証(Authentication)、データベース(Database)、ストレージ(Storage)、ホスティング(Hosting)、Functionsなど便利な機能がたくさんあります。右上のコ

Angularのモジュール、コンポーネントの作成

今回もタイトルの通り、モジュールとコンポーネントの作成をおこなっていきたいと思います。 SPA開発では基本的にはコンポーネント単位で区切って開発していくのでモジュール、コンポーネントの作成は必須です。モジュールの作成方法からしていきましょう。 ng g module モジュール名これをターミナルで実行すればモジュール作成ができます。*モジュール名は任意のものを入れてください。ちなみにgとはgenerateの略です。 ng generate module モジュー

Angular Formの実装

今回は僕のプロジェクトのFormの実装についてのお話をします。僕の求人webアプリではユーザーのプロフィール、企業側のプロフィール、求人投稿の３つのフォームがあります。全部あげるとコード量が多くなってしますので今回はにユーザーのプロフィールの完成形のコードだけにします。・ngSubmit...　Formを送信するに使います。・mat-error... Formのエラーメッセージを表示したり際に使用します。Formに関しては必須項目です。・ngIf... 条

AngularのFormについて

今回はAngularのFormについて書いていこうと思います。Form関連はつまずきポイントだと思います。僕自身もFormでつまずきました。マークアップはAngular Materialでほぼほぼのことはできるので使用をお勧めします。僕のプロジェクトではForm関連が３つあります。ユーザープロフィール、企業側のプロフィール、記事（求人）投稿のフォームがあります。Formを作成するにあたり必要になったのが１, FormControl 2, FormGroup 3,

Angular Materialについて

今回はAngular Materialの導入使い方について書いて行きたいと思います。まず始めにAngular MaterialとはGoogleが提唱しているMaterial Designにのっとったものなので間違いはないと思います。モダンなスタイルが簡単に実現できます。この辺はAngular Materialの公式サイトをみた方が早いと思うのでURLを載せておきます。 Material Designについても本当に勉強になることが多いのでURlを載せておきます。見やすい

Angularのプロジェクト作成方法

今回はAngularのプロジェクト作成方法について書いていこうかなと思います。（＊環境構築はしている前提とする) プロジェクト名はなんでもいいのですが、例えばTodoアプリのようなものを作ると仮定して、プロジェクトを作成したいディレクトリで ng new 作成したいプロジェクト名（例）todo-app これがプロジェクトを新規作成するコマンドになります。このコマンドを叩くと続いて出てくるのが Would you like to add Angular routing?

2.Angular環境構築とAngular Material、マークアップ

Angularの環境構築とheader、footer、Angular Materialを使ってsearch画面のマークアップを行いました。環境構築すんなり行くかなと思ったんですが、nodeのパスが通ってないと怒られ躓いたのですがなんとか環境構築完了しました。 Angularの環境構築に関してはAngular Cliに全て乗っています！コマンドはこんな感じです↓ しかし、僕の場合は下記のようにコマンドが見つかりませんと怒られました。wパスが通っていなかったようです。

Angular❎Firebaseでの本格的なSPA開発

記事一覧