[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();
    }
}
复制代码

 

posted @   Zhentiw  阅读(229)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示