[AngularFire 2 ] Hello World - How To Write your First Query using AngularFire 2 List Observables ?
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 ?的更多相关文章
- [Firebase] 1. AngularFire, $save, $add and $remove, Forge
Basic angularFire options: $save, $add and $remove. The way connect firebase: var app = angular.modu ...
- [Angular] AuthService and AngularFire integration
Config AngularFire, we need database and auth module from firebase. import {NgModule} from '@angular ...
- [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 ...
- [AngularFire 2] Joins in Firebase
Lets see how to query Firebase. First thing, when we do query, 'index' will always help, for both SQ ...
- [AngularFire] Firebase OAuth Login With Custom Firestore User Data
import { NgModule } from '@angular/core'; import { AuthService } from './auth.service'; import { Ang ...
- [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, ...
- [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 ...
- [Angular] Reactive Store and AngularFire Observables
A simple store implemenet: import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } ...
- [AngularFire 2] Push, remove, update
import { Injectable } from '@angular/core'; import {RealtimeService} from "../shared"; imp ...
随机推荐
- split---将文件分割成多个小文件
split命令可以将一个大文件分割成很多个小文件,有时需要将文件分割成更小的片段,比如为提高可读性,生成日志等. 选项 -b:值为每一输出档案的大小,单位为 byte. -C:每一输出档中,单行的最大 ...
- [TypeScript] Restrict null and undefined via Non-Nullable-Types in TypeScript
This lesson introduces the --strictNullChecks compiler option and explains how non-nullable types di ...
- hdu 1588 Gauss Fibonacci(矩阵嵌矩阵)
题目大意: 求出斐波那契中的 第 k*i+b 项的和. 思路分析: 定义斐波那契数列的矩阵 f(n)为斐波那契第n项 F(n) = f(n+1) f(n) 那么能够知道矩阵 A = 1 1 1 0 ...
- js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 团队作业-Beta冲刺(2)
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...
- Zabbix主动代理模式 + 主动模式agent客户端
2.1.1 安装软件 ]# rpm -qa zabbix* zabbix-proxy-sqlite3-3.4.15-1.el7.x86_64 zabbix-proxy-mysql-3.4.15-1.e ...
- Python Unittest模块测试执行
记录一下Unittest的测试执行相关的点 一.测试用例执行的几种方式 1.通过unittest.main()来执行测试用例的方式: if __name__ == "__main__&quo ...
- vue踩坑记-在项目中安装依赖模块npm install报错
在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modu ...
- CISP/CISA 每日一题 五
CISA 每日一题(答) 信息系统审计师要确认系统变更程序中的: 1.变更需求应有授权.优先排序及跟踪机制: 2.日常工作手册中,明确指出紧急变更程序: 3.变更控制程序应同时为用户及项目开发组认可: ...
- Spring.net的Demo项目,了解什么是控制反转
Spring这个思想,已经推出很多年了. 刚开始的时候,首先是在Java里面提出,后来也推出了.net的版本. Spring里面最主要的就是控制反转(IOC)和依赖注入(DI)这两个概念. 网上很多教 ...