[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 ...
随机推荐
- 一个令人蛋疼的NDK链接错误
背景 我们APP的引擎包engine.so.包括了A.B.C三个project.但每次都是源代码形式编译,导致svn上存在多份同样代码拷贝. 很不科学. ..核心的Bproject由我维护.整个SO编 ...
- OPENSSL 制作 Ikev2证书
OPENSSL 制作 Ikev2证书 在一个 VPS 上配置 IKEV2 VPN 服务器时,用 OPENSSL 制作了所需的数字证书,奇怪的怎么弄都无法连接服务器,一直提示 "IKE_SA ...
- 制作 wordpress 博客静态化到本地
wget 克隆 wordpress 博客镜像 wget -e robots=off -w 1 -xq -np -nH -pk -m -t 1 -P "./wordpress.org" ...
- 记号(notation)的学习
数学的记号(notation) 记号具体代表什么含义,取决于你的定义: 比如这样的 d⃗ 一个向量,每个分量 d(i) 表示的是从初始结点 v 到当前节点 vi 的最短路径:也即这样的一个向量的每一 ...
- Mahout应用
不多说,直接上干货! Mahout作为Apache基金会的顶级项目之一,Mahout的应用也极其广泛,一般分为商业应用和学术应用. 在商业应用中,Adobe AMP公司使用Mahout的聚类算法把用户 ...
- RS-485总线和Modbus通信协议的关系
一.RS-485总线 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插件以及通信协议,只是OSI规范中物理层的一个标准,RS-485总线采用差分平衡传输方式.由于RS ...
- 【习题 7-8 UVA-12107】Digit Puzzle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 枚举最大层数.(也即改变的数字个数 然后枚举第一个改哪个数字,第二个改哪个数字.. 一定要注意字典序问题. 每次优先 ...
- 图文具体解释 IntelliJ IDEA 15 创建 Maven 构建的 Java Web 项目(使用 Jetty 容器)
图文具体解释 IntelliJ IDEA 15 创建 maven 的 Web 项目 搭建 maven 项目结构 1.使用 IntelliJ IDEA 15 新建一个项目. 2.设置 GAV 坐标 3. ...
- LayoutAnimation-容器动画
1.LayoutAnimation的作用主要就是加载到一个layout上,让这个layout里面的所有控件都有相同的动画效果.现在用到的是在listview中添加动画,使得它每一个item都是滑落显示 ...
- mysql 获取自增id的值的方法
原生jdbc方式: Statement.getGeneratedKeys() 示例: Statement stmt = null; ResultSet rs = null; try { // // C ...