Angular 2 - The Complete Guide

Learn how to create modern web applications with the successor of Angular.js
4.6 (5,379 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.
22,408 students enrolled Bestselling in Angular
$19
$190
90% off
Take This Course
  • Lectures 261
  • Length 16.5 hours
  • Skill Level All Levels
  • 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 2/2016 English

Course Description

Update 17 September 2016: This entire Course was updated to Angular 2.0 - the final Version of Angular 2!

Join the most comprehensive and popular Angular 2 course on Udemy, because now is the time to get started! 

From Setup to Deployment, this course covers it all! You'll learn all about Components, Directives, Services, Forms, Http Access, Authentication, Optimizing an Angular 2 App with Modules and Offline Compilation and much more - and in the end: You'll learn how to deploy an application!

But that's not all! This course will also show you how to use the Angular 2 CLI and feature a complete project, which allows you to practice the things learned throughout the course!

And if you do get stuck, you benefit from an extremely fast and friendly support - both via direct messaging or discussion. You have my word! ;-)

With Angular 2 being in release candidate phase and almost released, now is the time to jump in and take the advantage of being amongst the first to fully use the power and capabilities Angular 2 offers! Learn all the fundamentals you need to know to get started developing Angular 2 applications right away.

This course will be kept up-to-date to ensure you don't miss out on any changes once Angular 2 is finally released!

Hear what my students have to say

Absolutely fantastic tutorial series. I cannot thank you enough. The quality is first class and your presentational skills are second to none. Keep up this excellent work. You really rock! - Paul Whitehouse

The instructor, Max, is very enthusiastic and engaging. He does a great job of explaining what he's doing and why rather than having students just mimic his coding. Max was also very responsive to questions. I would recommend this course and any others that he offers. Thanks, Max!

As a person new to both JavaScript and Angular 2 I found this course extremely helpful because Max does a great job of explaining all the important concepts behind the code. Max has a great teaching ability to focus on what his audience needs to understand.

This Course uses TypeScript

TypeScript is the main language used by the official Angular 2 team and the language you'll mostly see in Angular 2 tutorials. It's a superset to JavaScript and makes writing Angular 2 apps really easy. Using it ensures, that you will have the best possible preparation for creating Angular 2 apps. Check out the free videos for more information.

TypeScript knowledge is, however, not required - basic JavaScript knowledge is enough.

Why Angular 2?

Angular 2 is the next big deal. Being the successor of the overwhelmingly successful Angular.js framework it’s bound to shape the future of frontend development in a similar way. The powerful features and capabilities of Angular 2 allow you to create complex, customizable, modern, responsive and user friendly web applications.

Angular 2 is faster than Angular 1 and offers a much more flexible and modular development approach. After taking this course you’ll be able to fully take advantage of all those features and start developing awesome applications immediately.

Due to the drastic differences between Angular 1 and Angular 2 you don’t need to know anything about Angular.js to be able to benefit from this course and build your futures projects with Angular 2.

Get a very deep understanding of how to create Angular 2 applications

This course will teach you all the fundamentals about modules, directives, components, databinding, routing, HTTP access and much more! We will take a lot of deep dives and each section is backed up with a real project. All examples showcase the features Angular 2 offers and how to apply them correctly.

Specifically you will learn:

    • Which architecture Angular 2 uses
    • How to use TypeScript to write Angular 2 applications
    • All about directives and components, including the creation of custom directives/ components
    • How databinding works
    • All about routing and handling navigation
    • What Pipes are and how to use them
    • How to access the Web (e.g. RESTful servers)
    • What dependency injection is and how to use it
    • How to use Modules in Angular 2
    • How to optimize your (bigger) Angular 2 Application
    • We will build a major project in this course
    • and much more!

Pay once, benefit a lifetime!

This is an evolving course! Angular 2 currently is in beta and this course will therefore be expanded and reflect futures currently not fully implemented or documented. You won’t lose out on anything!

Don’t lose any time, gain an edge and start developing now!

What are the requirements?

  • Basic HTML and CSS knowledge helps, but isn't a must-have
  • Prior JavaScript and TypeScript knowledge also helps but isn't necessary to benefit from this course

What am I going to get from this course?

  • Develop modern, complex, responsive and scalable web applications with Angular.js 2
  • Fully understand the architecture behind an Angular 2 application and how to use it
  • Use their gained, deep understanding of the Angular 2 fundamentals to quickly establish themselves as frontend developers
  • Create single-page applications with on of the most modern JavaScript frameworks out there

What is the target audience?

  • Newcomer as well as experienced frontend developers interested in learning a modern JavaScript framework
  • This course is for everyone interested in learning a state-of-the-art frontend JavaScript framework
  • Taking this course will enable you to be amongst the first to gain a very solid understanding of Angular 2

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: Getting Started
01:49

Let me introduce myself as well as this course.

05:23

