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. 一个令人蛋疼的NDK链接错误

    背景 我们APP的引擎包engine.so.包括了A.B.C三个project.但每次都是源代码形式编译,导致svn上存在多份同样代码拷贝. 很不科学. ..核心的Bproject由我维护.整个SO编 ...

  2. OPENSSL 制作 Ikev2证书

    OPENSSL 制作 Ikev2证书 在一个 VPS 上配置 IKEV2 VPN 服务器时,用 OPENSSL 制作了所需的数字证书,奇怪的怎么弄都无法连接服务器,一直提示 "IKE_SA ...

  3. 制作 wordpress 博客静态化到本地

    wget 克隆 wordpress 博客镜像 wget -e robots=off -w 1 -xq -np -nH -pk -m -t 1 -P "./wordpress.org" ...

  4. 记号(notation)的学习

    数学的记号(notation) 记号具体代表什么含义,取决于你的定义: 比如这样的 d⃗  一个向量,每个分量 d(i) 表示的是从初始结点 v 到当前节点 vi 的最短路径:也即这样的一个向量的每一 ...

  5. Mahout应用

    不多说,直接上干货! Mahout作为Apache基金会的顶级项目之一,Mahout的应用也极其广泛,一般分为商业应用和学术应用. 在商业应用中,Adobe AMP公司使用Mahout的聚类算法把用户 ...

  6. RS-485总线和Modbus通信协议的关系

    一.RS-485总线 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插件以及通信协议,只是OSI规范中物理层的一个标准,RS-485总线采用差分平衡传输方式.由于RS ...

  7. 【习题 7-8 UVA-12107】Digit Puzzle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 枚举最大层数.(也即改变的数字个数 然后枚举第一个改哪个数字,第二个改哪个数字.. 一定要注意字典序问题. 每次优先 ...

  8. 图文具体解释 IntelliJ IDEA 15 创建 Maven 构建的 Java Web 项目(使用 Jetty 容器)

    图文具体解释 IntelliJ IDEA 15 创建 maven 的 Web 项目 搭建 maven 项目结构 1.使用 IntelliJ IDEA 15 新建一个项目. 2.设置 GAV 坐标 3. ...

  9. LayoutAnimation-容器动画

    1.LayoutAnimation的作用主要就是加载到一个layout上,让这个layout里面的所有控件都有相同的动画效果.现在用到的是在listview中添加动画,使得它每一个item都是滑落显示 ...

  10. mysql 获取自增id的值的方法

    原生jdbc方式: Statement.getGeneratedKeys() 示例: Statement stmt = null; ResultSet rs = null; try { // // C ...