The beginner’s guide to AngularJS and Firebase on the Web – Firecasts
Articles,  Blog

The beginner’s guide to AngularJS and Firebase on the Web – Firecasts


DAVID EAST: What’s
up, everybody? David here. And on today’s
episode of Firecast, we’re going to be covering
Angular and Firebase. But as a reminder to you,
this is just one episode in many on Firebase in the web. So we’re going to be covering
things like authentication, real time database,
storage, Firebase cloud messaging, Firebase hosting. So pretty much anything
that’s Firebase on the web is going to be in that
series, including things like JavaScript frameworks,
like Angular, Ember, React, and Polymer. So if you want to
see those videos, make sure to
subscribe so you can get updated when we drop those. But today, we’re going to be
covering Angular Firebase, and we’re going to be using
the AngularFire Library, which is the official
library for using Angular and Firebase together. So it’s super easy
to get started with, and it’s also
really easy to use. So let’s get started. So to set up Angular
and Firebase, you create an Angular
app module as you usually would with Angular module
and the module name. And then inside of
the dependency array, you declare the Firebase
module to get AngularFire. Once you do that, you get a
whole host of awesome services that you can use in your app. And while all these
services are super cool, we’re going to be setting up
a project from scratch today and then talking a little
bit about Firebase object. So I’m in my terminal,
and I’m going to set up my project from
scratch using the Firebase CLI. So I’m going to
write Firebase init, and this is going to give
me some sweet emoji art. And I know I call it
out every single time, but I mean, come on. It’s amazing. So now I’m going to
select a hosting project, and then I’m going to
select my Firebase project, set the default database
rules, and now this part is super important. I know I call it out,
like, every single time, but this can really,
really trip you up if you don’t get it right. So it’s good to focus on. So what do we want to use
as our public directory? And this is where your
index.HTML file lives. And so this is the entry
point to your application. So for me, I’m a simple
man, and my public folder is usually called Public. So I’m going to have
the Firebase CLI write my 404 and my index.HTML. And then after that, my
initialization is complete. So I’m going to
clear the console. And now I’m going to set up
my local development server. And I can do that by
typing Firebase serve. And this is going to throw
a local server on port 5000. So right here in
the browser, you can see we have
our default page. And now I’m going to
set up AngularFire. So all the AngularFire
information you are going to want to read is at
github.com/firebase/angularfire and it contains all the
source code and including some documentation. So you can see there’s a
table of contents where it has a little quick start,
information on downloading it, documentation, examples, and
lots of other awesome stuff. So to see how to download it,
I’m going to click that link, and I’m going to copy
these three scripts. And so it’s Angular
itself, the Firebase SDK, and the AngularFire library. And just a note, you can also
do this through an NPM install or a Bower install
if that’s your thing. So now on my app, I’m going
to go into the header section and paste in these
three scripts. And then I’m going to delete
all of these filler elements. Now, the first step for
initializing an Angular app is by providing the
NG app directive. So on the body tag, I’m
going to write NG app and give it my app’s
name, which is super creative by being called App. So now that we have
this initialized, I’m going to create an app
JS file in my public folder. And I’m going to wrap everything
in an iffy, because, you know, JavaScript’s got function scope. So to declare my
Angular app, I’m going to use an Angular module. So I’m going to write
Angular.module and then my app name, which
is App, and then specify the dependency array. And this is where I can
include the AngularFire module. So it’s module name is Firebase. And this will give me access
to inject all of the services that we saw in the
beginning of the video. So Angular really loves
dependency injection, and that’s how you use every
single Firebase service. So I’m going to
create a controller, and I’m going to
call it my controller and then going to provide
the controller function. And it’s right inside
of this function, where I can inject anything
I need from AngularFire as a parameter. So this is where I’m going
to use Firebase object. So I’m going to specify
that I want Firebase object. And then now on my
controller, I can create a property
called this.object and then set it to
Firebase object, which is a function that takes
in a database reference. So since I’ve provided the
Firebase JavaScript library, I can just go and
create a reference using Firebase.database. So Firebase.database.ref. So I’m going to dive into
the child of Angular. And that’s because this
database right here is kind of like one
big mega database, and I’m just
pretending that Angular is the root of this database. So from here, I want
to nest one more time into the child of object. So, essentially, what I’ve
done here is I’ve gone to root, and then I have a
property of Angular. And then within Angular, it
has a property of object. And then this ref variable
points to this location right here. So by passing this reference
to the Firebase object, it will be able to
synchronize any of the data at the object location
to my Angular app. So any time any updates occur
in the real time database, it will synchronize those
changes to my Angular app and update my
template in real time. And, lastly, I need to
initialize Firebase. So to initialize Firebase, you
say Firebase.initializeapp, and you provide a
config variable. And this config variable you
locate in the Firebase console. So this is all my
config information. And with that, I’m ready
to create my template. So back in index.HTML,
I want to make sure that I’m referencing
this script. So source to app.js. And then now I want to specify
this div as the container for my controller. So I can do that by
using ng controller and then setting the name
to controller as controller. So inside this ng controller
will be my template. And so what I want
to do is I just want to display this
object in a pretag. So I’m create a pre, and then
I’ll do controller.object and then do a filter to JSON. And actually, due to
the nature of pretags, I need to move this
all the way to the back so it formats correctly. So here in the browser, we
have my data to the left. You have Angular
and then object, and then an object has
a property of name. But over here in
the actual web app, we have this object with this
dollar ID and dollar priority, and then, the only thing
that really looks familiar is the name property. So if these dollar IDs
and dollar priorities don’t exist in the database, why
do they exist here in the page? Well, that’s because
when you synchronize data from the real time database
to your application, it comes back as a snapshot. And a snapshot has properties
like key and priority. And if you want to get the
value back from the snapshot, you call the .val function. So in AngularFire, we want
to automatically unwrap the snapshot to
get back the value. But having the key and
priority is still really, really important. So we service them through
these dollar properties, and these dollar
properties are always stripped from the clients,
so you’ll never see them here in the database,
and you don’t ever have to even think
about maintaining them. So to test out this app, I’m
going to delete some data. And you can see that it
updates in my app in real time. So now we know that
our app is working. So rather than
deploying it locally, let’s deploy it using
Firebase hosting. So on the command line, I’m just
going to do a Firebase deploy. And this will deploy everything
in the public folder. And once it’s done, I can
just open up my hosting site at this URL right here. And just like that,
we’ve deployed to Firebase hosting with
that sweet SSL lock. So that’s how you get started
with Angular and Firebase. And if you want to
learn more, then just stay tuned, because we have
another screencast that will take you deeper
with AngularFire. And, also, if you want to
learn more in the meantime, just check out the
docs, which are in the links in the description. And if you found
this video helpful, please make sure to
like and subscribe. That’s all for this time. I will see you guys later.

