[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 ...
随机推荐
- Kinect 开发 —— Kinect studio
This tool can record all the data coming into an application from a Kinect unit. You can then view, ...
- layui动态无限极菜单
ajax加jQuery实现 效果图 参考文章:https://www.wanpishe.top/detail?blogId=644aa177-9795-456a-8090-ee1264bf5d9d
- AngularJS渲染性能分析
作者:Jiang, Jilin AngularJS中,通过数据绑定.能够十分方便的构建页面.可是当面对复杂的循环嵌套结构时,渲染会遇到性能瓶颈.今天,我们将通过一些列实验,来測试AngularJS的渲 ...
- js ---- 实现千位分隔符
第一种方法: var num = 1234567; var string = num.toString(); var arr = string.split('').reverse(); console ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(0)-初步研究
2011年对着书本Android应用开发揭秘,写了2个月的HelloWorld. 现在想复习并深入,我没有耐心再去一点点地敲代码了. 4年前自己是个学生,实习,现在有工作,只能业余时间研究. ...
- View源码分析如何创建
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 文/jj120522 博主导读:View是Android中最重要的控件,几乎所有的控件都与View相 ...
- Linux下守护进程精析
什么是守护进程? 守护进程就是通常所说的Daemon进程,它是Linux中的后台服务程序. 它是一个生存期较长的进程,通常独立于终端而且周期性的运行某种须要的任务以及有时候会等待一些将会发生的 ...
- actionbar spinner-用法实例
今天需要更改一个actionbar上的spinner的字体颜色,结果试了好长时间都没有解决,最后才发现,原来他是在代码下增加的一个textview,然后使用adapter加载的,并不是直接用frame ...
- Android学习笔记之Bitmap位图虽触摸点移动
package xiaosi.bitmap; import android.app.Activity; import android.os.Bundle; public class mianActiv ...
- Shell中反引号(`)与$()用法的区别
今天有人提问: echo `echo \\\\\\\w` echo $(echo \\\\\\\w) 为什么输出的不一样? 这就引申出了另一个问题:反引号与$()有没有区别? 这是一个非常有意思的问题 ...