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. html --- bootstrap 框架 (栅格系统布局)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. HDU 4007 Dave(离散化)

    Dave Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others)Total Submis ...

  3. syslog日志介绍

    一. syslog简介 syslog是一种工业标准的协议,可用来记录设备的日志.在UNIX系统,路由器.交换机等网络设备中,系统日志(System Log)记录系统中任何时间发生的大小事件.管理者可以 ...

  4. 源码安装 ipython

    https://blog.csdn.net/huobanjishijian/article/details/51470898

  5. 小米开源文件管理器MiCodeFileExplorer-源码研究(9)-入口分析

    AndroidManifest.xml是Android应用程序最重要的配置文件. 入口文件和intent-filter <application android:icon="@draw ...

  6. 【Educational Codeforces Round 36 A】 Garden

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举用哪一个桶就好 [代码] #include <bits/stdc++.h> using namespace std; ...

  7. 使用 Bluemix™ Live Sync 高速更新 Bluemix 上执行的应用程序实例

    假设您要构建 Node.js 应用程序,那么能够使用 IBM® Bluemix® Live Sync 高速更新 Bluemix 上的应用程序实例,并像在桌面上进行操作一样进行开发,而无需又一次部署.执 ...

  8. [Java开发之路](16)学习log4j日志

    1. 新建一个Javaproject.导入Jar包(log4j-1.2.17.jar) Jar包下载地址:点击打开链接 2. 配置文件:创建并设置log4j.properties # 设置 log4j ...

  9. linux host主机名配置

    1.查看主机名 #hostname 2.查看ip #ifconfig 2.添加主机名配置 #vi /etc/hosts 新增一行 172.23.26.195 vhost145.idmp.safe

  10. Day2二分图笔记

    定义 左边一堆点 右边一堆点 树是一个二分图,奇数深度和偶数深度可以组成二分图, 二分图匹配 左边的点和右边的点有边 匈牙利算法 可能的答案 ans,n-ans,m-ans,n+m-ans  ||   ...