The most important question first: What is Angular 2? This lecture will give you an overview what Angular 2 actually is, why you would use it and what its advantages are.

03:50

Enough theory for now, let's create an Angular 2 app!

Article

Don't want to use the CLI or got problems with it? Try this project.

04:05

It's nice to have an automatically-created application, but it would be nicer if we could also change something in the code. Well, let's do that then.

04:07

What did the CLI actually create there? This lecture explores our project structure.

05:05

This course uses TypeScript. Why? What are its advantages? Learn more in this lecture!

Article

Never saw TypeScript before? Let me guide you through the code you saw thus far.

Section 2: Components, Templates & Databinding
06:29

Let's explore what Components actually are and how they work.

05:10

How does an Angular 2 app actually get loaded/ started? Let's find out in this video!

03:00

What are AppModules? What does the AppModule do? Let's learn more, in this lecture.

03:04

We got some options when it comes to using Templates and Styles. Let's see which options that are.

00:58

That was a lot - time for a first summary about Components and how the App starts!

05:03

One Component is okay, but two is certainly better. Time to learn how to add a new Component to the Party!

01:21

Why do I name the Selectors the way I do name them? Because they should be unique! Why? Have a look at this lecture!

03:10

Let's add another Component and see how all our components can work together.

04:37

This is a must watch! There are some slight changes since I recorded the videos. It's not hard to adjust - but you need to watch this video to learn what you need to do!

04:46

Remember the lecture about Styling? I mentioned that Styles are only applied to the Component for which the Styles are defined. How does Angular 2 do this? It's View Encapsulation what you're seeing here! What's that? Learn more in this video.

04:07

Components can not only display static content. Indeed they have many ways to render dynamic content. This lecture teaches one way how to display content passed to a Component.

05:12

Components, Components, Components... Cool to see all that in Action, but you certainly want to make them a bit more dynamic and flexible, right? Databinding to the rescue! Databinding allows you to let your Template/ View with your Code/ Component Body as well as with other parts of your App.

03:25

Databinding #1: String Interpolation. String Interpolation allows you to output text content in your template. You'll use that very often. Learn how it works here.

02:52

Databinding #2 & #3: Property Binding & Event Binding. Property Binding & Event Binding allow you to pass data/ fetch data to/ from HTML Elements (DOM Properties & Events) as well as Directives and Components. Learn more about it in this lecture.

07:22

Property Binding allows you to pass data INTO something (DOM Properties => HTML Elements, Directives, Components). That's something you'll often use, learn how to implement it in this lecture.

04:09

Let's set up our own Property Binding on our own Component!

02:31

Event Binding kind of is the opposite of Property Binding. It's all about getting Data OUT of something (DOM Events, Directives & Components). Learn more in this lecture.

03:56

Time to create our own Event Binding with our own, custom Event.

02:59

There are things to add about Property & Event Binding. This lecture covers those extra information pieces.

ngModel and AppModules
Article
03:49

Databinding #4: Two-Way Databinding made Angular 1 popular. Angular 2 doesn't use it by default. WHAT??? No problem as you'll learn in this lecture. And you can still use it. Learn that, too, in this lecture.

12:08

Components have a Lifecycle which Angular 2 runs through. Learn more about it in this lecture.

04:56

Lifecycle theory is great, seeing it in action is even better though. This lecture takes care about this!

07:57

How can you work with your HTML Elements in your templates? This lecture explains which easy & quick possibilities of referencing and accessing them Angular 2 offers you.

Section 3: Course Project - Components & Databinding
04:57

Let's start working on our course project in this lecture!

01:54

Definitely watch this lecture to learn more about required changes.

05:13

Let's create the first Component (besides the Root Component) => The Header.

03:07

Only seeing a Header isn't that awesome. Let's add another Component to the Party!

10:57

The App is taking Shape, but now we're making a big jump and add a couple of other important parts to it!

06:57

Time to make everything a bit less static and use Databinding to work with Data in our App.

05:16

To finish the first part of the Course Project, we'll add another Component to it.

Section 4: Directives
04:35

Components are important. But Angular 2 is not only about Components. And Components are Directives, remember that? What are Directives then? And are there Directives which aren't Components (Answer: Yes!). Learn more about it in this lecture.

04:45

Example Time! See some built-in Attribute Directives in Action to understand how they work and what they do!

10:43

Built-in Directives are cool, custom Directives are awesome! Learn how to build your own Attribute Directive here. This also shows you how Directives work under the hood.

05:25

How do Directives interact with the HTML Elements to which they are applied? Learn it in this lecture!

Article

You may also pass the Event Object when using HostListeners. This Article explains how to do this.

04:59

Directives may use Property Binding as well. Learn how to set it up and use it in this lecture.

02:48

Structural Directive Time! Learn how to use the built-in ngIf Directive.

03:07

Structural Directive Time! Learn how to use the built-in ngFor Directive.

02:01

Structural Directive Time! Learn how to use the built-in ngSwitch Directive.

