Hackr.io is a community to find and share the best online courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:

share-icon

Anybody can submit a course or a tutorial

thumbs-up

Community upvotes the useful tutorials

upwards-graph

The best tutorials rise to the top

The Complete Angular Course: Beginner to Advanced (udemy.com)

Visit Tutorial
Add
My Courses
Paid Video Beginner Angular 4
Top Three Medal #2 out of total 57 Angular tutorials & courses

Why developers like this tutorial (one-liner reviews):

Video quality

Content quality

Qualified Instructor

Course depth and Coverage

Course Pace

Add your one-liner review here:

Tutorial Info

Session:
Self Paced
Video:
29.5 hours on-demand video
Certificate:
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

What you'll learn

  • Establish yourself as a skilled professional developer
  • Build real-world Angular applications on your own
  • Troubleshoot common Angular errors
  • Master the best practices
  • Write clean and elegant code like a professional developer

Requirements

  • Basic familiarity with HTML, CSS and JavaScript
  • NO knowledge of Angular 1 or Angular 2 is required

About

Description


Angular is one of the most popular frameworks for building client apps with HTML, CSS and TypeScript. If you want to establish yourself as a front-end or a full-stack developer, you need to learn Angular.


If you've been confused or frustrated jumping from one Angular 4 tutorial to another, you've come to the right place. In this course, Mosh, author of several best-selling courses on Udemy, takes you on a fun and pragmatic journey to master Angular 4


By the end of watching this course, you'll be able to: 

  • Build real client apps with Angular on your own 
  • Troubleshoot common compile-time and run-time errors
  • Write clean and maintainable code like a professional
  • Apply best practices when building Angular apps 



Right from the beginning, you'll jump in and build your first Angular app within minutes. Say goodbye to boring tutorials and courses with rambling instructors and useless theories! 


Angular 2+ has been written in TypeScript. So, in section 2, you'll learn the fundamentals of TypeScript and object-oriented programming to better understand and appreciate this powerful framework. 


Over the next 8 hours, you'll learn the essentials of building client apps with Angular

  • Displaying data and handling events
  • Building re-usable components
  • Manipulating the DOM using directives 
  • Formatting data using pipes
  • Building template-driven and reactive forms 
  • Consuming HTTP services 
  • Handling HTTP errors properly 
  • Using Reactive Extensions and observables 
  • Adding routing and navigation
  • Implementing authentication and authorization using JSON Web Tokens (JWT) 
  • Deploying your applications to GitHub Pages, Firebase and Heroku


So, if you're a busy developer with limited time and want to quickly learn how to build and deploy client apps with Angular, you can stop here. 


If you're more adventurous and want to learn more, there is far more content for you! Over the following sections, you'll learn about more advanced topics: 

  • Building real-time, server-less apps with Firebase 
  • Animating DOM elements using Angular animations
  • Building beautiful UIs using Angular Material
  • Implementing the Redux architecture 
  • Writing unit and integration tests 


All that covers just over 21 hours of high-quality content. This is equivalent to a book with more than a thousand pages! But the kind of book that every line is worth reading, not a book that you want to skim! If you have taken any of Mosh's courses before, you know he is very clear and concise in his teaching and doesn't waste a single minute of your precious time!


Finally, at the end of the course, you'll build and deploy a real-time e-commerce application with Angular 4, Firebase 4 and Bootstrap 4. This application exhibits patterns that you see in a lot of real-world applications:

  • Master/detail
  • CRUD operations
  • Forms with custom validation
  • Searching, sorting and pagination
  • Authentication and authorization 
  • And a lot more! 


You'll see how Mosh creates a brand new Angular project with Angular CLI and builds this application from A to Z, step-by-step. No copy/pasting! These 8.5 hours are packed with tips that you can only learn from a seasoned developer. 


You'll learn how to apply best practices, refactor your code and produce high quality code like a professional developer. You'll learn about Mosh's design decisions along the way and why he chooses a certain approach. What he shares with you comes from his 17 years of experience as a professional software developer. 


You're not going to get this information in other Angular courses out there! 



And on top of all these, you'll get: 

  • Closed-captions generated by a human, not a computer! Currently only the first few sections have closed-captions but new captions are being added every week. 
  • Offline access: if you are traveling or have a slow connection, you can download the videos and watch them offline.
  • Downloadable source code



PREREQUISITES

You don't need familiarity with TypeScript or any previous versions of Angular. You're going to learn both TypeScript and Angular from scratch in this course.



WHAT OTHER STUDENTS WHO HAVE TAKEN THIS COURSE SAY:

