Angular 2 Concepts, Code and Collective Wisdom

Learn the core concepts, play with the code, become a competent Angular 2 developer
4.6 (98 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.
519 students enrolled
$19
$40
52% off
Take This Course
  • Lectures 75
  • Length 4.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 English

Course Description

Note: All of the GitHub repos used in this course have been updated to Angular v2.2.
This course focuses on the core concepts of Angular 2.  Particular attention is given to the following areas:

  • Change Detection - although this is at the heart of Angular 2, it is not yet widely understood. I'll explain all aspects of change detection. (Many of the questions I've answered on StackOverflow for Angular 2 are due to a lack of understanding of how change detection works.)
  • Dependency Injection - see how this feature is much improved in Angular 2 over Angular 1's version.
  • Data Binding - I'll describe and demonstrate all of the different binding types in Angular 2, 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 2 apps. 
  • Inter-Component Communication and Data Flow - learn how to manage data flow through your Angular 2 application, and how to insert logic hooks that trigger when data becomes available or when data changes.

By the end of this course, you'll be sought after for your knowledge of these four areas. (And consider using your new-found knowledge to help answer Angular 2 questions on StackOverflow.)

Take this course if you are a developer who wants to quickly learn Angular 2 concepts without having to read the online docs, blog posts, GitHub issues, and StackOverflow posts. I've attempted to digest much of that Angular 2 information for you, and I've attempted to streamline this course as much as possible -- no fluff!

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

While exploring the concepts I'll iteratively develop an Angular 2 app that utilizes all of the core concepts. I'll also show you a number of separate, small Angular 2 Plunker apps 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 angular2 tag, and I'll discuss some StackOverflow posts that reveal new techniques that you can't find in the Angular 2 documentation.

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

Note: this course is still under development. Changes will be made, and additional lectures and quizzes will be added.  E.g., expect some lectures on NgModule, the Angular Router and Forms. Check the changelog at the end of this course periodically (e.g., once every two weeks).

Some student reviews:

  • "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 ng2. For a serious ng2 developer a must do course."
  • "This course was great discovery for me. Before taking it, I was already quite familiar with Angular 2. But still, course provided me with huge amount of useful informations, and clear, to-the-point explanations of not so much understood Angular 2 concepts. I think any serious Angular 2 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 2 ecosystem."

What are the requirements?

  • You should have some JavaScript experience
  • Typescript, ES2015, and Angular 1 knowledge is not required

What am I going to get from this course?

  • Understand the core concepts and building blocks of the framework: Components, Templates, Data Binding, Services, Dependency Injection, and Change Detection
  • I guarantee you'll learn things that are not in the Angular documentation
  • 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 2" 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 2, 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

What is the target audience?

  • This course is for developers who want to thoroughly learn Angular 2 concepts

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
06:19
  • 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.
Let's see the sample application
01:05
A note about Angular Final Release
Article
Section 2: Components
03:49

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.

04:57

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.

04:13

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.

01:37

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

About the Quizzes
Article
Components and TypeScript
16 questions
Section 3: Templates and Data Binding
01:43

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

02:48

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

03:30

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.

05:15

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).

05:23

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.

Templates and Data Binding
16 questions
Section 4: Multiple Components
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.

Section 5: More Data Binding
03:45

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.

02:49

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.

05:05

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!

05:09

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.

Data Binding - part 2
10 questions
Section 6: Attribute Directives
03:17

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

Section 7: Event Binding
06:11

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.

03:56

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.

03:26

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.

03:13

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.

Attribute Directives and Event Binding
17 questions
Section 8: TypeScript Editor, Development Environment, TypeScript Interfaces
Download apps from GitHub
Article
03:48

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.

04:24

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.

Section 9: Structural Directives
04:40

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.

03:37

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.

04:12

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).

Structural Directives
10 questions
Section 10: Parent-Child Communication
Progress Check
Preview
01:39
05:03

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.

03:53

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.

Section 11: Reference Types vs Primitive Types when using Input Properties
04:45

Learn the nuances of using JavaScript reference types as input properties.  You may be surprised to learn how they work and how data is actually shared between a parent component and a child component. 

