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. JQuery中根据属性或属性值获得元素

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...

  2. 安装php时,make test报错

    Build complete. Don't forget to run 'make test'. [root@localhost php-5.4.5]# make test ERROR: Cannot ...

  3. 【USACO 2.3.3】零数列

    [题目描述] 请考虑一个由1到N(N=3, 4, 5 ... 9)的数字组成的递增数列:1 2 3 ... N. 现在请在数列中插入“+”表示加,或者“-”表示减,“ ”表示空白(例如1-2 3就等于 ...

  4. PHP迭代器

    在所有语言中,所有迭代器都必须具有如下4想功能: 1.回滚迭代器到第一个元素 2.潜行到下一个元素 3.获取当前元素 4.验证是否到最后一个元素了 在PHP中我我们可以通过实现iterator来实现迭 ...

  5. 错误:Duplicate interface definition for class

    错误: Duplicate interface definition for class  "类名称" 原因:在工程中有相同的文件或相同的 @interface 类名称 解决办法: ...

  6. Java学习----变量是什么

    1.变量必须拥有的类型 2.变量必须拥有的名字 变量:具备名字和类型的可以存放类型匹配的数据的量 public class Student { public static void main(Stri ...

  7. jQuery 做好七件事帮你提升jQuery的性能

    1. Append Outside of Loops 凡是触及到DOM都是有代价的.如果你向DOM当中附加大量的元素,你会想一次性将它们全部附加进来,而不是分多次进行.当在循环当中附加元素就会产生一个 ...

  8. 使用bootstrap模态框实现浮动层

    authour: 陈博益 updatetime: 2015-04-22 06:52:15 friendly link: http://v3.bootcss.com/javascript/#modals ...

  9. 之前C#代码的重新设计

    /* 我用python重构了一把这个代码 大家的反应似乎是过度设计了 好吧,我决定不那么激进,采用更中庸一些的重构 我也有些疑惑: 是否如果重构后的代码比重构前要多,就算过度了呢? */ void m ...

  10. 云方案,依托H3C彩虹云存储架构,结合UIA统一认证系统,实现了用户数据的集中存储和管理

    客户的声音 资料云项目在迷你云基础上二次开发,通过使用云存储技术及文件秒传技术,对文件进行统一存储与管理,以达到节约文件管理成本.存储成本目的:通过有效的文件版本控制机制,以达到风险管控的目的:通过多 ...