AngularFire2のAPI速習

10567 ワード
Angular2 Firebase Angular Angular テキストリンク

AngularFire2 のAPIがまとまってなかったので、まとめます。

Firebase自体については、 Firebaseの始め方 を御覧ください。
Angular2については、 色々記事あるのでそちらを。

インストール

npm install firebase angularfire2 --save

基本の構成

typescript
import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'project-name-app'
})
export class MyApp {
  constructor(af: AngularFire) {

    // 下記「FirebaseList」を見てください
    let itemList = af.database.list('/items');

    // 下記「FirebaseObject」を見てください
    let itemObject = af.database.object('/items/myObject');
  }
}

FirebaseList

正確には FirebaseListObservable<any[]> で、Observableのメソッド(subscribeとか)も使える

typescript

// `/items` データへの参照を取る。
// すでに`/items`があってもなくても、同じ動作をする
let itemList = af.database.list('/items');


// 自動生成の一意キー(`-`で始まる文字列)で対象パス以下にデータを作成
// 下記実行では `items/-KhLz7l_a6PnNyE_W_JV/` 以下にデータが作成される
itemList.push({text: '自動生成キーだよ', ammount: 3});


// 指定名で対象パス以下にデータを作成。すでに存在した場合は上書き
// 下記実行では `items/MyGreatItem` 以下にデータが作成される
itemList.update('MyGreatItem', {text: 'マイ・グレート・アイテム、という名前を指定したよ', ammount: 3});
itemList.update('MyGreatItem', {descriptoin: '説明追加だよ'}); // `description` 項が追加される
itemList.update('MyGreatItem', {ammount: 199}); // `ammount` 項だけが更新される。ほかはそのまま。


// 指定したキーのデータを削除する
itemList.remove('MyGreatItem');


// データの取得
itemList.subScribe(data => {
  console.log(data); // 初回取得時＆データ更新されたときに呼ばれる
})


// ネイティブ実装への参照。firebase(js)での `firebase.database().ref('/items')` と同じ。
// AngularFireの世界から出たいときなどに
itemList.$ref;

FirebaseObject

正確には FirebaseObjectObservable<any> で、Observableのメソッド(subscribeとか)も使える。

typescript
// `/items/myItem`への参照を取る
let itemObj = af.database.object('/items/myItem');


// データの新規作成, or 上書き
// 当該名でデータが存在すれば上書き、
itemObj.set({text: '私のアイテムです', ammount: 4});


// 部分更新。存在しない場合は新規作成
itemObj.update({ammount: 299});


// 自分自身を削除
itemObj.remove();


itemList.$ref; // ネイティブへの参照。firebase(js)での `firebase.database().ref('/items')` と同じ。

update と setの違い

update と set の違いは上書きか更新か。
set は内部的にremoveを呼んでる(のと同じ動き)

typescript

// 当該データが存在しない場合は動きが同じ

itemObj.update({text: '私のアイテムです', ammount: 3});
// {text: '私のアイテムです', ammount: 3}

itemObj.set({text: '私のアイテムです', ammount: 4});
// {text: '私のアイテムです', ammount: 4}


// 当該データが既に存在する場合は…

itemObj.update({ammount: 299}); 
// {text: '私のアイテムです', ammount: 299} 
// 想定通り


itemObj.set({ammount: 399}); 
// {ammount: 399} 
// remove() されて update() された！