Angular - Concepts, Code and Collective Wisdom
4.3 (315 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.
1,462 students enrolled

Angular - Concepts, Code and Collective Wisdom

Learn the core concepts, play with the code, become a competent Angular developer
4.3 (315 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.
1,462 students enrolled
Created by Mark Rajcok
Last updated 8/2019
English
English [Auto]
Current price: $69.99 Original price: $99.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5.5 hours on-demand video
  • 4 articles
  • 1 downloadable resource
  • 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
  • Understand the core concepts and building blocks of the framework: RxJS Observables, Components, Templates, Data Binding, Services, Dependency Injection, and Change Detection
  • I guarantee you'll learn things that are not in the Angular documentation
  • Learn about Reactive Programming in general, and the specifics about the RxJS library that Angular uses with HTTP, forms, and routing. Observables, operator, and Subjects are all covered.
  • Thoroughly understand how change detection works, some pitfalls, and how to make it even more efficient for your app
  • Learn how to "think in Angular" to architect your next project using Components, Directives, Services and Domain Models
  • Fully understand all of the different types of data binding provided by the framework
  • Understand how data flows through the system, and the various ways that components can communicate with each other and with services
  • Pick up some TypeScript and ES6/ES2015 features that you'll use often with Angular, like classes, metadata, decorators and arrow operators
  • Learn best practices and conventions
  • Become aware of common errors (we'll make them together) and see how to quickly fix them
  • Confidently start writing your own Angular applications
Course content
Expand all 80 lectures 05:27:32
+ Introduction
3 lectures 08:34
  • Should you take this course?  Let's find out.
  • I'll explain what my goals are for this course and for you.
  • I'll review what you'll learn, including a brief overview of the full curriculum.
  • Learn a little bit about me, my interest in Angular over the past few years, and my StackOverflow contributions.
Preview 06:19
Let's see the sample application
01:05
A note about Angular v8
01:10
+ Components
5 lectures 15:02

Learn how a component is a combination of an HTML template, self-contained CSS styles, and "view-glue" logic.
We'll look at our first component in a Plunker. I'll explain what component metadata is.

Preview 03:49

We'll see our first databinding example, which uses string interpolation.  
Learn how component CSS styles are normally isolated from the rest of your application.
Understand how constructors are special in Angular.  I'll also give a quick overview of ES2015 classes.
Learn how to avoid common mistakes when writing your own components.

Styles, classes, constructor arguments, common mistakes
04:57

I'll describe some of the reasons to use TypeScript, and why you should use it to develop Angular 2 applications.

We'll take a quick peek at Visual Studio Code and you'll see how this TypeScript-aware editor can catch syntax errors.

I'll provide some videos and links to learn more about TypeScript and ES2015 features.

TypeScript
04:13

Learn how components compare to Angular 1 concepts.
I'll discuss some best practices to follow when creating components.

More component features; component best practices
01:37
About the Quizzes
00:26
Components and TypeScript
16 questions
+ Templates and Data Binding
5 lectures 18:39

Learn how component templates use HTML plus some special Angular syntax.
I'll enumerate the different types of data bindings that Angular has.

Introduction
01:43

We'll learn how interpolation binding, {‌{}}, binds to DOM property textContent.

Preview 02:48

We'll learn how databindings in Angular are dynamic, and how Angular change detection plays a role.
I'll introduce our first lifecycle hook, ngOnInit().
I'll also show you what an arrow function expression is, and encourage you to use the MDN website for all things JavaScript.

Dynamic data Binding, lifecycle hook ngOnInit(), and arrow functions
03:30

Learn what Angular template expressions are and their restrictions, including "the idempotent rule".

We'll use a Angular built-in pipe to transform our data for viewing, and we'll look at what other pipes Angular ships with.

Learn what the "Elvis" operator is, and why it is extremely useful (and why a there is a question about it practically every week on StackOverflow).

Template Expressions, Pipes, and the Elvis operator
05:15

Since violating the idempotent rule is a recurring issue on StackOverflow, we're going to show you exactly what it means to violate this rule.

I'll also use this deep-dive excursion to introduce TypeScript getter functions.

Idempotent rule -- deep dive; TypeScript getter
05:23
Templates and Data Binding
16 questions
+ Multiple Components
1 lecture 02:00

Before I discuss more databinding techniques, we need to break up our simple Plunker app into 4 separate components.

I'll discuss element selector naming conventions and I'll show you how I could simplify some CSS styling now that we have separate components.

Multiple components
02:00
+ More Data Binding
4 lectures 16:48

Learn how we can bind a parent property to a child property.  We declare the child property to be an "input" property, and we use Angular's template syntax to declare the binding in the parent's template.

Input properties allow parent components to send data to child components.
Learn how Angular change detection plays a role in propagating the data down the component tree.

Preview 03:45

I start creating our one-way databinding summary table.

We review interpolation and property binding, highlighting how they are not the same.  The subtle difference is that interpolation binding always results in a string result being bound.

Interpolation vs Property Binding
02:49

Learn the important differences between HTML attributes and DOM properties.

HTML attribute values don't change.

Often an HTML attribute has a corresponding DOM property and vice versa, but not always!

HTML Attributes and DOM Properties
05:05

Learn about Angular's template syntax for attribute, class, and style binding.

Also learn about the preferred way to bind classes and styles -- using built-in Angular directives NgClass and NgStyle.

Attribute, Class, and Style Binding
05:09
Data Binding - part 2
10 questions
+ Attribute Directives
1 lecture 03:17

Learn what attribute directives are, and how they are used to modify appearance or behavior.

The Simple Attribute Directive
03:17
+ Event Binding
4 lectures 16:46

Learn how to bind a component method to a DOM click event using the parentheses syntax.

I'll describe what happens when a button is clicked in an Angular app... how the event handler runs, then how Angular change detection runs and propagates values changes to parent components and then to the DOM.

DOM Event Binding
06:11

Learn how to bind to any DOM event.

The $event keyword can be used to access the DOM event in your event handler in your component.

DOM Events
03:56

Learn how local template variables can be used to send useful values to your component event handlers, rather then raw DOM events.

I'll show you some special Angular syntax for dealing with keyboard events.

Preview 03:26

Learn what Angular template statements are and their restrictions.

I'll show you how to write a no-op template statement that triggers change detection.

Template statements have a statement context.

Learn what the $event keyword can contain.

Find out why template statements have fewer restrictions and are not as tricky as compared to template expressions.

Template Statements
03:13
Attribute Directives and Event Binding
17 questions
+ TypeScript Editor, Development Environment, TypeScript Interfaces
3 lectures 08:54
Download apps from GitHub
00:42

Plunker was nice, but we've outgrown it for our app.  I've made a number of enhancements to the Q&a App, and I take this opportunity to switch to Visual Studio Code, an editor written in TypeScript and that is TypeScript aware.

We take a look at the online Angular 5-min quickstart, since we're using the same development environment now.

Visual Studio Code, a TypeScript-aware editor
03:48

Learn about TypeScript interfaces, which give us consistent type checking across a set of objects.

I introduce some of the enhancements I've made to our Q&A app.

TypeScript Interfaces
04:24
+ Structural Directives
3 lectures 12:29

I'll present a brief overview of structural directives and the "*" syntax shortcut, then we'll learn how to use NgIf to conditionally add or remove a chunk from the DOM.

NgIf templates are parsed by Angular, hence components and directives can be added and removed with NgIf.

We'll make some common syntax mistakes so that when you make the same mistakes when you first start writing Angular code, you'll already be familiar with them.

Structural Directive Overview and NgIf, the conditional structural directive
04:40

Learn how to switch between multiple templates, not just one, using NgSwitch.

I'll also show you how to put your HTML template in a separate file, which allows for HTML syntax highlighting.

Preview 03:37

Learn how to iterate over a dynamic list to add or remove a template to or from the DOM multiple times.

Learn about the exported values index, last, event, and odd.

We'll look at a StackOverflow question and answer about trackBy, which can be used to specify our own object identity tracking, which is sometimes needed, since Angular's default tracking is sometimes insufficient.

I'll show you how to use NgFor to stamp out multiple instances of a custom component (not just DOM elements).

The workhorse structural directive: NgFor
04:12
Structural Directives
10 questions
+ Parent-Child Communication
3 lectures 10:35

Learn how we can send data from a child property to a parent property by emitting an event on the child's output property.  We declare a child property to be an "output" property, which is always an EventEmitter, and we use Angular's template syntax to declare the event binding in the parent template.

Output properties enable  parent components to send data to child components. Learn how Angular change detection plays a role in propagating the data down the component tree.

Output Properties / Component Custom Events: Child-> Parent Communication
05:03

We review input and output property operation, and how they achieve two-way communication between a parent component and a child component.

I discuss how input and output properties define the public API of a reusable component.

Parent <-> Child Communication
03:53
Requirements
  • You should have some JavaScript experience
  • Typescript, ES2015, and AngularJS knowledge is not required
Description

NOTE: All GitHub repositories and SatckBlitz sample apps used in this course have been updated to use (and tested with) Angular v8.

This course focuses on the core concepts of Angular.  Particular attention is given to the following areas:

  • RxJS Observables - learn about Reactive Programming in general, and then the specifics about the RxJS library that Angular uses with HTTP, forms, and routing.  Observables, operators, and Subjects are all covered.

  • Change Detection - although this is at the heart of Angular, it is not widely understood. I'll explain all aspects of change detection. (Many of the Angular questions I've answered on StackOverflow are due to a lack of understanding of how change detection works.)

  • Dependency Injection - I'll explain how this feature automatically manages creating services for you, by simply "injecting" the desired services into class constructors.

  • Data Binding - I'll describe and demonstrate all of the different binding types in Angular, but more importantly, I'll illustrate (with detailed pictures) how the bindings actually work -- i.e., the component and DOM interactions.  I'll also examine the common sources of confusion developers have when binding using JavaScript reference types in Angular apps. 

  • Inter-Component Communication and Data Flow - learn how to manage data flow through your Angular application, and how to insert logic hooks that trigger when data becomes available or when data changes.

Consider taking this course if you are a developer who wants to quickly learn Angular concepts without having to read the online docs, blog posts, GitHub issues, and StackOverflow posts.  I've attempted to digest some of that information for you, and I've attempted to streamline this course as much as possible -- no fluff!  (Honestly, you don't need a 28 hour course to learn Angular.)

I'll teach you how to architect an app and how to "think in Angular." I'll discuss the real and conceptual trees that Angular builds and uses to achieve very fast change detection and multi-level dependency injection.

While exploring the concepts I'll iteratively develop an Angular app that utilizes all of the core concepts. I'll also show you a number of separate, small Angular apps (using StackBlitz) that demonstrate specific framework functionality.  I'll spend time discussing some of the recurring issues that I've seen come up on StackOverflow with the angular tag, and I'll discuss some StackOverflow posts that reveal new techniques that you can't find in the Angular documentation.

Along the way, while you're learning Angular, you'll also learn some TypeScript and ES6/ES2015 features.

Note: There is a changelog at the end of this course -- it is the last "lecture".

Thank you for your interest in this course.  I've donated some of the earnings from this course to helping people around the world (mostly education, farming, and health projects) through Zidisha.

Some student reviews:

  • "Excellent course, The teacher has a really deep knowledge of Angular, and he teach things that you are very unlikely to find anywhere else. I'm very pleased with this course because I'm learning tons of information and tricks that really set this course apart."

  • "Straight and to the point. Love it."

  • "If you liked Anthony Alicea's amazing Udemy course on Angular 1, you will love Mark Rajcok's course on Angular 2. Both courses emphasize a deep understanding of the material, not just code mimicry. There are already some good courses on Angular 2 out there; however, no one taught me how to "think in Angular 2" better than Mark."

  • "This is truly a fantastic course, it is very well thought out and delivered. I have completed many courses and tutorials and there are a lot of good ones out there, but this was the first course that I felt really explained the framework, concepts and best practices. There are many things in this course that I learnt to do in other courses but never really understood why, Mark traverses that gap in a very structured and clear way... His combination of theory and explaining things with diagrams and then following up with clear coding examples really makes a difference in this course..."

  • "I really like the approach in this course. Getting to understand how things work, not just how to do things."

  • "Bravo! A must see for Angular 2 developers. Clear and comprehensive instruction with excellent quiz usage. A+"

  • "i've purchased 3 other Angular 2 video series and this is the best so far"

  • "I have taken 5+ Developer oriented courses here on Udemy and consider myself a pretty competent developer. This instructor is the best one I have ever seen. He thoroughly explains concepts and tells us the inner workings of angular and why we do things the 'angular way'. A+++ Highly recommend."

  • "very informative and the major topic was change detection which was fantastic."

  • "the stated material is very interesting and cannot be found in other courses"

  • "I like the way this course, is more focused on why and how to help yourself writing better, efficient coding. Really helpful."

  • "Mark provides with his broad knowledge teaches not only code, but also the context of the code within ng. For a serious ng developer a must do course."

  • "This course was great discovery for me. Before taking it, I was already quite familiar with Angular. But still, course provided me with huge amount of useful informations, and clear, to-the-point explanations of not so much understood Angular concepts. I think any serious Angular developer can get great benefits from taking this course. ... take this course to deepen and fortify the knowledge about the framework. In a single place, course explains things about the framework which are very hard to find elsewhere. Furthermore, many additional resources are provided for further learning, which are not only useful by them selfs, but also introduce attendees to the, already vast, Angular ecosystem."

  • "Dev wisdom in a folksy, non-pretentious style. If you are trying to learn Angular, you would likely be best learning from two or three different instructors. This course doesn't purport to be "the only course you need to learn Angular"... and it isn't. Instead, it's a great compliment to an Angular "from the ground up" course. Do that one first, and then do this one."

Who this course is for:
  • This course is for developers who want to thoroughly learn some of the core Angular concepts