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. 51Nod 飞行员配对(二分图最大匹配)(匈牙利算法模板题)

    第二次世界大战时期,英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2名飞行员,其中1名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中, ...

  2. 注意string的insert函数的几种形式

    string (1) string& insert (size_t pos, const string& str); substring (2) string& insert ...

  3. 软件project经验总结系列之三 - 计划阶段控制

    本文为软件project经验总结系列文章的第三篇.按照总论文章所设立的范围划分,本阶段重点讲述计划阶段的控制过程以及控制思路,笔者所站在的角度是乙方角度来进行表述整个阶段的推动过程,但对于甲方公司其基 ...

  4. vim-录制命令的使用

    使用vim时无意间触碰到q键,左下角出现“recording”这个标识,这是vim的一个强大功能. 他可以录 制一个宏(Macro),在开始记录后,会记录你所有的键盘输入,包括在insert模式下的输 ...

  5. 【2017 Multi-University Training Contest - Team 9】FFF at Valentine

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6165 [题意] 一张有向图,n个点,m条边,保证没有重边和自环.询问任意两个点能否满足任何一方能够到达另 ...

  6. windows服务插件利器-新生命组件XAgent使用心得

    1.简单介绍 XAgent为大石头带领下的新生命团队自己开发的一个.Net下的常用的Windows服务管理组件利器,通过在控制台中简单的输入1,2,3,4,5等数字可以实现一步安装.卸载Windows ...

  7. asp.net 查询sql数据表的网页模板

    最近因为工作需求,要制作一个网页模板,主要是用于快速开发,可以查询Sql数据表信息的模板, 昨天做好了,这个只是一个Demo,但是功能已经齐全了, 开发新的网站时,需要新增一个xml,复制粘贴网页的前 ...

  8. 业余学习react 学习记录

    http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...

  9. 初识ThreadLocal

    近期公司在进行Java开发者的招聘活动,当中有一道面试题是这种:"请简单描写叙述一下ThreadLocal类的作用." 结果发现有非常多的面试者没有听说过ThreadLocal或者 ...

  10. vanzo-代码共享平台地址

    网页编辑.烧录代码 1.登录服务器 192.168.1.52 2.选择modules 3.选择builder 4.在 Project Name:填入要拉的项目名 选择版本:user,eng,userd ...