Firebase
Angular2
angulafire2

angular + firebase速習

はじめに

tool description
Angular GoogleのSPAフレームワーク
Firebase GoogleのBaas(バックエンド担当)
AngularFire2 AngularとFirebaseを繋げるライブラリ

Angular導入

angular-cliを使う

npm install -g @angular/cli
ng new <ProjectName> --routing --style=scss
cd <ProjectName>
ng s

FirebaseApp作成&設定

App作成

https://firebase.google.com/?hl=ja

Database設定

databaseの設定でread, writeをtrueにする

スクリーンショット 2017-12-02 21.07.05.png

Config情報取得

スクリーンショット 2017-12-02 21.08.56.png
スクリーンショット 2017-12-02 21.09.16.png

config の内容をメモっておく

AngularFire2導入

angularfire2 setup に沿って設定。これでAngularFire2の設定が終了し、AngularでFirebaseが利用できるようになります。DBの取り扱い、Authについても上記チュートリアルに記載されています。

DBの違い

FireStoreがオススメ。

開発フロー

基本的には

  1. ページ、機能のコンポーネントを追加&routing
  2. 上記の.tsに機能を、.html, .scss にデザインを実装していく
  3. 必要に応じてservice, pipe を作成し開発を支える

各種ファイル追加方法

item command
component ng g c <component-name>
service ng g s <service-name> -m <module-name>
module ng g m <module-name> -m <module-name>
pipe ng g p <pipe-name>
directive ng g d <directive-name>

たとえば ng g c top-page を行い、 TopPageComponent を作成する。

ルーティングを行う

const routes: Routes の中に配列でパス、コンポーネントを設定していく

/src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TopPageComponent } from './top-page/top-page.component';


const routes: Routes = [
  {
    path: '',
    component: TopPageComponent,
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

この状態でrootを開くとトップページコンポーネントの内容が表示されている。

参考リンク