Angular 2 with TypeScript for Beginners: The Pragmatic Guide

Learn to build real-world apps with Angular2 with confidence
4.5 (4,198 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.
14,317 students enrolled
$19
$150
87% off
Take This Course
  • Lectures 184
  • Length 9 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 3/2016 English

Course Description

UPDATE (8 Nov 2016): Course is updated to Angular 2 final release. 


Angular 2 is the next big thing. It's one of the leading frameworks for building modern, scalable, cross-platform apps. If you want to establish yourself as a front-end or a full-stack developer, you need to learn Angular 2.


In Angular 2 with TypeScript, Mosh, author of six 5-star Udemy courses, takes you on a fun, hands-on and pragmatic journey to master Angular 2.

More specifically, you'll learn how to:

  • Build re-usable components
  • Control rendering of HTML
  • Format data using pipes
  • Implement custom pipes
  • Build forms with custom validation
  • Use Reactive Extensions and Observables to handle asynchrony
  • Consume back-end services and APIs
  • Build single page apps (SPA)
  • Use dependency injection to write loosely-coupled, testable code
  • Resolve common Angular 2 errors
  • Write cleaner, more maintainable code
  • And much more...

If you've taken any of Mosh's courses before, you know what you get. He is very passionate, clear and concise in his teaching. Every section and every lecture has been perfectly thought through to lead you on a step-by-step journey from zero to hero with no fluff whatsoever. If you're looking for 10+ hours of wasted time on the content you don't need and a rambling instructor, there are other courses you can enrol in.


You'll start building Angular 2 apps within minutes. Every section includes a few bite-sized videos, and concludes with a coding exercise to help you master what you learn in that section. The last two sections are purely coding exercises.


At the end of this course, you'll build an application that exhibits many features you find in a lot of real-world applications, including but not limited to:

  • CRUD operations against a backend API
  • Form with custom validation
  • Dirty tracking
  • Master / detail views
  • Loading content dynamically
  • Showing spinner icons while content is loading
  • Filtering
  • Paging
  • More...

 

Reviewed by Todd Motto (Google Developer Expert):

Mosh has a fantastic teaching style, and just delivered the best online course I've seen in a long time. Mosh's approach to teaching and guiding makes no assumptions on existing Angular 1.x knowledge, but helps those who have to clarify new concepts. Mosh guides you through critical concepts slowly without skipping over details, and the course is extremely worth investing a few hours in, your understanding of Angular 2 will reach new levels. He fills all the gaps, presents impeccably well and the preparation was top notch, seriously can't recommend the course enough.


What others who have taken this course say:

"Great course, even for seasoned developers. I'm a ReactJs developer using this to broaden my horizons!" -Tyler Markvluwer

"Mosh is a great instructor, he is very clear and concise and breaks down his examples into small "components" (drum roll please). Having never used Angular before, I'm really impressed at how easy it was to understand the concepts and even managed most of the examples without having to refer back to the lectures and that is in no small part due to Mosh's understanding of Angular and how well he explains everything. If you can't already tell, I'm really impressed Mosh" -Chris Graham

"It's the best angular2 video that i ever seen. It's all well explained and easy to understand. It's not need have angular1 knowledge. I'm happy because i've grown as a developer. Thanks" -Miguelangel Cabrera

"Very good step by step explainations. Focus on "why", then "how" instead of "type after me". Love it!" -Krysztof Gurniak

"As the absolute Angular newbie I was, I can recommend this course 100%." -Guillermo Aguyanes

"Mosh does a great job at explaining templates, directives, dependency injections and everything else. 10/10 would take his course again." -Rob


So, if you're looking for an Angular 2 course with

  • A passionate coder and instructor who knows his craft
  • Perfect structure
  • Balanced mix of theory and practice
  • Clear, concise and bite-sized videos
  • Lots of real-world examples and coding exercises
  • World-class audio / video production

Don't look further. Enrol in the course now and learn to build real-world apps with Angular 2 with confidence.


FREQUENTLY ASKED QUESTIONS

1- Do I need to know Angular 1 before taking this course?

No! Angular 2 is an entirely new framework and this course assumes no prior knowledge of Angular.


2- Angular 2 is currently in beta. Will this course be updated to final version?

Certainly, This course will be updated continuously until final version of Angular 2. You'll find updates from beta to final release in the last section of the course.


3- Why is the course with TypeScript? Why not Javascript?

TypeScript is a superset of Javascript, meaning any valid Javascript code is valid TypeScript. If you can write Javascript code, you can write TypeScript code! So you don't have to learn a new programming language. TypeScript brings many useful features to Javascript that are missing in the current version of Javascript. We get classes, modules, interfaces, properties, constructors, access modifiers (e.g. public/private), IntelliSense and compile-time checking. So, we can catch many programming errors at compile-time.

Angular 2 is written in TypeScript. Plus, most of their documentation is in TypeScript. And for that reason, TypeScript will be the dominant language in building Angular 2 apps.

If you've never programmed in TypeScript, don't be afraid. It's very easy to pick up, and you're going to absolutely love it.


4- Why should I pay for this course when there are lots of free tutorials available?

Free tutorials and YouTube videos are free for a reason. They introduce you to a few concepts here and there, but soon you'll find yourself jumping from one tutorial to another to fill the missing gaps. By taking a perfectly-structured course, you'll be confident that you're in good hands, right from the beginning all the way through to the very end. You pay for saving your precious time: the time that you can spend on the things you love.


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 feel like you haven't gained the confidence to build real-world apps with Angular 2, ask for a full refund within 30 days. All your money back, no questions asked.


ABOUT YOUR INSTRUCTOR

Mosh (Moshfegh) Hamedani is a software engineer with 15 years of professional experience, mainly in building web-based applications. He is the author of six 5-star Udemy courses with more than 13,000 students. He is passionate, pragmatic and motivational in his teaching.


DO YOU WANT TO BUILD APPS WITH ANGULAR 2 WITH CONFIDENCE?

If you enrol in the course now, you'll start building your Angular 2 apps in only a few minutes. Enrol in the course now and get started.


What are the requirements?

  • Minimum 3 months experience developing web applications (familiarity with HTML, CSS, Javascript, APIs)
  • Basic familiarity with the concept of object-oriented languages (eg. classes, properties, methods, constructors) is required
  • Familiarity with Bootstrap is a bonus

What am I going to get from this course?

  • Establish yourself as a front-end developer who can build real-world apps with Angular 2
  • Master the core Angular 2 concepts and how to use them in building real-world apps
  • Understand what single page applications (SPA) are and how to build them
  • Understand and resolve common Angular 2 errors
  • Learn ways to write cleaner, more maintainable code
  • Build re-usable components
  • Build forms with custom validation
  • Use Reactive Extensions and Observables to handle asynchrony
  • Connect to backend services and APIs
  • Understand what dependency injection is and use it to build loosely-coupled, testable apps
  • Huge discount on my other courses

What is the target audience?

  • Web developers wanting to build apps with 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 with Angular 2
03:30

A 3-minute introduction to the course, covering:

  • What is Angular?
  • Why you can do with it?
  • There are many other frameworks out there, why Angular?
  • What you're going to learn in this course
04:53

Angular 2 embraces component-based architecture. In this video, we'll explore the core building blocks of Angular 2 apps and their responsibilities.

How to Take this Course
Preview
03:41
01:38

This video shows you the tools you need to start coding Angular 2 apps.

04:36

I've created a sample seed project based on the guidelines on the Angular website. In this video, we'll set up our web server and run our first Angular 2 app.

03:13

Browsers don't understand TypeScript. So, we need to compile, or more accurately transpile our TypeScript code into Javascript. This video shows you how.

Angular Basics Quiz
4 questions
01:27

A quick overview of how this course is structured and what is and is not included.

Asking Questions
02:58
Section 2: Angular 2 Jumpstart
00:30

A quick introduction of what you're going to learn in this section.

Breaking Changes
Article
04:23

In this video, you'll learn how to create an Angular 2 component.

05:25

This video shows you the steps you need to take in order to use a component.

04:30

In this video, we'll have a brief look at templates. You'll learn how to bind a template to properties of your component.

02:32

To have better separation of concerns and build more maintainable applications, our components should delegate any non-UI logic to a service. In this video, you'll learn how to create a service.

05:46

In this video, I'll explain whats, whys and hows about dependency injection.

What's New in Final Release
Preview
00:41
Article

A cheat of sheet of the materials in this section.

Modules
Preview
05:16
00:57

As part of this exercise, you'll create a component and a service from scratch. You'll also use dependency injection to inject your new service into your component.

Working with Modules
Preview
07:15
02:22

A quick review of my solution.

08:02

We use directives to work with the DOM. In this video, you'll learn how to create a custom directive that makes a textbox automatically grow in size when receiving focus.

00:26

A summary of what you've learned in this section and what is coming next.

Section 3: Displaying Data and Handling Events
00:22

A quick introduction of what you're going to learn in this section.

03:25

We can bind properties of DOM elements to our component properties. When the value of a component property changes, the DOM element is automatically updated. In this video, you'll learn two ways to use property binding in Angular 2.

01:48

This video shows you how to dynamically add CSS classes to DOM elements.

01:10

In this video, you'll learn how to dynamically apply CSS styles to DOM elements.

06:12

We can handle events raised from our DOM elements in our components. This video shows you two ways to bind event raised from elements to methods in components.

05:23

We use two-way binding in forms to keep input fields in sync with component properties. With two-way binding, whether the data changes in the component, or in the view, both the view and the component will be in sync.

Article

Here is the cheat sheet for all the stuff you learned in this section.

01:35

Build a favorite component, like what you see on StackOverflow.

01:39

In this video, I walk you through my solution to the coding exercise.

00:25

A quick recap of what you learned in this section and what is coming next.

Section 4: Building Re-usable Components
00:21

A quick introduction of what you're going to learn in this section.

01:42

What makes up a component's public API? Its input and output properties. In this video, we'll explore components API with a real-world example.

04:27

In this vide, you'll learn how to create input properties using @Input annotation and component metadata.

04:31

In this video, you'll learn how to create output properties using @Output annotation and component metadata.

02:55

This video shows you how to create external templates.

03:31

In this video, I'll show you how you can define "scoped" styles for your components that don't leak outside the component's template. You'll learn how to use both inline and external stylesheets.

Article

Cheat sheet for Angular components.

01:15

As part of this exercise, you'll implement a like button like what you see on Twitter.

02:35

Review of my implementation of Twitter like button.

03:25

As part of this exercise, you'll implement a vote component like the one used on StackOverflow.

04:10

Review of my implementation of StackOverflow's voting component.

02:17

Are you up for a challenge? Use what you've learned so far and build a simple Twitter page with the list of tweets. Re-use the LikeComponent you created earlier.

00:34

A quick recap of what you learned in this section and what is coming next.

Section 5: Controlling Rendering of HTML
00:19

A quick introduction of what you're going to learn in this section.

Breaking Changes
Article
04:30

In this video, you'll learn how to use the *ngIf directive to dynamically add / remove DOM elements.

07:04

ngSwitch is another directive we use for adding a DOM element sub-tree. It's often useful in building tabbed views. This video teaches you how to use ngSwitch and other related directives: ngSwitchWhen and ngSwitchDefault.

02:13

In this video, we'll take another look at ngFor for rendering a list of items. You'll learn learn how to render an index next to each item.

02:22

A few structural directives like *ngIf and *ngFor include a leading asterisk. In this video, I'll explain why this asterisk is required and what happens under the hood.

05:39

We use pipes to format data (strings, numbers, currency, date, etc). In this video, I'll introduce you to various built-in pipes in Angular.

04:36

At times you may need to format data in a specific way that is not supported by any of the built-in pipes. This video shows you how to create a custom pipe and re-use it in your applications.

02:23

In this video, you'll learn how to use ngClass to add multiple classes to a DOM element dynamically.

01:58

In this video, you'll learn how to use ngStyle to add multiple styles to a DOM element dynamically.

03:15

Elvis operator makes it easy to work with nullable properties in binding expressions. In this video, you'll learn how to write cleaner code using Elvis Operator when dealing with nullable properties.

05:45

This video teaches how you to inject content into a component's template from the outside.

Article

Cheat sheet for this section.

01:51

As part of this exercise, you'll implement a re-usable zippy or accordion component.

03:32

Review of my solution to the zippy component.

00:36

A quick recap of what you've learned in this section and what is coming next.

Section 6: Building Forms with Basic Validation
00:34

A quick introduction of what you're going to learn in this section.

Breaking Changes
Article
07:00

In this video, we'll build a simple Bootstrap form and that we'll use throughout this section.

03:18

Control and ControlGroup classes are the basis of building forms in Angular. This video gives you an overview of these classes.

06:13

In this video, you'll learn how to bind an input field to a control object using ngControl directive.

07:00

Here, we'll extend our form and add basic validation. You'll learn how to show validation errors and highlight the input fields with errors.

06:05

Sometimes an input field can have multiple validation rules. In this video, you'll learn how to add multiple validation rules to an input field and display specific validation messages for each error.

05:17

Another directive that goes hand in hand with ngControl is ngForm. In this video, you'll learn what ngForm is and how to submit a form using ngSubmit.

01:27

This video show you how to disable the submit button in a form if the form is not valid.

Article

Cheat sheet of template-driven forms.

01:10

As part of this exercise, you'll build a subscription form and add client-side validation to it.

00:41

A quick recap of the section and what is coming next.

Section 7: Building Forms with Complex Validation
00:20

A quick introduction of what you're going to learn in this section.

Breaking Changes
Article
00:47

You already learned how to create a basic Bootstrap form. So, to save your time, I've attached some boilerplate code that we're going to use in this section.

08:43

In this video, you'll learn how to create Control and ControlGroup objects explicitly and how to bind your form with this ControlGroup using ngFormModel directive.

02:29

There is a simpler way to create Control and ControlGroup objects, and that is by using FormBuilder class. This video teaches you how to do that.

06:58

When you create Control objects explicitly, you have full control over validation logic. In this video, I'll teach you how to create a custom validator and add it to an input field.

08:37

Sometimes we need to contact the server to get the validation result. For example, when checking for the uniqueness of a username. That's when we use an asynchronous validator, that returns a Promise. In this video, I'll show you how to create an async validator.

01:48

With async validators, often there is a small delay until we get the validation result. In this video, I show you how to add a loader image next to an input field until we get the validation result.

03:09

Sometimes we need to validate a form upon submit. An example of this is a login form. We can't validate a username or password individually. In this video, you'll learn how to validate the form upon submit and add errors to the form.

Article

Cheat sheet of model-driven forms.

02:51

As part of this exercise, you'll implement a change password form with custom validators.

00:54

A quick recap of this section and what is coming next.

Section 8: Introduction to Reactive Extensions
00:33

A quick introduction of what you're going to learn in this section.

01:48

A quick introduction to Reactive Extensions library, how Angular uses that and why you need to become familiar with it.

05:51

One of the problems that Reactive Extensions and Observables are designed to solve is the callback hell. In this video, you'll see an example of callback hell in a real-world scenario.

02:47

Here is a quick introduction to observables and various ways we can create them.

02:43

In this video, I'll show you how to create an observable from a DOM event.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Mosh Hamedani, Passionate Software Engineer and Best-selling Author

Moshfegh Hamedani is a passionate and creative software engineer with a strong focus on pragmatism and simplicity. He started programming at the age of seven on a Commodore 64. Later, during his high school years, he started learning C and C++ . In 2002, along with the first release of .NET, he shifted his focus to C#. Since then he has been involved in the design and implementation of numerous software projects, including modern web applications, mobile apps, desktop applications and frameworks.

Aside from his career as a software engineer, he truly enjoys sharing his knowledge with others. Since his early twenties, he has been teaching courses and running workshops on C#, ASP. NET, object-oriented programming and clean coding. He is author of 6 best-selling courses on Udemy and more will be coming soon.

Mosh has a Master of Science in Network Systems and a Bachelor of Science in Software Engineering. He is also a Microsoft Certified Application Developer, Technology Specialist (Web Applications) and Professional.

Outside the software world, Mosh is a photographer, a pianist and a passionate Latin dancer.

Ready to start learning?
Take This Course