Create a Firebase Servcie:

import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
@Injectable()
export class FirebaseService{
constructor(private _http: Http){ } addOneHistory(keyword: string){
const body = JSON.stringify({keyword: keyword});
return this._http.post('https://xxx.com/searchHistory.json', body)
.map( (res: Response) => {
return res.json();
});
} getHistories(){
return this._http.get('https://xxxx/searchHistory.json')
.map( (res: Response)=>{
return res.json();
})
.map( (hObj) => {
return Object.keys(hObj)
.map( (key)=>{
return hObj[key];
});
})
}
}

Display the list:

import {Component, OnInit, Input} from 'angular2/core';
import {FirebaseService} from './FirebaseService';
@Component({
selector: 'history',
template: `<ul><li *ngFor="#item of histories | async">
{{item?.keyword}}
</li></ul>`
}) export class HistroyComponent implements OnInit { histories; constructor(private _fireBaseService:FirebaseService) {
} ngOnInit() {
this.histories = this._fireBaseService.getHistories();
}
}

[Angular 2] Get start with Firebase的更多相关文章

  1. Angular 小试牛刀[2]:CI(travie+firebase)

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建 ...

  2. [Firebase] 4. Firebase Object related Database

    The idea: This post we are going to learn how to build a Firebase Forage with object related databas ...

  3. [Firebase] 3. Firebase Simple Login Form

    Using $firebaseSimpleLogin service. Here we use three methods for login, logout, register and getCur ...

  4. 二识angularJS

    前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为 ...

  5. [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, ...

  6. [Angular] Setup automated deployment with Angular, Travis and Firebase

    Automate all the things!! Automation is crucial for increasing the quality and productivity. In this ...

  7. Firebase 相关

    谷歌在 2016年 I/O 大会上推出了 Firebase 的新版本.Firebase 平台提供了为移动端(iOS和Android)和 Web 端创建后端架构的完整解决方案. 从一开始的移动后端即服务 ...

  8. 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可 ...

  9. [Firebase] 2. Firebase Event Handling

    /** * Created by Answer1215 on 11/9/2014. */ var app = angular.module('app', ['firebase']); app.cons ...

随机推荐

  1. ExtJs API 下载以及部署

    ExtJs API 下载方法 1.进入sencha官网:https://www.sencha.com/ 2.点击“Docs”进入文档帮助页面:http://docs.sencha.com/ 3.点击左 ...

  2. 重拾C++ 基础知识总结(二)

    1.标准库string类型: 用户程序要使用string类型对象,必须包含相关头文件 #include <string> 字符串字面值与标准库string类型不是同一种类型,字符串字面值是 ...

  3. 用BroadcastReceiver监听网络状态的变化

    在用户浏览网络信息时,如果网络突然断开,可以及时的提醒用户网络已断开.要实现这个功能,我们可以实现一个广播接收者来接收网络状态改变的广播,当由连接状态变为断开状态时,系统会发送一条广播,广播接收者接收 ...

  4. CSS,点击去除虚线边框代码

  5. js关于DOM和BOM

    关于BOM和DOM BOM 下面一幅图很好的说明了BOM和DOM的关系 BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及 ...

  6. 3 Longest Substring Without Repeating Characters(最长不重复连续子串Medium)

    题目意思:求字符串中,最长不重复连续子串 思路:使用hashmap,发现unordered_map会比map快,设置一个起始位置,计算长度时,去减起始位置的值 eg:a,b,c,d,e,c,b,a,e ...

  7. [javascript]事件冒泡处理

    <!DOCTYPE html> <html> <head> <style type="text/css"> #box1 { widt ...

  8. DeDe调用body文章内容

    {dede:sql sql='select * from dede_addonarticle where aid=3'} <div class="pageArea hide" ...

  9. 【行为型】Visitor模式

    访问者模式意图在不改变目标对象类结构的情况下,扩展对象类的行为.新扩展的行为均被封装成类对象的形式来动作.应用该模式时,往往目标类系与Visitor类系是两个不同的类系,它们配合工作但维护是分开的,互 ...

  10. IOS--UIAlertView的使用方法详细

    IOS--UIAlertView的使用方法详细   // UIAlertView的常用方法 // 标准样式 UIAlertView *oneAlertView = [[UIAlertView allo ...