04:30

What does the "*" mean in front of all those Structural Directives? This lecture explains what Angular 2 does behind the scenes.

08:28

Can we build our own Structural Directives? Yes! This lectures explains how to do that and what happens under the hood.

Using NgModules
00:32
Section 5: Course Project - Directives
05:09

Let's practice all that Directive stuff in our course project. First, we'll use ngFor to output the ingredients of our recipes.

06:28

I think a Custom Directive would also fit in great! Let's build a Dropdown Directive.

Section 6: Debugging an Angular 2 Application
00:25

A brief introduction to this module

02:55

The Chrome Developer Tools offer great Debugging support. This lecture shows how to use the Chrome Debugger with TypeScript code.

If you don't find the TypeScript Sourcemaps
Article
02:51

Augury is a Chrome Extension which helps you with Debugging Angular 2 Applications. Let's have a look at it in this video.

Section 7: Services & Dependency Injection
03:15

Components & Directives are important. But until now it's sometimes difficult to connect everything. Also, you might have duplicate code. If only there was a place to centralize certain tasks...

Oh...there is! Learn what Services are and how they work!

02:25

Time to see Services in Action, let's build a little Logging Service.

04:43

We have Service. How do we use it? We need to inject into the places where we want to use it. What's Dependency Injection? This lecture helps you!

04:08

Let's inject our Logging Service from one of the last lectures.

07:00

Dependency Injection is really powerful. Learn how you may use it to control the instance it creates for you.

01:38

Learn how to set up Application-wide service instances with AppModules.

04:14

Sometimes you also need a Service inside a Service. That's of course possible, too. Learn how to inject a Service into a Service here.

05:59

Services may also be used to let Components communicate efficiently with each other. Learn more about that in this lecture.

Section 8: Course Project - Services & Dependency Injection
04:13

Project Time again! Time to add some Services to it. A Service to manage our Recipes for example.

06:35

Or let's also add a Service for our Shopping List.

03:32

As explained in the Service Module, Services are also great for Cross-Component Communication. Let's take advantage of that here!

02:14

There are some things which can be cleaned up/ improved in our project. Or some missing parts. This lecture takes care about these things.

Section 9: Routing
01:18

What is the Angular 2 Router, what does it do and why do we need it? This lecture should help you with these questions.

READ FIRST: Angular 2 Router Version & Changes
Article
06:31

This module explains how to create Routes in an Angular 2 application.

01:22

Time to load our components - otherwise our Routes don't do that much, do they?

Navigation with Links
03:31
04:34

There are a couple of options when it comes to creating Navigation Paths. Learn more about them, in this lecture.

02:36

Sometimes you don't want a clickable link, but instead trigger a Navigation Action in your Code. Learn more about your possibilities regarding this, in this lecture.

03:50

A lot of routes also pass some data to the target component. This lecture explores how to setup Route Parameters.

09:45

Passing Parameters is nice, but you also want to extract them, right? Learn more about your possibilities, in this lecture.

02:35

Sometimes you only optionally pass some data. That is typically done through Query Parameters. You may learn more about them and how to use them in your routing, in this lecture.

Article

With the latest Router version (rc1), the way you access QueryParams changed. Though the old approach still works for now. Check out this article to learn more.

05:07

Passing them is nice - but how to use them? This lecture explores this question.

02:13

You learned how to pass Query Parameters using Imperative Navigation. But how do you do it using Links (routerLink)? This lecture should help you.

04:14

Fragments are another (possible) part of your URL. This lecture shows you how to pass Fragments and also how you can ensure your active Query Params and Fragments to persist upon a URL change.

Article

You want to use a Fragment in your Code? This article quickly explains how to extract it.

05:44

We got Routing. That's great! But sometimes you want to use some nested Routes. This lecture shows you how to do that.

05:01

You may also redirect certain requests to other routes. Learn more about it, in this lecture.

05:17

Showing the user where he currently is in your application is very important. Therefore, Angular 2 helps you with that by allowing you to place your own CSS classes on currently active Route Links.

00:24

There's one adjustment you need to make, to use Guards with AppModules. Let's see which one that is.

08:13

Guards help you to control Route Access. This lecture teaches you how to control who's allowed to access a Route / Component, using the CanActivate Guard.

10:57

Guards help you to control Route Access. This lecture teaches you how to control who's allowed to leave a Route / Component, using the CanDeactivate Guard.

Article

Learn more about available Location Strategies

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Maximilian Schwarzmüller, Professional Web Developer and Instructor

Experience as Web Developer

Starting out at the age of 13 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.

Besides web development languages like HTML, PHP, CSS etc. I also got into mobile app development and were able to launch apps as well.

As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.

Experience as Instructor

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving known languages. This background and experience enables me to focus on the most relevant key concepts and topics.

Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding thing is, though, seeing what people you helped or advised are able to pull off and how you improve as a developer yourself.

Ready to start learning?
Take This Course