"Absolutely amazing Angular course. Mosh not only introduces key concepts behind Angular, but also pays attention to coding style and good practices. Additionally, course is contstantly enhanced and updated. Also, student questions are answered by Tim - Mosh's teaching assistant. Awesome!" -Calvis


"I am amazed of how dedicated you are in providing updates and more contents to this course. This kind of value is what define a great course and made me feel that the money is well spent. Keep it up! Furthermore, lessons are arranged and planned really carefully. This made the learning experience more seamless and exciting. Thanks Mosh!" -Rashid Razak


"This is another excellent course from the wonderful author Mosh. Thank you Mosh for your awesome course on Angular. Inspite of being a Pluralsight subscriber for the last 3 years, I have subscribed 10 out of 16 courses so far Mosh has produced in Udemy. Also I have viewed 3 of his courses in Pluralsight. That is how I got introduced to this brilliant author. This speaks about the quality of his content. Once again Thank you Mosh for all your efforts. Hope to see a Design Patterns course from you soon." -Dhanasekar Murugesan


"Fantastic course, well laid out, good speed, and explains the why behind everything he does, shedding light on what's under the hood. Also, Mosh has a very practical and elegant coding style worth emulating." -Mack O'Meara


"This is the second course I've taken with Mosh as the instructor and I've signed up for another. The quality of the audio, video, and content shows Mosh invests his time and money to create great and valuable videos. The material is relevant, up-to-date, and provides the student with the ability to succeed in the subject matter (in this case Angular). My expectations were exceeded again. I'll be taking more courses with Mosh!" -John




30-DAY FULL MONEY-BACK GUARANTEE

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you are not happy for any reasons, contact Udemy for a full refund within the first 30 days of your enrolment. All your money back, no questions asked.



ABOUT YOUR INSTRUCTOR

Mosh (Moshfegh) Hamedani is a software engineer with 17 years of professional experience. He is the author of several best selling Udemy courses with more than 120,000 students in 192 countries. He has a Master of Science in Network Systems and Bachelor of Science in Software Engineering. His students describe him as passionate, pragmatic and motivational in his teaching.



So, what are you waiting for? Don't waste your time jumping from one tutorial to another. Enroll in the course and you'll build your first Angular app in less than 10 minutes!



Who is the target audience?
  • Developers who want to upgrade their skills and get better job opportunities
  • Front-end developers who want to stay up-to-date with the latest technology
  • Back-end developers who want to learn front-end development and become full-stack developers
  • Hobbyist developers who are passionate about working with new frameworks

Syllabus

Introduction

Introduction

What is Angular

Architecture of Angular Apps

Setting Up the Development Environment

Your First Angular App

Structure of Angular Projects

Webpack

Angular Version History

Angular Basics

Course Structure

Making a Promise

Asking Questions

TypeScript Fundamentals

Introduction

What is TypeScript?

Your First TypeScript Program

Declaring Variables

Types

Type Assertions

Arrow Functions

Interfaces

Classes

Objects

Constructors

Access Modifiers

Access Modifiers in Constructor Parameters

Properties

Modules

Exercise

Solution

A Problem with the Current Implementation

Angular Fundamentals

Introduction

Building Blocks of Angular Apps

Components

Generating Components Using Angular CLI

Templates

Directives

Services

Dependency Injection

Generating Services Using Angular CLI

List of Authors

Displaying Data and Handling Events

Introduction

Property Binding

Attribute Binding

Adding Bootstrap

Class Binding

Style Binding

Event Binding

Event Filtering

Template Variables

Two-way Binding

Pipes

Custom Pipes

Favorite Component

Title Casing

Building Re-usable Components

Introduction

Component API

Input Properties

Aliasing Input Properties

Output Properties

Passing Event Data

Aliasing Output Properties

Templates

Styles

View Encapsulation

ngContent

ngContainer

Like Component

Directives

Introduction

ngIf

Hidden Property

ngSwitchCase

ngFor

ngFor and Change Detection

ngFor and Trackby

The Leading Asterisk

ngClass

ngStyle

Safe Traversal Operator

Creating Custom Directives

Exercise: ZippyComponent

Template-driven Forms

Introduction

Building a Bootstrap Form

Types of Forms

ngModel

Adding Validation

Specific Validation Errors

Styling Invalid Input Fields

Cleaner Templates

ngForm

ngModelGroup

Control Classes and Directives

Disabling the Submit Button

Working with Check Boxes

Working with Drop-down Lists

Working with Radio Buttons

Course Form

Reactive Forms

