Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Firebase: Real-Time Database Using Angular 2

DZone's Guide to

Firebase: Real-Time Database Using Angular 2

The power of web app frameworks is constantly expanding. Now, it's possible to use angular to create cross-platform applications. Learn how!

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

What's up guys, Eze is here. Those who follow me on Twitter (if you are not a follower you better do it now @skielo) already know I've been working on an app to show you how to use Firebase from an Angular 2 app. I have several posts talking about Firebase and how to use almost all its functionalities from an AngularJS app, in case you missed it you can check it here. Today, I want to show you how easy is to get an Angular 2 app up and running and connected to Firebase. This will be the first out of a series of posts where we are going to find out more about those tools.

The Skeleton of Our App

I want to show you first how to create a new Angular 2 app from the scratch. To do that we will need to install the angular cli tool onto our machines. The installation of this tool is really simple - we just need run the following command npm install -g @angular/cli. Please be sure you have a node version higher than 4 because it's a requirement for this tool to run.

This tool will provide us lots of functionalities that we are going to use during the development of our app but first, we need to create the scaffolding of our app, by executing the following command:ng new app_name The Angular cli will now create a new Angular 2 app. We can see our app running by executing the ng serve command.

ng_create.PNG

Adding Angular Fire 2 and Firebase to Our Project

We already have the basics of our project, so it's time to add the reference to Angular Fire 2 and Firebase. We will do it by running the following command inside our project folder: npm install angularfire2 firebase --save. This command is going to install all the necessary files in our project. So now it's time to dive into our app.module.ts in order to configure our Firebase project. First, we need import AngularFireModule and then export the configuration we get from Firebase.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AngularFireModule } from 'angularfire2'; 
import { AppComponent } from './app.component'; 

export const firebaseConfig = { 
  apiKey: '', 
  authDomain: '', 
  databaseURL: '', 
  storageBucket: '', 
  messagingSenderId: '' 
}; 
@NgModule({ 
  declarations: [ AppComponent ], 
  imports: [ BrowserModule, FormsModule, HttpModule, AngularFireModule.initializeApp(firebaseConfig) ],
  providers: [], bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

Creating a Database Layer

Now that we have configured Firebase to our project, it's time to create our database layer in order to have access to our database. Again we are going to use Angular cli by typing ng generate service databaseservice. This time the command is going to generate a new service but you need to take care of something else, which is the warning we got from the tool: "WARNING Service is generated but not provided, it must be provided to be used." In order to provide this new service, we need to include it in the AppComponent as I did below.

import { Component } from '@angular/core';
import { DatabaseService } from './core/database.service'; 

@Component({ 
  moduleId: module.id, 
  selector: 'my-app', 
  templateUrl: 'app.component.html', 
  providers: [DatabaseService] 
}) 
export class AppComponent { }

As you can see in the code above, we use a great feature of TypeScript that allows us to define a property in the constructor which means that Angular will automatically inject the right object for us.

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { AngularFire, FirebaseObjectObservable, AngularFireAuth } from 'angularfire2'; 

@Injectable() 
export class DatabaseService { 
  constructor(private _af: AngularFire) { } 

  createBattle(obj: Battle){ 
    return this._af.database.list('/battles').push(obj); 
  } 

And that's it, after doing that we are ready to go. This AngularFire object will give us access to all Firebase functionality. In this example, I'm using the database object, in particular, the list method. As you can see, we need to pass the path reference to this method and the return will be a FirebaseListObservable object that will let us work with our database.

If you want to see the full code working together I have a working example here. This example is a small version of the game battleship.

For a complete reference of Angular Fire 2 use this link. For a complete reference of Firebase use this link.

If you found this post useful please don't forget to press the like button and share it. If you are in doubt don't hesitate to ask a question and, as always, thank you for reading!

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
firebase ,angular 2 ,database ,realtime data ,web dev

Published at DZone with permission of Ezequiel Reyno. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}