Angular2 -HackerNews 克隆 Firebase 设置，可实时观察

原文：https://medium.com/hackernoon/angular2-hackernews-clone-firebase-setup-with-observables-realtime-247121f955e0

这是用 Angular 2，Angular Material 和 Firebase 构建 HackerNews 克隆系列的第三篇文章。在这篇文章中，我们将设置 firebase，我们将拉进并显示热门故事，来自黑客新闻的新故事。

以前的帖子:

下一篇文章:

动态组件、路由参数和重构

在这里用 Firebase 创建一个帐户，并创建一个新项目，我们现在只需要这个项目的 API 密钥。创建项目后，点击Add firebase to web app从项目中获取 API 密钥。

我们将使用angular fire 2——Firebase 和 Angular2 的官方库。我们将使用矩和二阶矩进行日期时间操作。

下面是我们将在本帖中做的设置，

为我们的应用程序配置角火，火基，矩和角 2 矩
创建一个与 HackerNews Firebase API 交互的服务
将我们的服务注册到应用模块
在“共享”下为共享组件创建一个新模块(要在模块间共享的故事组件，如热门故事、最新故事)
为热门故事创建一个新模块，并从服务中提取 100 个热门故事
更新最新的模块，用共享的组件和服务来获取最新的故事。
更新app.routing.ts以默认加载头条新闻。

#第一步

npm install angularfire2 firebase moment angular2-moment --save

打开app.module.ts导入依赖项并配置 AngularFire。For databaseURL 将使用文档中提供的 HackerNews Firebase 数据库 URL。花些时间浏览 API 文档，理解 API 很重要。

**import { AngularFireModule } from 'angularfire2';
import * as firebase from 'firebase';
import * as moment from 'moment';**[@NgModule](http://twitter.com/NgModule)({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule.forRoot(),
    RouterModule.forRoot(routes),
    **AngularFireModule.initializeApp({
      apiKey: '<API_KEY>',
      databaseURL: '**[**https://hacker-news.firebaseio.com'**](https://hacker-news.firebaseio.com')**,
      authDomain: '<AUTH_DOMAIN>'**
 **})**,
    NewestModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

#第二步

在/src/app下，我们将创建shared文件夹，该文件夹将存放我们应用程序的共享代码，如实用程序、服务等。，现在我们正在创建我们的 hackernews 服务。

当我们在应用程序模块中注册 AngualrFire 时，配置将可在整个应用程序中访问。打开hacker-news.service.ts

import { Injectable } from '[@angular/core](http://twitter.com/angular/core)';
import { AngularFire, FirebaseListObservable } from 'angularfire2';[@Injectable](http://twitter.com/Injectable)()
export class HackerNewsService {constructor(private af: AngularFire) { }getNewestStories(limit: number) {
    return this.af.database.list('/v0/newstories', {
      query: {
        limitToFirst: limit,
        orderByKey : true
      }
    });
  }getItem(id: number) {
    return this.af.database.object('/v0/item/' + id);
  }}

这里我们用三个方法创建了一个injectable类。

getTopStories —返回超过限制的最新故事的 id

getNewestStories —返回超过限制的最新故事的 id。

getItem —返回单个项目对象。

this.af.database.list('v0/newstories')——这是在访问什么数据库？因为配置是跨应用程序的。我们在我们的app.module.ts中配置 AngularFire 来访问 Firebase 上的 HackerNewsAPI(docs)。

*angular fire 2 中很酷的一点是你可以通过一个Observable来查询极限等属性。，而不是一个数字—*

#第三步

在我们的服务模块中注册我们的 hacknews 服务。

*import { NgModule } from '[@angular/core](http://twitter.com/angular/core)';
import { HackerNewsService } from './hacker-news.service';[@NgModule](http://twitter.com/NgModule)({
  imports: [],
  exports : [],
  declarations: [],
  providers: []
})
export class ServicesModule{
  static forRoot() {
    return {
      ngModule: ServicesModule,
      providers: [
        HackerNewsService
      ]
    }
  }
}**export {
  HackerNewsService
}***

最后三行是我编写的一个助手，这样我就可以从这个模块访问应用程序中的所有服务，而不是转到 import 语句中的单个文件夹。您可以在步骤 4 中看到 HackerNewsService 的 import 语句。

# 第四步

在shared文件夹下生成一个模块Components并生成一个组件ng g component story

我们将创建一个组件，它将id作为输入——从HackerNewsService中检索项目并呈现它。

我们有一个用于属性 id 的setter方法，当 id 改变时，我们调用HackerNewsService来检索新的故事。

从angular2-moment导入MomentModule，从angular-material导入MdCardModule。我们将使用来自angular-material的md-card组件来显示我们的故事。下面是我们的模板文件，我使用 angular2-moment 中的pipes来显示时间。