Angular5この記事は次の記事の続きです。編集・削除編また、この記事は次の教材を参考に作成しています。この教材がないと細々としたところはわからないと思います。Udemy前回は、編集と削除の機能を実装しました。アイコンや編集画面も併せて作成しました。今回は、一つのコンポーネントに機能をすべて詰め込んでいるので分散させて拡張性を高めて、今後の開発をしやすくしていきます。Angularで新規ユーザー登録機能を実装して、Firebase認証設定をおこない、サインアップ機能を実装していきたいと思います。その前に今後実装する機能について確認していきましょう。等々、増やしたい機能があります。今のコンポーネントで一杯一杯なコード量なのでこれ以上増やすと機能の拡張をしづらくなってしまいます。そこでコンポーネントを幾つか分けて機能の分散を試みます。コンポーネントの分散まずチャット機能を別のコンポーネントに移します。次のコマンドを実行します。chatこのchatコンポーネントに今まで作ってきたコンポーネントを移します。importやconstとクラス内を移動します。importの参照パスの変更と、コンストラクター内の定義をngOnInit()に移します。commentsRefの定義はコンストラクター内に残します。commentsRefは変数ではなく定数なのでコンストラクターで定義してしまいます。これまでのコンポーネントには不要なものは全て消して、htmlとcssの移しも行います。切り取りコピペでかまいません。app.component.htmlに次のコードを入れればこれまで通り動きます。<app-chat></app-chat>app.component.tsをシンプルに保つのが実装に最適となります。@NgModuleコンポーネントやパイプやサービスなどをひとまとまりにする機能が@NgModuleです。今はapp.module.tsでひとまとまりにしています。これらを機能ごとに分けて拡張性を高めたいと思います。Angularのスタイルガイドでは4つにモジュールを分けることを推奨しています。Guideルートモジュールアプリケーションの起動に使いますapp.module.tsBrowserModuleを読み込む機能モジュール機能ごとにコンポーネントやサービスをまとめるモジュール共有モジュールサイト全体で使う共通のサービスをまとめるモジュールコアモジュールサイトに一つしか必要ないものをまとめておくためのモジュールサイトヘッダーなどこれらを作っていきます。共有モジュールまず共有モジュールから作っていきます。次のコマンドを実行します。sharde作成したshardeモジュールを開くとCommonModuleがインポートされています。‘@angular/common’;これは、NgIfやNgForの機能を持つBrowserModuleとほど同じ役割を持ちます。BrowserModuleはアプリに必要なサービスをプロバイドするため、ルートモジュールでのみインポートすべきモジュールです。そのため、このルートモジュール以外ではCommonModuleがインポートされています。Qiitaさらに、app.module.tsから共有部分をshardeモジュールに移します。‘../pipe/comment-date.pipe’;共有部分とはどこからでもアクセスしたいデコレーションやパイプなどがそれに当たります。@NgModuleのインポートに書き加えるのを忘れずに。これは共有モジュールが他のモジュールでインポートされれば、共有モジュールのexportsを自動的に読み込むので、exports[]にあれるモジュールは改めてインポートする必要がなくなります。exportsにここで読み込んでいるすべてを追加します。app.module.tsに次のインポートを追加しましょう。‘./shared/shared.module’;これでapp.moduleでSharedModuleのexportsが使うことができるようになりました。コアモジュール同じようにコアモジュールを作っていきます。coreまず、app.module内に次のコードを追加しましょう。‘./core/core.module’;では、コアモジュールを開き編集していきます。ここにはサイトに一つしか無いものを加えます。SkipSelfを加えます。クラス内にコンストラクターとして次のコードを定義します。これで、二重に読み込まれるのを防ぐようになりました。この記述はAngular公式を参考にしています。_)mヘッダーを作るさて、今回はヘッダーをここに追加するので次のコマンドを入力します。core/headerこれをコアモジュールの@NgModule.exports[]内に追加します。app.component.htmlの先頭に<app-header></app-header>を追加し、ヘッダーテンプレートに次のコードに書き換えます。#ddd;}ヘッダーの構造ヘッダーの構造を見ていきましょう!サーバーを実行すればこのように表示されることになります。今、ヘッダーを追加したわけですが、短いコードを追加した割にはしっかりとしたヘッダーができています。これもBootstrapのおかげです。navbar:最も基本的なBootstrapのヘッダーのスタイル。これだけでもシンプルだが見た目は良い。Bootstrapnavbar-brand:サイト名に利用する装飾(Bootstrap)navbar-text:ナビゲーションバー用テキスト装飾(Bootstrap)これらのスタイルを簡単に使うことでスッキリしたヘッダーが簡単にできます。これで共有モジュールとコアモジュールを作ることができました。次は、ルートモジュールと機能モジュールに取り掛かりたいところですが、一旦置いておいて、ログインページの作成やルーティングの設定からしていきます。ルーティングを設定するでは、ルーティングを設定していきましょう。ここはほとんど次のtutorialのおさらいです。まんくつ次のコマンドを実行します。–module=app–flat:ディレクトリを作らずルートにファイルを作成します–module=app:app.module.tsにルーティングモジュールを読み込ませます。自動的にapp-routingがapp.module.tsインポートと@NgModuleに追加されます。ルートを指定するためにインポートとRoutesを定義します。},];チャットコンポーネントがルートパスになります。次のようにexportsを指定して、app.module.tsに読み込ませます。このコードでルートモジュールにRoutesとして定義したパスを渡し、ルーティング設定をおこないます。次に、存在しないページにアクセスした際のエラーページを作成しましょう。次のコマンドを実行します。error/not-found教材からhtmlとcssをコピペします。not-found.component.htmlnot-found.component.cssでは、app-routingを開き次のコードを追加します。}この二つのコードを追加します。‘**’:指定したパス以外を網羅したワイルドカードです。Routesは上から評価するので一番下で指定しましょう。Routes指定していないパスは全てエラーコンポーネントにアクセスします。これでエラーページが実装できました。htmlの構造では、htmlを見ていきましょう。最初の要素でcardクラスを指定して子要素を一枚のカードのように表示させています。これはBootstrapの機能です。カードの装飾自体はcssで指定しています。text-centerで子要素をカードの中央に表示するようにしています。これもBootstrapの機能です。ページが見つかりません」がカードとして表示されるようになります。シンプルですが使い勝手の良いエラーページになっています。ユーザー新規登録機能ざっと、機能分散ができたところで、ルーティングも含めて、ユーザー登録機能を実装してみたいと思います。ユーサー作成ユーザー作成機能を追加していきます。次のコマンドを実行します。sign-up教材からhtmlとcssをコピペします。sign-up.component.htmlsign-up.component.cssでは、エラーページと同じようにルーティング設定していきます。app-routingを開き次のコードを追加します。これで、http://localhost:4200/signupにアクセスするとサインアップページが開くようになりました。ここで、signupへの導線がないのでヘッダーをloginからsignupに変更して、hrefをrouterLinkに変更します。routerLink=”/signup”また、上のホームアクセスも次のように変えます。routerLink=”/”そして、coreモジュールでもappモジュールのようにAppRoutingModuleをインポートすればルーター設定がヘッダーでも効くようになります。実際にページ遷移できるか確認してみてください。次にユーザー認証機能を実装していきます。ユーザー作成サービス次のコマンドを実行しましょう。core/service/authサービスを使う理由としては、コンポーネントでデータを保存するのが推奨されていないからです。データベースに値の保存をさせる機能はサービスを使うことが推奨されています。作成したサービスで認証にかかわる定義をしていきます。auth.service.tscreate():emailとpasswordを受け取ってAngularFireAuthというFirebase認証機能のcreateUserWithEmailAndPasswordというユーザー作成メソッドを使ってユーザーを新規作成します。auth$:ObservableをSubjectによってauthを任意のタイミングで実行します。今回は新規作成ボタンがクリックしされ、createが実行された時にストリームから入力値を受け取れるようにします。then():アカウントを作成したらルートパスに戻るようにします。Subjectの使い方がややこしいですが、今回のようにObservableを扱い、subscribeではなく任意のタイミングで値を取得したいときはSubjectをこのように記述し、使用ます。newでObservableを初期化して任意のタイミングで値を正確に取得します。サービスを追加したらコアモジュールにインポートするのを忘れずに。sign-up.component.htmlのクリックイベントは次のコードです。(ngSubmit)=”signup(f)”そして、inputタグ内のngModelです。これは今まで[(ngModel)]としてクリックイベントで入力値を受け取る時に使ってきましたが、今回はとくに括弧は付けずにこのままで機能します。今回はその代わりと言ってはなんですが、(Click)のように(ngSubmit)に括弧がつきます。これはフォームタグ内のtype=”submit”のボタンのクリックイベントに反応し、ngModelを持つinputタグ内の入力値をf配列に組込みます。はじめのinputタグの入力値は、name=”email”なのでf.value.nameに格納されます。これで入力値をデータベースに受け渡す機能が完成しました。その前に、サービスに入力値を受け渡す機能を実装しましよう。sign-up.component.tsに幾つかコードを追加していきます。AuthServiceクラス内に、signup()を加えます。f.value.password);}これで、入力値がサービスに受け渡されるようになりました。インポートも忘れずに。Firebase認証設定さて、一通り認証機能を実装しました。終わりではありません。Firebase側でメールアドレスでログインできるように設定していきましょう。Firebaseを開きます。console以前作成したプロジェクを開きコンソール画面を開きます。まんくつコンソール画面まで進み、Authentication(認証)を開きます。次にログイン方法を指定していきます。今回はメールをログイン情報とするので、メール/パスワードの設定をします。メール/パスワードの右端の編集アイコンをクリックします。有効にして、保存をクリックします。メール/パスワードが有効になりました。これで、メールとパスワードでログインできるようになりました。Inをクリックし、必要事項を入力し、登録してみましょう。Firebaseでログイン方法を指定した、画面左上Authentication真下の、「ユーザー」タグを開くと登録したメールアドレスが追加されているはずです。これでアプリからユーザーを登録できるようになりました。次回はログイン・ログアウトとりあえず今回は目的の機能分散とユーザー登録まで終わったのでここまでにします。次回はログイン・ログアウト機能を実装させていきます。段々とアプリ完成が見えてきました。アプリ制作!名言メモアプリを作る!2018年1月16日から始めたAngularですが、早いものでもうすぐ一ヶ月が経とうとしています。翻訳(意訳多め)しています。コンポーネントが作れない?!エラー対策!たとえば、次のようなコマンドを入力してエラーになることがあります。早期アクセス」を追加する!index.htmlに追加したいフォントを追加します。Materialのステッパーを個人的に把握がてら紹介をしたいと思います。ドラッグアンドドロップでDom要素を自由に動かしたい!こちらのライブラリで実装できました。コメントをキャンセルメールアドレスが公開されることはありません。アニメーション入門!こんなことできますよ。