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. SQL、Linq相关字段搜索

    结合一些分词组件,如盘古,对于用户查询关键字红按钮很容易分出 ‘红’ ‘按钮’二个单词 我们假设产品名称列里面是红色,规格里面是按钮 /* 普通sql实现全文搜索declare @key1 nvarc ...

  2. 使用Ant 和 Maven打包发布命令行程序(转载)

    From:https://www.linux178.com/Java/maven-release.html 用Java写了一个命令行的小程序,使用的Intellij IDE是IDEA13原来一直使用A ...

  3. 【D3 API 中文手冊】

    [D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...

  4. absolute、relative,toggle()

    測试代码例如以下: <div> <div class="global">不应用样式</div> <div class="glob ...

  5. 微软自拍应用iOS版公布

    微软自拍(Microsoft Selfie)主要是支持自拍后还能加强自拍效果的功能. 只是和其它自拍应用不同的是.Microsoft Selfie 利用了机器学习来增强照片,应用会"考虑年龄 ...

  6. 搜索 debian8.7.1 ,google vs baidu

    国外的 Linux 比国内流行, debian官方网站只能找到当前版本DVD文件.想找旧版的Debian在百度一圈后徒劳无功,于是把目标转向 google ,只需要输入 debian?8.7.1-i3 ...

  7. matlab (.m)文件生成 windows 可执行(.exe)文件

    mex -setup:设置 C 语言编译器:(如果本地安装有 visual studio 20xx 集成开发环境,则会自动选择其下的 C/C++ 编译器 ) 将运行时环境(runtime enviro ...

  8. Apache通用日志工具commons-logging和Log4j使用总结

    转自:https://blog.csdn.net/lzl13391522110/article/details/53758536 Apache通用日志工具commons-logging和Log4j使用 ...

  9. Java学习笔记七 常用API对象三

    一.泛型:简单说就是对对象类型进行限定的技术 public class GenericDemo { public static void main(String[] args){ /*泛型作为1.5版 ...

  10. django 简单会议室预约(4)

    基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...