05:29

I'll compare JavaScript reference types and primitive types.  Then we'll look at using primitive types as input properties.  Primitive types are easier to understand than reference types, but you must follow one simple rule.

Parent-Child Communication
14 questions
Section 12: Two-way data binding
04:31

I'll show you how to use NgModel to bind a component primitive property to a form element.

You'll learn how to break apart the NgModel bindings when you need to perform some additional logic when the form element changes.

05:42

Learn how to setup two-way data binding between a parent component and a child component.

There are many similarities with NgModel two-way data binding, but with one significant difference that I'll discuss.

Then we'll up the ante and show an example of two-way data binding between parent and child, and then two-way databinding in the child between that same input property and a form element.

Learn the EventEmitter rule of thumb.

Two-way Binding
11 questions
Section 13: Host Binding and Attribute Directives
03:58

Learn how to bind to properties and events on the host element. 

Host binding is often used when writing attribute directives... when a view is not required.  So we'll revisit attribute directives at this time.  We'll write two attribute directives using Plunker.  Each one will use a different host binding syntax.

03:14

Learn how to avoid using ElementRef to make your code web worker safe.

Host Binding and ElementRef
4 questions
Section 14: View Children and Content Children
02:35

Learn how to get a reference to a DOM element (that is in your view) in your component logic, using a local template variable.  Once you have that, you can set the focus on that element imperatively.

03:51

Learn how to get a dynamic list of references to DOM elements or components in your view.

You can then call methods on the DOM elements (like focus()) or public APIs/methods on your components.

01:46