39 Comments

  • Dave Fisher

    It'd be nice to clarify which version of Angular you are using right at the beginning, AngularJS or Angular 2. You have to watch a bit to figure that out. 🙂 For me if it's not Angular 2 using the angular-cli I'm not interested and it'd be nice to know that right away. Love the Firecast work Dave! Looking forward to more Angular 2 AngularFire work.

  • Norfeldt

    @firebase it would be really helpful if you would change the terminal theme a bit. It's hard to se black text on a dark background.

  • CR Rollyson

    Thank you for this! Ran into a couple setup/clarity issues/questions – may or may not belong here, but I'll post and just let me know.

    Seems like this video requires some setup to get everything to work smoothly in order to follow along with the demo. Can you hit on a couple of these? I had three major gotchas. Mind verifying these are correct?

    1. On initial request, in order to get the data to pull on localhost, I had to change the Realtime Database Rules in the firebase console (project/my-app/database/rules) for read and write from "auth != null", to "auth == null". Otherwise I received access issues.

    2. I had to change/uncheck my Chrome privacy from "block 3rd party cookies and data" chrome://settings/content: Privacy » Cookies » Block third-party cookies and site data

    3. Setting the rootRef determines/sets the "database structure". Following along – in the firebase console I navigated to "project/my-app/database/data/angular", then manually created the "object" and "name" property. Sound correct?

    Thanks again for these. Was down the rabbit-hole for the past couple days with bloated starter-projects that only led to more confusion. Love the simplicity.

  • rishabh parashar

    In My case this code <div id="message" ng-controller="MyCtrl as ctrl">
        <pre>
         {{ ctrl.object | json }}
        </pre>
        
      </div>
       does not working

  • Luke Schlangen

    I made a Github repo with this example: https://github.com/LukeSchlangen/angularFireQuickDemo in case anyone is having trouble getting this to work.

  • jvartiste13

    Take advantage of our special Christmas promo! Ultimate #Angular 2 Developer with Bootstrap 4 and Typescript for $10 ONLY!! Valid for the whole month of Dec or until coupons are sold out.
    https://www.udemy.com/ultimate-angular-2/?couponCode=REINDEER1225

  • El K

    I love Firebase. But, when you make a tutorial for BEGINNERS, you need to start at the beginning. You jump right into the command 'firebase init', while only mentioning 'using the Firebase CLI'. For a beginner not knowing you need to, or how to install Firebase CLI, I think causes a lot of the issues in the comments. For beginners: 1) install Node.js, 2) install Firebase CLI which gives you the tools you need. Here is the section from the documentation:
    Setup

    Before you can install the Firebase CLI, you will need to install Node.js on your machine. Once you've installed Node.js, you can install the Firebase CLI using npm (the Node Package Manager) by running the following command:

    npm install -g firebase-tools

    You should now have a globally available firebase command available from any terminal window on your machine. Once you've installed the Firebase CLI, sign in using your Google account:

    firebase login
    This command connects your local machine to your Firebase account and grants access to your projects. To test that authentication worked, you can run firebase list to see a list of all of your Firebase projects. The list should be the same as the projects listed at Firebase console.

    Project directories

    Many common tasks performed by the CLI, such as deployment, require a Project Directory. A project directory is a any directory that has a firebase.json configuration file. The project directory should generally be the same as your source control root, and firebase.json generally lives alongside README and other top-level files.

    Initializing a project directory

    To initialize a new project directory, change directories in the terminal to your desired project directory and run:

    firebase init

    Now continue to watch this video. Take it away David…

  • Furansco

    Very useful, but many things have changed so for anyone seeing this, you may need to do some research to do it right.

  • Leanne Phillips

    Isn't it displaying the values? Any ideas? I get this:

    {
    "$id": "object",
    "$priority": null,
    "$resolved": true,
    "$value": null
    }

  • Rui M

    the mess with js frameworks and libraries versions in these tutorials is just unbelievable. this video is linked in the official firebase page yet its neither firebase's latest 5.9.0 neither it is angularjs latest version…

  • Хасенов Арман

    Thank you for detailed videos, I’m new to it coding. But I inspired by firebase and started learning how to!)

Leave a Reply

Your email address will not be published. Required fields are marked *