Angular Front To Back
4.6 (4,635 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.
15,577 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 (4,635 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.
15,577 students enrolled
Created by Brad Traversy
Last updated 5/2018
English
English [Auto-generated]
Current price: $11.99 Original price: $149.99 Discount: 92% off
2 days 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 Udemy's top 3,000+ 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
05:12
+ 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
12:00

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

Using Angular CLI
11:26

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
14:15

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
07:41
+ Diving Into Components
7 lectures 52:35

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

Components Explained
07:37

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
05:44

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

Using Types
09:52

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

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

An overview of what we will be doing in section 4

Loops With ngFor
07:47

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

Conditionals With ngIf
13:25

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

Adding Bootstrap
09:06

Add conditionals to your templates using the ngIf and ngSwitch directives

Property Binding
08:22

Learn how to bind data dynamically to attributes using property binding

Class Binding & ngClass
06:59

Add dynamic classes with the ngClass directive

Style Binding & ngStyle
05:02

Add dynamic styles using the ngStyle directive

Pipes & ngNonBindable
10:15

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

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

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

Mouse Events & Manipulating State
06:30

Working with mouse events like click, hover and drag

Toggling Values With An Event
10:04

How to change properties dynamically using events

Keyboard & Input Events
09:53

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

ngModel & 2 Way Data Binding
10:35

Using the ngModel directive for two way data binding

Component Clean Up
05:26

Handling form submission and manipulating component properties via forms

Template Driven Forms - Validation
14:19

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

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

An overview of what we will look at in section 6

What Is a Service?
05:23

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

Creating a Service
09:32

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

Working With Observables
10:00

We will return an observable / data stream from a service

HTTP Client Setup & GET Request
15:16

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

HTTP Client POST Request
09:41

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

Event Emitter & Output
06:05

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

Input & Edit State
11:24

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

HTTP Client PUT Request
09:41
HTTP Client DELETE Request
05:38
+ Angular Router
6 lectures 32:47

An overview of what we will learn in section 7

Angular Router Overview
03:21

What is a router and how does it work?

Create App Routing Module
04:05

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

Creating & Mapping Routes
04:47

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
06:00

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

Params & ActivatedRoute
10:58

Let's create the navbar and the question list component

Not Found Component
03:36
+ 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
10:06
Building The UI
08:13
Logs Component & Service
12:09
Observables & Component Communication
13:54
Add, Update & Delete Logs
12:40
Finishing Up The State & UX
12:15
Implementing Local Storage
06:06
Build & Deploy To Github Pages
06:28
+ 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
11:24

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

Generate Components & Setup Navbar
09:20
Routing Module Setup
10:47

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

AngularFire2 Setup & Client Service
20:27

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

Clients & Dashboard Component
12:33

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

Add Client Form & Validation
20:23

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

Add Client To Firestore
14:02

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

Client Details Component
18:22
+ 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
12:52

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

Edit & Delete Clients
14:19

We will add login functionality and authentication via Firebase and AngularFire2

Login Authentication
19:41

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

Logout & Nav Links
09:45

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

Auth Guard For Routes
08:42

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

User Registration
06:24

Create the settings service to handle app settings like allowing registration

Settings Service & Register Guard
18:34

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

Adding The Settings Page
14:05
Deploy To Firebase Hosting
07:02
Requirements
  • You should have a basic understanding of HTML and JavaScript
Description

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+