Introduction

Building a Bootstrap Form

Creating Controls Programmatically

Adding Validation

Specific Validation Errors

Implementing Custom Validation

Asynchronous Operations

Asynchronous Validators

Showing a Loader Image

Validating the Form Input Upon Submit

Nested FormGroups

FormArray

FormBuilder

Quick Recap

Change Password Form

Consuming HTTP Services

Introduction

JSONPlaceHolder

Getting Data

Creating Data

Updating Data

Deleting Data

OnInit Interface

Separation of Concerns

Extracting a Service

Handling Errors

Handling Unexpected Errors

Handling Expected Errors

Throwing Application-specific Errors

Handling Bad Request Errors

Importing Observable Operators and Factory Methods

Global Error Handling

Extracting a Reusable Error Handling Method

Extracting a Reusable Data Service

The Map Operator

Optimistic vs Pessimistic Updates

Observables vs Promises

GitHub Followers Page

Routing and Navigation

Introduction

Routing in a Nutshell

Configuring Routes

RouterOutlet

RouterLink

RouterLinkActive

Getting the Route Parameters

Why Route Parameters Are Observables

Routes with Multiple Parameters

Query Parameters

Subscribing to Multiple Observables

The SwitchMap Operator

Programmatic Navigation

Blog Archives

Authentication and Authorization

Introduction

Application Overview

Architecture

JSON Web Tokens

Starter Code

Implementing Login

Implementing Logout

Showing or Hiding Elements

Showing or Hiding Elements based on the User's Role

Getting the Current User

CanActivate Interface

Redirecting Users After Logging In

Protecting Routes Based on the User's Role

Accessing Protected API Resources

Quick Recap

Deployment

Introduction

Preparing for Deployment

JIT vs AOT Compilation

Angular Compiler in Action

Building Applications with Angular CLI

Environments

Adding Custom Environments

Linting with Angular CLI

Linting in VSCode

Other Deployment Options

Deploying to GitHub Pages

Deploying to Firebase

Heroku

Deploying to Heroku

Engines

Exercise

Building Real-time Server-less Apps with Firebase

Introduction

What is Firebase?

Your First Firebase Project

Working with Firebase Databases

Installing Firebase

Reading Lists

A Real-time Database

Observables and Memory Leaks

Unsubscribing from Subscriptions

Async Pipe

Reading an Object

As Keyword

Adding an Object

Updating an Object

Removing an Object

Additional Resources

Animations

Introduction

Examples of Animations

Different Ways to Create Animations

Angular Animations

Importing the Animations Module and Polyfills

Implementing a Fade-in Animation

Implementing a Fade-out Animation

States

Transitions

Animatable Properties

Creating Reusable Triggers

Build a re-usable slide animation

Easings

Keyframes

Creating Reusable Animations with animation()

Parameterizing Reusable Animations

Animation Callbacks

Querying Child Elements with query()

Animating Child Elements with animateChild()

Running Parallel Animations with group()

Staggering Animations with stagger()

Working with Custom States

Multi-step Animations

Separation of Concerns

Angular Material 2

Introduction

What is Angular Material

Installing Angular Material

Check Boxes

Radio Buttons

Selects

Inputs

Text Areas

Date Pickers

Icons

Buttons

Chips

Progress Spinners

Tooltips

Tabs

Dialogs

Passing Data to Dialogs

Other Components

Creating a Reusable Module

Themes

SASS

Creating a Custom Theme

Using Angular Material's Typography

Customizing Typography

An Important Note

Redux

Introduction

What is Redux

Building Blocks of Redux

Pure Functions

Installing Redux

Working with Actions

The Select Decorator

Avoiding State Mutation

Using Immutable.js

Exercise

Redux DevTools

Calling Backend APIs

Refactoring Fat Case Statements

Dealing with Complex Domains

Unit Testing

Introduction

What is Automated Testing?

Types of Tests

Unit Testing Fundamentals

Working with Strings and Arrays

Set Up and Tear Down

Working with Forms

Working with Event Emitters

Working with Spies

Interaction Testing

Working with Confirmation Boxes

Limitations of Unit Tests

Code Coverage

Exercises

Integration Testing

Introduction

The Setup

Generating the Setup Code

Testing Property Bindings

Testing Event Bindings

Providing Dependencies

Getting the Dependencies

Providing Stubs

Testing the Navigation

Dealing with Route Params

Testing RouterOutlet Components

Shallow Component Tests

Testing Attribute Directives

Dealing with Asynchronous Operations

Project: Getting Started

Introduction

Challenge

