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.
> 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
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 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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
In this lesson we are going to learn how to use Angular Fire to query objects, and read them from the Firebase realtime database.
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.
In this lesson we are going to learn how to remove entries from a Firebase list using an Angular Fire List Observable.
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.
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.
In this lesson we are going to use the Angular CLI to setup the home screen of our application.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
In this lesson we are going to use AngularFire to fetch the next page of a paginated Angular 2 Data Table
In this lesson we are going to use AngularFire to fetch the previous page of a paginated Angular 2 Data Table.
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.
In this lesson we are going to build the initial version of the lesson detail component.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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,