Learn how to get a dynamic list of references to DOM elements or components that are in a template provided by the user of your component (i.e., elements and child components that are not in the component's template).

ContentChildren is quite useful for any kind of expand/collapse set of items -- tabs, accordion list, menus, etc.

View Children and Content Children
10 questions
Section 15: App Enhancements, Material Design Styling
02:34

I'll show you how I added some stylesheets from ng2-material to give our app a major facelift.

03:32

I'll describe the new features that were added to the app.

Learn how to use a getter to handle data that might not be available when the view first renders.  E.g., if you are retrieving some data from a server.

Mini-quiz
4 questions
Section 16: Services, Observables, Promises
03:19

I'll show you how simple it is to create an Angular service.

Learn about the @Injectable() decorator, and how to inject Angular's Http service into the constructor of our service.

03:21

Learn a little bit about RxJS Observables, Promises, and the Response object that contains our server response (and hence our data).

03:16

A lot of tutorials skip over error handling.  I'll show you how to deal with server errors, including malformed JSON data.

02:29

I'll discuss other service features.

Learn how communication and data flows from component to service, service to server, server to service, service to component, and finally component to child components.

04:11

I'll show you the app's RememberService, which is used to remember a form element's content, which can be restored if the user clicks the Cancel button.

Services, Observables, Promises
12 questions
Section 17: Dependency Injection
03:18

Get the big picture on what dependency injection is and some of its benefits.

07:31

Learn about Angular injectors, and how they form a hierarchy that overlays the component tree. Depending on how the injector tree is configured, services can be singletons, or you can get multiple instances of a service.

I'll show you how components and services use the injector tree to find the dependencies they require.

03:43

Learn how to register providers with an injector.

I'll explain what provider tokens and recipes are, and how the injector cache works.

06:12

I'll show you how to use an already-created object (e.g., a string, an object, a function) as a provider.

Learn what an OpaqueToken is.

We'll look at three ways to get configuration information into your app:  

  1. register a pre-created object using a string token
  2. use import to import a global object
  3. register a pre-created object using an OpaqueToken 
04:19

We'll review the different token types and provider types.

I'll show you what the HTTP_PROVIDERS constant looks like, and you'll see how easy it is to locate Angular source code directly from the API documentation.

01:47

Learn about injector decorators, which give you more control over what is injected or where to start looking for injectors on the injector tree.

03:06

There are many built-in Angular objects that you can inject, like ElementRef, Renderer, ChangeDetectorRef, ViewRef, etc.  Some are used to write attribute or structural directives.  Others have more esoteric uses.

We'll review how our host binding Plunker/app injects ElementRef and Renderer and then uses these Angular objects to modify the host element's style.

I'll show you a StackOverflow post that explains how to inject Renderer and then use it to dynamically add an event listener to the host element, or to the document.

Yes, we'll cover all that in less than 3.5 minutes!

03:14

We'll briefly look at the Angular Developer Guide's Structural Directives page and a StackOverflow post about TemplateRef.

I'll then explain how Victor Savkin (in a YouTube talk) created a structural component that takes a user-supplied template and stamps it out, with some additional filtering functionality.

I'll show you how to find other Angular built-in injectables in the API docs.

Dependency Injection
22 questions
Section 18: Change Detection
03:08

I'll make the case for why I think change detection is the best feature of Angular.

Learn how Angular uses Zone.js to add a change detection hook into all of the common browser asynchronous events.

02:28

Find out how the Angular team made change detection so fast.  

We'll review the rules we need to follow when writing template expressions so that we don't "break" change detection.

05:23

If your view isn't updating, it is somehow related to change detection.  We'll look at a typical StackOverflow "my view isn't updating" problem.  I'll explain the problem, and provide a Plunker so you can experiment with it on your own. 

We'll also discuss the ngOnChanges() lifecycle hook.

02:32

Let's circle back a bit and try to define exactly what change detection is.  It's complicated, because different aspects of it permeate the entire framework.  That's why I have it at the end of this course.

01:08

I'll review the component and injector trees, and we'll talk a bit about the change detector tree.

05:55

Learn what the different phases (or steps) of change detection are.

I'll review the idempotent rule, and I'll show you a plunker that violates the rule with an input property setter.  In the same plunker, we'll show you how to implement the same functionality without violating the rule.

05:37

Learn about directive and component lifecycle hooks.

I'll show you how to use interfaces in TypeScript to get syntax error checking for lifecycle hooks.

Understand what belongs (and what doesn't belong) in the constructor, the destructor, and ngOnInit.

Learn when ngOnChanges is called.  It is different for JavaScript reference types vs primitive types.

04:07

Learn how to implement your own change detection logic (if Angular's default algorithm isn't sufficient) with ngDoCheck().  

Understand why ngOnChanges() is preferred over ngDoCheck().

Learn why it is very important to make the *Check methods very efficient, if you need to implement any of them.

I'll explain why any changes that you make in afterView* methods that affect any views require special handling.

03:19

I'll present a plunker that implements all of the lifecycle hooks for two components.  You'll see how they intermingle, and which methods get called every change detection cycle, and which do not.

05:53

Learn how to manually run change detection on the entire component tree, or on just one component and its descendants.  I'll explain why you might need to do this.

I'll show you how to completely detach a component from the change detection tree, and how to reattach it imperatively, whenever you want.  We'll look at a plunker that demonstrates this.  Inside the plunker is also an example of using a template literal placeholder.

03:04

Learn about a middle-of-the-road approach to change detection:  not always on, and not detached.  This change detection "strategy" is called OnPush.  Learn which components should use this strategy, and how to ensure that ancestor components also get updated if there is an application state change in an OnPush component.

04:24

This lecture and the next one are a deep-dive into the OnPush change detection strategy.  I present a plunker with 5 components and I alter the OnPush setting on different components and I explain the effects.

OnPush Demystified - Part 2
06:27
Change Detection
20 questions

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mark Rajcok, #1 AngularJS and #3 Angular2 Answerer on StackOverflow

I've been a programmer for 30+ years.  It is my career and my hobby.  I have experience developing full-stack web apps, server-side multi-threaded programs, near real-time embedded systems, and writing programs to extract data from Hadoop clusters.  Back in 2013 I became interested in AngularJS and soon after I started to spend a lot of time helping people learn the framework on StackOverflow and I got hooked.  At the end of 2015, I started learning Angular 2 and once again I started answering questions on StackOverflow.  The knowledge I've acquired I'll share with you.

Ready to start learning?
Take This Course