Accessing the Source Code

Creating a New Project

Installing Bootstrap 4

Extracting NavBar Component

Defining the Routes

Adding a Drop-down Menu

Cleaning Up the NavBar

Fixing a Few Minor Issues

Deployment

Project: Authentication and Authorization

Introduction

Implementing Google Login

Implementing the Logout

Displaying the Current User

Using the Async Pipe

Extracting a Service

Protecting the Routes

Redirecting after Logging In

Storing Users in Firebase

Defining Admins

Protecting the Admin Routes

Showing or Hiding the Admin Links

Fixing a Bug

Project: Product Management Module

Introduction

Building a Bootstrap Form

Populating the Categories Drop-down List

Saving the Product in Firebase

Implementing Validation

Adding Custom Validation

Adding a Bootstrap Card

Displaying the List of Products

Editing a Product

Updating a Product

Deleting a Product

Searching for Products

Extracting an Interface

Adding a Data Table Component

Configuring the Data Table

Feeding the Data Table

Filtering with the Data Table

Fixing a Bug with Redirecting Users

Cleaning Up the Product Form

Project: Product Catalog Module

Introduction

Displaying All the Products

Displaying the Categories

Filtering Products by Category

Dealing with Multiple Asynchronous Operations

Refactoring: Extracting ProductFilterComponent

Refactoring: Extracting ProductCardComponent

Improving the Product Card

Making Categories Sticky

Wrap Up

Project: Shopping Cart Module

Introduction

Creating a Shopping Cart

Refactoring: Moving the Responsibility to the Service

Adding a Product to the Shopping Cart

Refactoring the addToCart Method

Displaying the Quantity

Improving the Card Footer

Implementing the Change Quantity Buttons

Displaying the Number of Shopping Cart Items in NavBar

Refactoring: Creating a Rich Model

Building the Shopping Cart Page

Fixing a Design Issue

Displaying the Total Price

Refactoring: Extracting ProductQuantityComponents

Discovering a Design Issue

Flattening Shopping Cart Item Objects

Better Object Initialization

Clearing the Shopping Cart

Fixing a Bug with Updating the Quantity

Improving the Layout

Adding a Thumbnail

More Refactoring

Project: Check Out Module

Introduction

Adding the Check Out Button

Building a Shipping Form

Saving the Order in Firebase

Associating the Order with the Current User

Refactoring: Extract an Order Model

Redirecting the User to the Order Success Page

Clearing the Shopping Cart

Transactions

Adding an Order Summary Widget

Refactoring: Extract ShippingFormComponent

Displaying the Orders

Fixing a Bug

What about Processing Payments?

Project: Modularization and Final Improvements

Introduction

Modules

Essential TypeScript Plugins

Moving Files and Folders

Creating the Shared Module

Creating the Admin Module

Creating the Shopping Module

Creating the Core Module

Importing and Exporting Modules

Adding Icons

Aligning the NavBar Items

Defining a Theme

Coupon to My Other Courses

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Betsu Melaku
1 year ago

Mosh is an amazing trainer. I have taken almost all of the courses he authored both on Udemy and Pluralsight and It helped me to think like a Software Engineer. His courses are designed with exercises that forces you to implement the lessons than just listen and watch the video. Keep it up Mosh! I really owe you big time!!!

Mosh Ham
1 year ago

@betsu-melaku Thank you so much for your beautiful review!! So excited to hear about the impact of my courses on you. All the best my friend!

Abhishek S
1 year ago

This is the Best angular course available now. Highly recommended.

Goutham Gau
9 months ago

@abhishek-s can you please let me know if you have the Exercise part of this course.. it will be helpful for me thank you.

Goutham Gau
9 months ago

@abhishek-s can you please let me know if you have the Exercise part of this course.. it will be helpful for me thank you.

Nish Jha
1 year ago

Excellent course. Thanks Mosh :)

Mosh Ham
1 year ago

@nish-jha Thank you!

Samith Dilhara
1 year ago

Amazing teacher!!

Troy Scott
1 year ago

Excellent material.

Herri Fransisca
1 year ago

Brother Mosh care about my training and I'm in good hands!
Thank you so much, Brother Mosh /\ (deep bow)

Facundo Rodriguez
1 year ago

Excellent course, excellent teacher... Highly recommended!!

Pardeep Sharma
1 year ago

Very nice tutorial. Mosh is great teacher...

Haris K
1 year ago

Mr. Mosh way of teaching is amazing

Aindriu Mac Giolla Eoin

Excellent course! Highly recommended !

More Angular Tutorials