Angular Front To Back
4.6 (5,793 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
20,831 students enrolled

Angular Front To Back

Master Angular 5 from the basics to building an advanced application with Firebase's Firestore as well as authentication
4.6 (5,793 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
20,833 students enrolled
Created by Brad Traversy
Last updated 5/2018
English [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11.5 hours on-demand video
  • 58 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build amazing single page applications using Angular 5+
  • Master Angular concepts
  • Understand the file and folder structure of an Angular application
  • Build a client management application with authentication and Firebase's Firestore
  • Integrate Bootstrap 4 into Angular projects
Course content
Expand all 73 lectures 11:25:10
+ Introduction
4 lectures 20:36

In this video I will introduce myself and go over any prerequisites as well as what to expect from this course

Preview 04:13

Here I will go over the outline of each section and what is included as far as topics and projects

Preview 03:21

Let's talk about what exactly Angular is and what it is used for as well as some of it's advantages

Preview 07:50

The version history of Angular can be a little confusing. In this video I will try and clear that up

Angular Versions Explained
+ Setup & File Structure
5 lectures 49:55

An overview of what you will learn in section 2

Preview 04:33

Here we will setup our development environment including installing Node.js with NPM, Visual Studio Code and Git Bash

Environment Setup

We will get started with the Angular CLI (Command line interface) to generate a new Angular application

Using Angular CLI

We will take a look at what makes Angular 4 tick by looking at the folder and file structure of an application

Angular File Structure

TypeScript is a superset of JavaScript and is used with most Angular 2+ applications. Here we will look at some of the features of TypeScript

An Intro To TypeScript
+ Diving Into Components
7 lectures 52:35

We will discuss what a component is and what the advantages of using them are

Components Explained

Here we will create our first component called SandboxComponent. We will be working with this component for the next few lectures

Preview 09:02

I will show you how to bind data from your component to the template using string interpolation 

String Interpolation

Let's take a look at the different types of data that we can define in Angular and TypeScript.

Using Types

We will look at how to add interfaces and models to map out our component properties

Cleanup & Interfaces
Generating Components & OnInit
+ Template Syntax
8 lectures 01:05:10

An overview of what we will be doing in section 4

Loops With ngFor

We can use separate files for our html templates and css files

Conditionals With ngIf

How to loop through data in your template using the ngFor directive

Adding Bootstrap

Add conditionals to your templates using the ngIf and ngSwitch directives

Property Binding

Learn how to bind data dynamically to attributes using property binding

Class Binding & ngClass

Add dynamic classes with the ngClass directive

Style Binding & ngStyle

Add dynamic styles using the ngStyle directive

Pipes & ngNonBindable

Use pipes like currency, percentage and date to format data in your templates

Component & Template Clean Up
+ Events & Forms
7 lectures 01:01:22

An overview of what we will be working on in section 5

Mouse Events & Manipulating State

Working with mouse events like click, hover and drag

Toggling Values With An Event

How to change properties dynamically using events

Keyboard & Input Events

Working with keyboard and input events like keyup, keydown, blur and focus

ngModel & 2 Way Data Binding

Using the ngModel directive for two way data binding

Component Clean Up

Handling form submission and manipulating component properties via forms

Template Driven Forms - Validation

How to create template driven forms with ngForm and add some validation

Template Driven Forms - Submission
+ Services, HTTP, Input & Output
9 lectures 01:22:40

An overview of what we will look at in section 6

What Is a Service?

What is a service and what are they used for? Also what are the advantages of using them?

Creating a Service

I will show you how to create a service and import it into ngModule

Working With Observables

We will return an observable / data stream from a service

HTTP Client Setup & GET Request

We will make a GET request to the JSONplaceholder REST API service using the Http module

HTTP Client POST Request

We will make a POST request to the JSONplaceholder REST API service using the Http module

Event Emitter & Output

We will make a DELETE request to the JSONplaceholder REST API service using the Http module

Input & Edit State

We will make a PUT request to the JSONplaceholder REST API service using the Http module

HTTP Client PUT Request
HTTP Client DELETE Request
+ Angular Router
6 lectures 32:47

An overview of what we will learn in section 7

Angular Router Overview

What is a router and how does it work?

Create App Routing Module

We will look at how to define route paths and link them to components

Creating & Mapping Routes

We will look at how to use parameters in the url and how to grab them from inside of a component and use them

Linking To Routes

We will look at the FAQ app project and see what we will be building

Params & ActivatedRoute

Let's create the navbar and the question list component

Not Found Component
+ DevLogger Project
9 lectures 01:26:11

Build out the static assets using Angular CLI and upload to a web hosting account

Preview 04:20
Components & Bootstrap Setup
Building The UI
Logs Component & Service
Observables & Component Communication
Add, Update & Delete Logs
Finishing Up The State & UX
Implementing Local Storage
Build & Deploy To Github Pages
+ Client Panel Project - Part 1
9 lectures 02:02:30

Let's take a look at the client panel application and what we will be building

Preview 05:12

In this video we will log into Firebase and create a new project, create the clients collection and setup a new user

Firebase Firestore & App Setup

We will generate all of the components needed for this app and setup the navbar and router

Generate Components & Setup Navbar
Routing Module Setup

We will install and setup Firebase and AngularFire2 using NPM and import the necessary modules

AngularFire2 Setup & Client Service

We will fetch clients from firebase and bring them into the clients component

Clients & Dashboard Component

We will create the form to add a client to the system

Add Client Form & Validation

We will create the service function to insert clients into the clients collection in Firebase

Add Client To Firestore

We will create the individual client component to display client info as well as the outstanding balance

Client Details Component
+ Client Panel Project - Part 2
9 lectures 01:51:24

In this video we will add the functionality to update the client balance from the user details component

Client Balance Update

In this video we will add the ability to edit and delete clients from Firebase through our application

Edit & Delete Clients

We will add login functionality and authentication via Firebase and AngularFire2

Login Authentication

We will add the logout functionality and hide and show nav links based on login status

Logout & Nav Links

We will create the authentication guard to apply to certain routes for access control

Auth Guard For Routes

We will add the ability to register users which will be optional when we create the settings

User Registration

Create the settings service to handle app settings like allowing registration

Settings Service & Register Guard

Create the settings form so that we can easily control the settings from the application

Adding The Settings Page
Deploy To Firebase Hosting
  • You should have a basic understanding of HTML and JavaScript

This course was crafted to benefit absolutely any level of developer. We will start from scratch and learn how to create a development environment for Angular 5+, Setup Angular CLI and learn all of the fundamentals. We start by building a sandbox application to look at all of the main Angular concepts as well as building a logging application, then move to a much more advanced client management system with authentication and data storing with Firebase's new Firestore platform.

Here are some of the things you will learn about in this course:

  • What is Angular?
  • Dev Environment Setup Including Node.js, Visual Studio Code & Git Bash
  • Angular CLI Setup & Build
  • File Structure & Dependency Examination
  • TypeScript Intro
  • Components
  • Modules & NgModule
  • Data Binding & String Interpolation
  • Types & Interfaces
  • Template Syntax
  • ngIf & ngFor Conditional Directives
  • ngFor & Loops
  • Property Binding, ngClass & ngStyle
  • Pipes
  • Events & Forms
  • ngModel & 2 Way Binding
  • Services
  • Observables & Http
  • Angular Router
  • Firebase, Firestore & AngularFire2
  • Flash Messaging
  • Much More!!

Who this course is for:
  • Anyone that wants to learn Angular 5+