Building Apps with AngularFire 2

This course is an introduction to using AngularFire 2's API with your Angular and Firebase applications. This course will look at how to use observables with AngularFire 2's real-time bindings and authentication.
Course info
Rating
(35)
Level
Intermediate
Updated
Sep 12, 2017
Duration
3h 43m
Table of contents
Course Overview
Course Introduction
Installation and Setup
Retrieving and Working with Firebase Objects
Retrieving and Working with Firebase Lists
Querying Firebase Lists With Observables
Authentication
AngularFire Extras
Description
Course info
Rating
(35)
Level
Intermediate
Updated
Sep 12, 2017
Duration
3h 43m
Description

At the core of building a web, mobile, or desktop application in Angular with Firebase as a backend is a thorough knowledge of Firebases's AngularFire 2 library. In this course, Building Apps with AngularFire 2, you will learn how to combine the power of RxJS, Angular, and Firebase to build real-time applications. Next, you will explore how to create real-time bindings that synchronize Firebase collections as objects or lists and how to query these lists. Finally, you will find out how to authenticate users and monitor authentication state in realtime. When you're finished with this course, you will have a foundational knowledge of the AngularFire 2 library, and you will be ready to get started creating Angular applications with Firebase.

About the author
About the author

Duncan Hunter loves working in awesome teams to make awesome software.

More from the author
Angular NgRx: Getting Started
Beginner
4h 4m
Jun 25, 2018
Play by Play: Fundamentals of Angular Testing
Intermediate
1h 57m
May 31, 2018
More courses by Duncan Hunter
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Duncan Hunter, and welcome to my course, Building Apps with AngularFire 2. I'm a software architect and trainer from Brisbane, Australia where I'm lucky enough to make Angular applications for a range of different clients. At the core of building a web, mobile, or desktop application in Angular as a front-end framework with Firebase as a back-end technology is a thorough knowledge of Firebase's AngularFire 2 library. In this course, we'll learn how to combine the power of RxJS and observables with Angular and Firebase to build real-time applications. You'll learn how to create real-time bindings that synchronize Firebase collections as objects or lists, and we'll get into the nitty gritty of how to structure your data to query these lists and go beyond the basics of using RxJS and Observables. Next, you will find out how easy and enjoyable it is to authenticate users and monitor application state in real time with AngularFire. And finally, we'll have a look at how to use AngularFire with the NJRX library to implement the redux pattern for state management, and we'll also have a look at how to write some unit tests around your code that depends on AngularFire. When you're finished with this course, you will have a fundamental knowledge of the AngularFire 2 library and you'll be ready to get started creating your own applications with Firebase and AngularFire. Before beginning this course, you should be familiar with Angular version 2 or higher and JavaScript, in general. I hope you will join me on this journey to learn how to supercharge your Angular and Firebase development with this course, Building Apps with AngularFire 2, at Pluralsight.

Installation and Setup
Creating even the simplest of web applications can be a pain. First, you need to install all the different third-party libraries you need, second, you need to make a baseline app by creating a bunch of files and folders, and then you need to make a new database, configure all your connections strings, and all this before you even think about how you're going to get it on a web server. Welcome back to Building Apps with AngularFire. This is Duncan, and in this module, we'll look at how easy it is to install and set up a new application with AngularFire. In this module, we'll have a look at some Firebase fundamentals in the Firebase console. Then we'll move onto have a look at some Angular fundamentals including components and modules and how they relate to our demo application. Then we're going to create an Angular app using the Angular CLI and configure it to use AngularFire, then we'll build and bundle it with the Angular CLI, and then we're going to deploy it using Firebase hosting. This module is a great demonstration of just how smooth and fast it can be to build applications with AngularFire.

Retrieving and Working with Firebase Objects
Working with any database requires a good understanding of how to create, read, and update its data. Welcome back to Building Apps with AngularFire. This is Duncan, and in this module, we'll be looking at how to retrieve and work with Firebase objects. We'll kick off with an introduction to RxJS, then we'll add Angular material to have a UX library for displaying data, then we're going to have a look at retrieving data as Firebase objects because in Firebase everything is either an object or a list of objects, and also, we're going to have a look at the basics of saving, updating, and removing objects from your Firebase database.

Retrieving and Working with Firebase Lists
In Firebase, everything is an object, even lists suggest a list of objects. Welcome back to Building Apps with AngularFire. My name is Duncan, and in this module, we'll have a look at retrieving and working with Firebase lists. We'll begin by adding routing to our demo application so that we can navigate between our existing company edit page and a new company list page we'll add in this module. And once we have a company list page, we'll look at how we can get and bind lists from our Firebase database, then we'll refactor our company edit page to be able to save, edit, and delete companies from a list versus just an object.

Querying Firebase Lists With Observables
Every good database needs a way to be queried so that only relevant data is returned to your application. Hi. This is Duncan, and in this module, we'll look at querying your Firebase database with observables. We'll kick off looking at how to query with primitive values like a string where we will return back only the related contacts to a particular company, which means we'll need to make a context feature section for our demo application. We'll then have a look at a type of RxJS observable called a subject to be able to use them to create queries that are re-run against our Firebase database any time those subjects emit a mixed value like an observable would. Then we'll tackle what I've found to be one of the most challenging areas of Firebase in AngularFire, which is dealing with querying related data and how to denormalize your data to make this happen. We'll also have a look at multipath updates that can help this as well. And we'll finish up this module looking at how to do a client side join with Firebase and why you should really be considering avoiding doing too many joins in the client.

Authentication
Every application needs a way to protect its data so only the right users can see and do certain things. Hi. This is Duncan, and in this module, we're going to look at authentication with AngularFire and why it's one of the best parts of AngularFire because it's just so simple to do. We'll kick off having a look at how to log in and log out users. Then we'll move onto adding some Angular route guards so that only authenticated users can navigate to any of our company or contact sections. In Firebase, there is lots of authentication options. There is a custom option where your own server will authenticate with Firebase first and then you can say who is authenticated and this allows you to plug into almost any third-party provider. There is anonymous authentication where someone can temporarily use your site before they become a full-fledged user and you can still track that individual. There is email and password for a traditional approach. There is phone number verification. And there is federated identity provider verification and we're going to use Google to authenticate in our demo app, but you can also use Twitter, Facebook, and GitHub.

AngularFire Extras
Every good library has a few hot topics that aren't necessarily covered in the fundamentals of the library, but almost everybody needs to answer or know about as they move into building a production app. Hi. My name is Duncan, and in this module, we're going to have a look at those AngularFire library extras. In this module, we'll have a look at dealing with Firebase storage, then we'll move onto talking about how to use the ngrx library with AngularFire to manage state, then we'll finish up talking about how do you test your code that has the dependency on AngularFire.