Angular and Firebase - Build a Web App with Typescript
4.4 (446 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,327 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular and Firebase - Build a Web App with Typescript to your Wishlist.

Add to Wishlist

Angular and Firebase - Build a Web App with Typescript

Updated to Angular 4 (formerly Angular 2) - Learn how to build a Web Application using Angular, Firebase and Typescript
Best Seller
4.4 (446 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,327 students enrolled
Last updated 7/2017
English
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 5 hours on-demand video
  • 6 Articles
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Confidently build a full stack application using Angular as the frontend and Firebase as the backend
  • Understand how to use Angular 2 in Practice
  • Understand how many of the Angular 2 framework features are meant to be used
  • Know the basics about Firebase, and more
  • Know how to use the Firebase SDK with and without Typescript
  • Know how model the data of a Firebase application
  • know the Angular Fire Library
  • Understand how to use Angular Fire to build a service layer
  • Understand how to combine RxJs and Angular Fire to build a service layer
View Curriculum
Requirements
  • This course requires previous knowledge of Angular, check my Complete Angular with Typescript to get a solid basis in Angular 2
  • No previous knowledge of Firebase is required, we are going to assume that you have never used Firebase and this is your first experience using it
  • Previous knowledge in web development is necessary, namely knowledge in HTML, CSS and Javascript
Description

The code of this course is fully up to date with the Angular 4 release (formerly Angular 2) and Firebase 3 - meaning that the videos cover the Final release API and the support code is updated to Final. 

Note: The Firebase Jumpstart E-Book is included in this course!

Important: By enrolling you also get very fast and friendly student assistance. If you have questions please post a question and i'll get back to you ASAP. Remember I'm here (every day) to help you and can answer you also in French and Spanish if you prefer.

Student Reviews

> Pankaj Gupta 5 stars - "Vasco is best instructor i have seen after a long time. I'm a regular customer of Udemy and using it from last 3 years. Vasco responds to questions very quickly. His way of teaching is also great. He gives lot of information in short videos. Along with Angular2 this course make lot of sense. Firebase seems to be the future and can make major part of back-end irrelevant. Simply Awesome!!"

>  S Savic - "I have a long experience with this instructor and his work... devoted and efficient"

Joe R 5 stars - "Great end-to-end application explaining all important Angular2 concepts! !"


Why Learning Angular and Firebase by Building a Real App is Essential

Learning framework features one by one is helpful when you are just getting started, but the problem of that approach is that you might lack context to fully understand each separate feature if the example is not meaningful.

One of the most frequent questions we hear: is there an example of a small but complete Angular application? How do I tie all the framework concepts and use them to build a real application ? When, how and why should a given framework feature be used?

In this course we are going to build an Angular Application from scratch, literally from an empty folder. We are going to introduce features one by one and we are going to implement common patterns that you will need in an application: master detail, pagination, client side search, authentication, creation and modification forms, navigation menus, protect parts of the app from unauthorized access, and more.

Why Firebase ? Do we Still Really need REST APIs and SQL Databases?

There hasn't been much press covering it, but the latest Firebase that Google just launched a few months ago might completely change the way that we build Web Applications, and the latest addition of HTTP 2 support for Firebase Hosting is only a small reason for that. The powerful Firebase WebSockets based client and the Firebase Real Time Database allow us to build our systems in a much simpler and performant way, especially if we take advantage of the FIREstack architecture that will be presented in this course, not to mention all the built-in Firebase functionality which ranges from Hosting to Authentication to name a few of the many available features.

The truth is that building web applications is still way too hard for what we need it to be: building a web site with a custom backend is very time consuming and error prone, even when writing REST APIs in Node using for example the MEAN stack.

Its Still Way Too Hard to Build Web Applications

Its just a huge amount of work to simply get anything in and out of a database, especially if its a relational database, and especially if we are building our backend in a completely different language other than Javascript. All of a sudden you need advanced knowledge in not one but two ecosystems: lets say Javascript and Ruby or Javascript and C#, all to to be able to build even the simplest of web applications.

If we add to that the expertise necessary to correctly secure a web application and its database, to efficiently use third party storage services like Amazon S3 to host static content like images and pre-built Js / Css bundles, its sometimes amazing how we can even get anything done as web developers.

The value proposition of the Firebase Backend as a Service (BAAS) solution is tremendous, although we do understand that sooner or later we will need some sort of backend to perform certain operations, either for security reasons because the security rules that restrict certain actions are too complex to express in Firebase Security Rules, or because we want to do a batch operation like for example sanitize chat messages for forbidden words.

But even then, the Firebase SDK and the Angular Fire and Firebase Queue libraries that we will cover in this course make it much simpler to build a simple but secure backend without the need to setup expensive SSL certificates.

What You will Learn In This Course

In this course I will assume that you already know Angular, and that you want to apply what you have learned to build a concrete application: you will scaffold the application, setup the router, build components and forms, and build a service layer using Angular Fire.

So you do need previous Angular knowledge on Components, the Router and Forms, but on the Firebase side I will assume that this is your first experience with Firebase.

You will learn step by step data modeling best practices and essential concepts, and you will setup and populate the database and learn the Firebase SDK in both plain Javascript, but mostly in Typescript. You will learn how to build service layers using RxJs and the Angular Fire Observables-based library. There is a lot about building applications using RxJs in this course, most of the knowledge about using Observables in the service layer will translate to backends built with the Angular HTTP module.

You will learn how to build a Firebase batch job using the Firebase SDK and the Firebase Queue library, and learn how to build custom NodeJs Firebase backends.

(Free samples of multiple parts of the course are available)




Who is the target audience?
  • This course is ideally suited for developers that already have some notions in Angular 2, but are curious to know how to use all the features to build an application from A to Z
Compare to Other AngularJS Courses
Curriculum For This Course
66 Lectures
05:13:46
+
Introduction
7 Lectures 21:08

This is an introduction to the Build an App With Angular 2 and Firebase Course: we are going to describe the course objectives and highlight some of its content, and we will also demo the application that we are about to build.

Preview 06:18

The Firebase Jumpstart E-Book
02:22

IMPORTANT: Using Yarn instead of NPM To Avoid Installation Issues
00:50


Choosing an IDE
01:50

Angular 2 Final Application Scaffolding using the Angular CLI
02:57

+
Getting Started With Firebase
8 Lectures 36:04

In this lesson we are going to login to Firebase, create our first real-time database and we are going to do our first query. We are going to see the Real-time Database in action as we are going to modify data in the database and see how the application responds.

Preview 08:14

In this lesson we are going to introduce two fundamental concepts of the Firebase SDK: references, snapshots and keys. These 3 notions are essential for using the Firebase SDK correctly.

Firebase Fundamentals - References, Snapshots and Keys
03:23

In this lesson we are going to reinstall the Firebase SDK but this time via npm, and we are going to use the SDK via Typescript instead of plain ES5.

Use Firebase SDK with Typescript - Preparing to Run a Firebase Database Populat
03:18

In this lesson we are going to populate our real-time database with some data using a small node program that uses the Firebase SDK. The program is written in Typescript, so we are going to use ts-node to run it.

Populate a Firebase Database with a Node Program - Typescript with Node ts-node
04:24

In this lesson we will go over the script that we used to populate the database and explain it step by step. The script uses the Firebase SDK, and because its a write only scripts, its actually fully synchronous die to the nature of the way that Firebase push keys work.

Populate a Firebase Database -Initialization Script Explained Step By Step
03:52

In this lesson we are going to learn how to structure our data in Firebase: we are going to learn how to denormalize data, and why that is necessary. We are going to learn how to build a one to many association in Firebase.

Preview 04:10

In this lesson we are going to talk about Firebase keys, why they are useful, how they are generated and when to use them. We are going to understand why they are ideal for concurrent access situations.

Firebase Key Generation - How to use the Firebase Push Keys, Should We Use Them
03:09

In this lesson we are going to talk about Firebase Array support, we are going to learn why a concurrent database cannot really support arrays in a scalable way, and what are the features that Firebase offers to support them.

Firebase Arrays - Does Firebase Support Arrays ?
05:34
+
Getting Started With Angular Fire
7 Lectures 22:22

In this lesson we are going to use Angular Fire for the first time. We are going to configure the Angular Fire module, inject the AngularFire service in our service layer and use it do our first Firebase query: we are going to retrieve a list of objects from the database.

Preview 07:42

In this lesson we are going to learn how to use Angular Fire to query objects, and read them from the Firebase realtime database.

Angular Fire Object Observables - How to Read Objects from a Firebase Database?
02:18

In this lesson we are going to learn how to use the Angular Fire List Observable push API method to add new entries to a Firebase list.

How to Write Data to the Database using Angular Fire ?
03:52

In this lesson we are going to learn how to remove entries from a Firebase list using an Angular Fire List Observable.

How To Remove an Element from a List using Angular Fire ?
03:08

In this lesson we are going to learn how to update an element in a Firebase list in a non-destructive way, by modifying only certain properties of the updated object and keeping the other properties intact.

How To Update an Element in a Firebase List using Angular Fire ?
01:10

In this lesson we are going to learn how to modify an object stored in Firebase, and we are going to learn a difference between the set and update API methods.

How to Modify an Object in Firebase using Angular Fire, Set Vs Update
03:31
+
Building the Application Home Page
7 Lectures 36:41

In this lesson we are going to use the Angular CLI to setup the home screen of our application.

Preview 03:43

In this lesson we are going to set up using the Angular CLI our first service that is going to query the database to retrieve all lessons and display them on a data table.

Building our First Firebase Service - The Lessons Service
07:24

In this lesson we are going to learn that Angular 2 Components usually fall into two categories: Smart Components and Presentation Components. We are going to learn the differences between the two, and also we will learn when to use each and why.

Angular 2 Smart Components vs Presentation Components
04:36

In this lesson we are going to learn how using Typescript classes to represent the data we get from the backend is helpful, but it sometimes can cause unexpected issues.

Pitfall of Using Typescript Classes when Querying Data From a Backend
06:20

In this lesson we are going to learn how to implement client side search: we will have a list of lessons in our home screen, and we will allow the user to search for a given lesson by simply typing in an input box and adjusting the list results according to the user search.

How To Implement Client-Side Search in Angular 2 ?
03:59

In this lesson we are going to learn how to setup the router configuration of our application from scratch, we are going to learn how to set up an index route and a fallback route.

Setting Up the Router Configuration of our Application
04:46

In this lesson we are going to learn how the Angular 2 Router and its directives can be used to build an application navigation menu.

Building a Navigation Menu Using The Angular 2 Router
05:53
+
Setting Up a Master Detail Scenario
3 Lectures 15:12

In this lesson we are going to build the Courses screen which will contain a list of courses. This will be the Master screen of the Master Detail setup that we are about to build.

Preview 06:46

In this lesson we are going to learn how to navigate from the Master to the Detail in a Master Detail Setup. We re going to learn how we can pass parameters via the url using the Angular 2 Router.

Configuring the Angular 2 Router for Master To Detail Navigation
03:23

In this lesson we are going to learn how to build a Detail screen for the Master Detail Setup. We are going to learn how to recover the course Id from the url and query the database based on it.

Setting Up the Detail Screen of a Master Detail Setup
05:03
+
How To Do Data Joins In Firebase ?
6 Lectures 26:42
WARNING: Issue in AngularFire2
01:07

This is the first of a series of 3 lessons where we are going to learn how to do the equivalent of a data join in Firebase using AngularFire.

Preview 06:24

This is the second part of a 3 lesson series on Firebase and Joins, we are going to take the key of the course and use it to query the lessons keys of all the course lessons.

Joins in Firebase Continued - Getting a List Of Lesson Keys
02:51

This is the last part on how to do a join in Firebase: we are going to take the lesson keys that we got on the second step, and we are going to use the AngularFire object() API to retrieve the lessons.

Conclusion on Joins in Firebase - Retrieving All Lessons of a Course
07:39

In this lesson we are going to learn how to write maintainable RxJs code, we are going to see how we can build a method using explanatory variables, how to refactor RxJs code for readability and general best practices for clean reactive code while using RxJs.

How to Write Maintainable RxJs Code ? Some Tips and Tricks on How to Write Clean
04:52

In this lesson we are going to apply the data that we retrieved on previous lessons (the lessons of a given course), and we are going to display them on the course detail component. 

Displaying the Lessons Per Course in the Course Detail Page
03:49
+
How To Do Pagination In Firebase ?
3 Lectures 14:14

In this lesson we are going to learn the fundamentals of Firebase pagination and querying in general. We are going to understand how the Firebase query API can be used to load the first page of a paginated data table.

How To Do Pagination in Firebase ? Loading the First Page of a Paginated Table
07:52

In this lesson we are going to use AngularFire to fetch the next page of a paginated Angular 2 Data Table

Firebase Pagination Continued - Loading the Next Page
04:12

In this lesson we are going to use AngularFire to fetch the previous page of a paginated Angular 2 Data Table.

Firebase Pagination Concluded - Loading the Previous Page
02:10
+
Building the Lesson Detail Component
5 Lectures 26:24

In this lesson we are going to implement the navigation mechanism that will take the use from a list of lessons belonging to a given course to the lesson itself.

Navigate From Course Detail to Lesson
05:17

In this lesson we are going to build the initial version of the lesson detail component.

Preview 04:16

In this lesson we are going to learn what are some of the built-in protections that Angular 2 gives us to protect against common security threats like for example XSS (cross site scripting), and how can we still do certain common operations, like injecting an iframe in a page containing for example an YouTube video.

Angular 2 Security - Injecting an Iframe into an Angular 2 Template
04:14

In this lesson we are going to start implementing the navigation mechanism that allows to go from one lesson to the next inside the same course. What could go wrong in that implementation ? We are going to learn how the way that the new reactive router works could lead us to an unexpected error scenario while implementing  this type of navigation scenario.

Preparing To Navigate From Lesson Detail to Lesson Detail: What Could Go Wrong?
07:49

In this lesson we are going to learn how to handle router navigation scenarios where we need to configure a navigation from a given component onto itself, and see how that can trigger an unexpected error situation.

Navigating From Lesson To Lesson - The Route Params Observable
04:48
+
Building The Create New Lesson Form
4 Lectures 28:16

In this lesson we are going to setup the New lessons screen, this screen will allow the user to enter a new lesson, and it contains some form validation logic.

The Create New Lesson Form
05:36

In this lesson we are going to set up form of the new lesson screen as a separate component, so that we can reuse it both the new lesson screen and the Edit Lesson screen.

Creating the Lesson Form Component - Used both for Edit and for Creation
06:37

In this lesson we are going to implement the functionality needed to write data to Firebase in a transactional way: we are going to save a new lesson and add entries in two separate places of the database. We will add the lesson data itself but we will also link the lesson to a course in the lessonsPerCourse node.

Lessons Service - Add Save New Lesson Functionality
12:58

In this lesson we are going to learn how to set up some custom validation to our form: we are going to create a custom validator for Url fields that will be based in a regular expression.

Add New Lesson - Add a Custom Url Field Validator
03:05
+
Building the Edit New Lesson Form
4 Lectures 16:56

In this lesson we are going to setup the Edit Lesson screen component using the Angular CLI and we are going to setup the router configuration for this screen.

Preview 02:35

In this lesson we are going to learn how to use the router Resolve functionality can be used to load data into a screen before the component even gets instantiated, and how the data can be passed to the new component.

Edit Lesson - Retrieve Lesson using the Router Resolve Functionality
07:54

In this lesson we are going to learn how to populate a form for data modification, meaning we are going to read some data from the database, and set it in a form for data modification.

Edit Lesson - Passing the Retrieved Data to the Lesson Form
03:25

In this lesson we are going to learn how we can extract data from a form and send it back to the database to be saved, in this case the data will already exist previously and is only being modified (its not a data creation scenario).

Edit Lesson - Implement the Save Lesson Service
03:02
4 More Sections
About the Instructor
Angular University
4.3 Average rating
1,493 Reviews
12,375 Students
7 Courses
Learn and Keep Up with The Angular Ecosystem

About the Angular University:

The Angular University aims to be the one place that you  go in order to learn and keep up with the Angular ecosystem. We provide premium quality video tutorials, screencast style.

About the course instructor:

Hello, my name is Vasco  and I'm a Software Developer with 17 years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years.   

I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. And that's just a few of them, please check my Linkedin for extensive recommendations.

I also love to teach, write and talk about technology.  I am looking forward to be your Angular  instructor,

Kind Regards,

Vasco