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. SQL中 patindex函数的用法

    语法格式:PATINDEX ( '%pattern%' , expression ) 返回pattern字符串在表达式expression里第一次出现的位置,起始值从1开始算. pattern字符串在 ...

  2. js 验证表单 js提交验证类

    附加:js验证radio是否选择 <script language="javascript">function checkform(obj){for(i=0;i< ...

  3. c/c++内存机制(一)(转)

    转自:http://www.cnblogs.com/ComputerG/archive/2012/02/01/2334898.html 一:C语言中的内存机制 在C语言中,内存主要分为如下5个存储区: ...

  4. REST简介及设计原则

    rest,即REST(Representational State Transfer表述性状态转移)是一种针对网络应用的设计和开发方式,可以降低开发的复杂性,提高系统的可伸缩性. 简介 REST (R ...

  5. 转:Zend Framework 2.0 分析

    文章来自于:http://bbs.phpchina.com/thread-268362-1-1.html ZF2已经发布,与ZF1相比,MVC这一模块内部的实现机制可谓大相径庭,许多用过ZF1的PHP ...

  6. go官网教程A Tour of Go

    http://tour.golang.org/#1 中文版:http://go-tour-cn.appsp0t.com/#4 package main import ( "fmt" ...

  7. 怎样在WIN7系统下安装IIS和配置ASP(详细)

    一:Windows7系统 (IIS是WIN7自带的,版本7.0),首先是安装IIS.打开控制面板,找到“程序与功能”,点进去,点击左侧“打开或关闭Windows功能”,找到“Internet 信息服务 ...

  8. delphi操作文本文件的方法简介

    delphi操作文本文件的方法简介减小字体 增大字体 作者佚名来源不详发布时间2008-5-31 10:31:16发布人xuedelphi1 文件类型和标准过程       Delphi同Object ...

  9. mongodbOperator

    mongodb创建数据库表语句 db.createCollection("CollectionName or tableName"); db.createCollection(&q ...

  10. puppet常用调试命令

    yum快速部署puppet测试环境(C/S端) rpm -ivh  http://yum.puppetlabs.com/puppetlabs-release-el-7.noarch.rpm yum r ...