Angular 4 Front To Back
4.7 (869 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,737 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 4 Front To Back to your Wishlist.

Add to Wishlist

Angular 4 Front To Back

Master Angular 4 from the basics to building an advanced application with Firebase integration
4.7 (869 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,737 students enrolled
Created by Brad Traversy
Last updated 8/2017
English
Current price: $12 Original price: $50 Discount: 76% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 8.5 hours on-demand video
  • 47 Supplemental 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 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Build amazing single page applications using Angular 4
  • Master Angular 4 concepts
  • Understand the file and folder structure of an Angular application
  • Build a client management application with authentication and Firebase integration
  • Integrate Bootstrap 4 into Angular projects
View Curriculum
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 4, Setup Angular CLI and learn all of the fundamentals. Once we study the core fundamentals in depth, we will start on a basic project and then move to a much more advanced client management system with authentication and data storing with the Firebase 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 & Quickstart Seed Setup
  • 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 & AngularFire2
  • Flash Messaging
  • Much More!!


Who is the target audience?
  • Anyone that wants to learn Angular 4
Compare to Other Angular Courses
Curriculum For This Course
68 Lectures
08:20:49
+
Introduction
4 Lectures 15:58

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

Preview 03:41

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

Preview 02:44

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

Preview 06:28

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

Angular Versions Explained
03:05
+
Setup & File Structure
6 Lectures 35:50

An overview of what you will learn in section 2

Preview 02:30

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

Preview 07:41

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

Using Angular CLI
04:48

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

Angular 4 File Structure
09:04

The Quickstart Seed is another way to create a new Angular 4 app. We will set it up and take a peek at the files

Using The Quickstart
06:33

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

What Is TypeScript?
05:14
+
Diving Into Components
7 Lectures 37:56

An overview of what we will work on in section 3

Section 3 Introduction
01:11

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

Components Explained
06:03

Here we will examine the app.module.ts file, NgModule and the AppModule class

A Look At NgModule
02:42

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

Creating A Component
07:21

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

Data Binding & String Interpolation
08:17

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

Adding Types To Properties
07:17

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

Objects & Interfaces
05:05
+
Template Syntax
8 Lectures 45:29

An overview of what we will be doing in section 4

Section 4 Introduction
01:31

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

Template Files & Stylesheets
04:38

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

Loop Data With The ngFor Directive
05:58

Add conditionals to your templates using the ngIf and ngSwitch directives

Conditionals With ngIf & ngSwitch Directives
08:23

Learn how to bind data dynamically to attributes using property binding

Property Binding
06:42

Add dynamic classes with the ngClass directive

Class Binding & ngClass
06:50

Add dynamic styles using the ngStyle directive

Style Binding & ngStyle
04:57

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

Using Pipes
06:30
+
Events & Forms
7 Lectures 40:39

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

Section 5 Introduction
00:56

Working with mouse events like click, hover and drag

Mouse Events
07:20

How to change properties dynamically using events

Changing Properties With Events
03:17

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

Keyboard & Input Events
06:27

Using the ngModel directive for two way data binding

ngModel & 2 Way Data Binding
06:02

Handling form submission and manipulating component properties via forms

Form Submission
04:51

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

Template Driven Forms & Validation
11:46
+
Services & HTTP
8 Lectures 44:20

An overview of what we will look at in section 6

Section 6 Introduction
01:06

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

What Is A Service?
03:46

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

Creating A Service
06:18

We will return an observable / data stream from a service

Working With Observables
07:18

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

HTTP Module GET
08:42

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

HTTP Module POST
06:22

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

HTTP Module DELETE
04:49

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

HTTP Module PUT
05:59
+
Angular Router
4 Lectures 17:12

An overview of what we will learn in section 7

Section 7 Introduction
00:43

What is a router and how does it work?

Angular Router Overview
02:26

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

Working With Routes
08:26

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

Params & ActivatedRoute
05:37
+
FAQ App Project
7 Lectures 57:55

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

FAQ App Project Introduction
02:01

Let's create the navbar and the question list component

Setup, Navbar & Question List
13:40

Add the toggle functionality and create the data service for our questions

Answer Toggle & Data Service
08:45

We will nest the question component into the question list component

Nesting Components & Input
05:20

How to emit output from our question form component

Emitting Output From Components
10:27

Add the ability to load and save questions from local storage through our service

Using Local Storage In The Service
13:06

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

Deploying Our Angular 4 App
04:36
+
Client Panel Project - Part 1
8 Lectures 01:45:43

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

Client Panel Project Introduction
02:46

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

Firebase & App Setup
08:24

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

Generate Components & Setup Navbar
11:19

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

AngularFire2 Setup & Client Service
15:37

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

Clients Table Component
15:26

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

Add Client Form
18:03

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

Add Client To Firebase
16:09

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

Client Details Component
17:59
+
Client Panel Project - Part 2
9 Lectures 01:39:47

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

Client Balance Update
13:16

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

Edit & Delete Clients
10:43

We will add login functionality and authentication via Firebase and AngularFire2

Login Authentication
14:23

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

Logout & Nav Links
09:43

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

Auth Guard For Routes
09:00

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

User Registration
08:36

Create the settings service to handle app settings like allowing registration

Settings Service & Register Guard
14:47

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

Adding The Settings Page
16:23

Thank you so much for watching this course. I hope that you learned a lot and I see you in my next course.

Course Summary
02:56
About the Instructor
Brad Traversy
4.7 Average rating
1,402 Reviews
5,090 Students
3 Courses
Full Stack Web Developer & Programmer

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.