[Angular 2] Get start with Firebase
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的更多相关文章
- Angular 小试牛刀[2]:CI(travie+firebase)
持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建 ...
- [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 ...
- [Firebase] 3. Firebase Simple Login Form
Using $firebaseSimpleLogin service. Here we use three methods for login, logout, register and getCur ...
- 二识angularJS
前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为 ...
- [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, ...
- [Angular] Setup automated deployment with Angular, Travis and Firebase
Automate all the things!! Automation is crucial for increasing the quality and productivity. In this ...
- Firebase 相关
谷歌在 2016年 I/O 大会上推出了 Firebase 的新版本.Firebase 平台提供了为移动端(iOS和Android)和 Web 端创建后端架构的完整解决方案. 从一开始的移动后端即服务 ...
- 都 9012了,该选择 Angular、React,还是Vue?
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 尽管 Web开发的典型应用场景除了将服务器用作平台.浏览器用作客户端之外,几乎很少活跃于其他业务领域,但不可 ...
- [Firebase] 2. Firebase Event Handling
/** * Created by Answer1215 on 11/9/2014. */ var app = angular.module('app', ['firebase']); app.cons ...
随机推荐
- eclipse中启动tomcat
0.以下即使部署好,点小猫启动tomcat,有一个问题,修改jsp文件,本地tomcat中的此jsp并没有修改,如果右键项目启动,则会修改,不知道为什么 1. 首先发布项目,项目右键,run serv ...
- 【转】Objective-C中一种消息处理方法performSelector: withObject:
原文 : http://www.cnblogs.com/buro79xxd/archive/2012/04/10/2440074.html Objective-C中调用函数的方法是“消息传递”,这 ...
- 你好,C++(8)如何表达那些始终保持不变的数据量?3.2.2 常量
3.2.2 常量 与变量可以用在程序中表达那些可能会发生变化的数据量相对应地,在C++中,我们用常量来表达那些始终保持不变的数据量.简单来讲,就是程序中直接使用的数值.字符.字符串以及const关键 ...
- android 06
1.android原理 菜单-->MainActivity-->onCreate-->setContentView(R.layout.item)-->layout(item.x ...
- 【USACO 1.4.2】时钟
[题目描述] 考虑将如此安排在一个 3 x 3 行列中的九个时钟: |-------| |-------| |-------| | | | | | | | |---O | |---O | | O | ...
- jquery实现页面置顶功能代码
<html> <head> <title></title><script type='text/javascript> //回到顶部功能 f ...
- JQUERY1.9学习笔记 之基本过滤器(十一) 奇数选择器
奇数选择器jQuery( ":odd" ) 例:匹配表格的奇数行. <!DOCTYPE html><html lang="zh-cn"> ...
- $().change事件
change([[data],fn]) 当元素的value值发生改变时发生change事件 适用于: 文本域 text textarea和select元素 text textarea 元素失去焦点时发 ...
- · HTML使用Viewport
· HTML使用ViewportViewport可以加速页面的渲染,请使用以下代码<meta name=”viewport” content=”width=device-width, initi ...
- ELK beats平台介绍
原文链接:http://www.tuicool.com/articles/mYjYRb6 beats是一个代理,将不同类型的数据发送到elasticsearch.beats可以直接将数据发送到elas ...