In this lesson we are going to use AngularFire 2 for the first time. We are going to configure the AngularFire 2 module, inject the AngularFire service in our service layer and use it do our first Firebase query: we are going to retrieve a list of objects from the database.

Install:

//install 

npm install --save angularfire2

Import AngularFireModule in app.module.ts:

...
import {firebaseConfig} from "../environments/firebase.config";
import {AngularFireModule} from "angularfire2"; @NgModule({
...
imports: [
...
AngularFireModule.initializeApp(firebaseConfig)
],

Load the data in service: realtime.service.ts:

import { Injectable } from '@angular/core';
import {AngularFire, FirebaseListObservable} from "angularfire2"; @Injectable()
export class RealtimeService { constructor(private af: AngularFire) {
const courses$: FirebaseListObservable<any> = af.database.list('courses');
courses$.subscribe(
val => console.log("val", JSON.stringify(val, null, ))
)
} }

firebase database.list() method return 'FirebaseListObservable' type.

[AngularFire 2 ] Hello World - How To Write your First Query using AngularFire 2 List Observables ?的更多相关文章

  1. [Firebase] 1. AngularFire, $save, $add and $remove, Forge

    Basic angularFire options: $save, $add and $remove. The way connect firebase: var app = angular.modu ...

  2. [Angular] AuthService and AngularFire integration

    Config AngularFire, we need database and auth module from firebase. import {NgModule} from '@angular ...

  3. [AngularFire 2] Object Observables - How to Read Objects from a Firebase Database?

    In this lesson we are going to learn how to use AngularFire 2 to query objects, and read them from t ...

  4. [AngularFire 2] Joins in Firebase

    Lets see how to query Firebase. First thing, when we do query, 'index' will always help, for both SQ ...

  5. [AngularFire] Firebase OAuth Login With Custom Firestore User Data

    import { NgModule } from '@angular/core'; import { AuthService } from './auth.service'; import { Ang ...

  6. [AngularFire] Angular File Uploads to Firebase Storage with Angular control value accessor

    The upload class will be used in the service layer. Notice it has a constructor for file attribute, ...

  7. [AngularFire] Resolve snapshotChanges doesn't emit value when data is empty

    Updated to AngularFire2 v5.0. One important change is that you need to call .snapshotChanges() or .v ...

  8. [Angular] Reactive Store and AngularFire Observables

    A simple store implemenet: import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } ...

  9. [AngularFire 2] Push, remove, update

    import { Injectable } from '@angular/core'; import {RealtimeService} from "../shared"; imp ...

随机推荐

  1. 5.brackets 快捷键 有大用

    转自:https://blog.csdn.net/u012011360/article/details/41209223 ctrl+b 当选中一个文本时,会出现相同的文本,被高亮显示 按ctrl+b ...

  2. Es5正则

    ##JSON(ES5) 前端后台都能识别的数据.(一种数据储存格式) XNL在JSON出来前 JSON不支持  undefinde和函数. 示列:let = '[{"useername&qu ...

  3. find---查找文件或目录

    ind命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录和文件全部进行 ...

  4. ifconfig---配置和显示Linux内核中网络接口

    ifconfig命令被用于配置和显示Linux内核中网络接口的网络参数.用ifconfig命令配置的网卡信息,在网卡重启后机器重启后,配置就不存在.要想将上述的配置信息永远的存的电脑里,那就要修改网卡 ...

  5. __get__()方法研究

    看源码的时候发现了这个魔法方法 class A(object): def __init__(self): self.name = 'mod' def __get__(self, instance, o ...

  6. 【Educational Codeforces Round 36 D】 Almost Acyclic Graph

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找到任意一个环. 然后枚举删掉其中的某一条边即可. (因为肯定要删掉这个环的,那么方法自然就是删掉其中的某一条边 (其它环,如果都包 ...

  7. IntelliJ IDEA如何导入maven结构的web工程

    第一步:打开一个现有(也可以不打开,直接用import选择Maven类型)的IntelliJ IDEA工程,点击菜单的"File"->"new"-> ...

  8. 洛谷 P1102 A-B数对

    P1102 A-B数对 题目描述 出题是一件痛苦的事情! 题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的A+B Problem,改用A-B了哈哈! 好吧,题目是这样的:给出一串数以及一个数字C,要求 ...

  9. 分享一段php获取随意时间的前一天代码

    <?php /** * 获取给定日期的前一天 * @param string $date * @return string $yesterday */ function getYesterday ...

  10. userAgent判断客户端,以及各个浏览器的ua

    userAgent判断客户端,以及各个浏览器的ua http://blog.csdn.net/yoyoosyy/article/details/70142884 navigator.userAgent ...