[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();
    }
}
时间: 2024-09-30 15:16:06

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

二识angularJS

前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为离职找工作等一系列原因,搁置了好久,今早看看,继续写以前的已经无法继续,索性重新开始,有时间再修该之前的吧. 二识angular(基于angular官方文档) 地址:https://angularjs.org/ 一,基础:先看html代码 <!doctype html> <html ng-a

[Angular2Fire] Firebase auth (Google, Github)

To do auth, first you need to go firebase.console.com to enable the auth methods, for example, enable google, github... Enable goolge is quite simple, just one click, enable Github, Twitter, you need to do more configuration. Follow the link: https:/

[Angular] Reactive Store and AngularFire Observables

A simple store implemenet: import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import 'rxjs/add/operator/pluck'; import 'rxjs/add/operator/distinctUntilChanged'; import {User} from './auth/shared/serv

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

Firebase 相关

谷歌在 2016年 I/O 大会上推出了 Firebase 的新版本.Firebase 平台提供了为移动端(iOS和Android)和 Web 端创建后端架构的完整解决方案. 从一开始的移动后端即服务(Mobile-Back-end-as-a-Service,简称 MBaas),Firebase 已经被谷歌改造成了针对移动开发和 Web 开发的一个完整后端解决方案.Firebase 提供了一个 SDK 和 一个控制台,用于创建和管理 Android.iOS和 Web 等多个平台的应用.Fireb

Angular 8 - 更小的包

Angular 8 - 更小的包 Angular 8 发布 原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27 Angular 8 - 更小的包,CLI API 以及与生态保持一致 Angular 8 现在发布了!这是跨越整个平台的重要发布,包括框架.Angular Material,与主版本同步的 CLI.

angular中模板

<!DOCTYPE html><!--调用模块--><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <script src="js/angular.js"></script> <title>Title</title></head><

利用angular打造管理系统页面

1 创建一个新的angular应用 ng new adminSystem 2 利用WebStorm打开adminSystem应用 3 借助AdminLTE这个开源项目来辅助开发 AdminLTE项目:点击前往 将AdminLTE项目的精简版本源代码复制到adminSystem应用主模块的主组件的模板中 AdminLTE项目的精简版本效果图 <!DOCTYPE html> <!-- This is a starter template page. Use this page to star

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b