Angular 2 with TypeScript for Beginners: The Pragmatic Guide
4.5 (7,018 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.
32,034 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 with TypeScript for Beginners: The Pragmatic Guide to your Wishlist.

Add to Wishlist

Angular 2 with TypeScript for Beginners: The Pragmatic Guide

Establish yourself as a front-end developer who can build apps with Angular2 (next generation of AngularJS)
Bestselling
4.5 (7,018 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.
32,034 students enrolled
Created by Mosh Hamedani
Last updated 4/2017
English
Current price: $15 Original price: $150 Discount: 90% off
30-Day Money-Back Guarantee
Includes:
  • 9.5 hours on-demand video
  • 22 Articles
  • 58 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Establish yourself as a front-end developer and get the job you want
  • Master the core Angular concepts
  • Build real-world single page applications (SPA) with Angular
  • Build re-usable components
  • Format data using pipes
  • Implement custom pipes
  • Render tabular lists with filtering, sorting and pagination
  • Build forms
  • Use Reactive Extensions and observables to handle asynchrony
  • Consume RESTful services
  • Implement CRUD operations
  • Implement navigation
  • Use dependency injection to build loosely-coupled, testable apps
  • Troubleshoot common runtime errors
  • Write cleaner, more maintainable code
View Curriculum
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
Description


UPDATE (22 APR 2017): Your instructor is currently working on a new edition of this course that includes a complete re-recording of the videos and additional content with the latest version of Angular. By enrolling now, you'll get all the updates for FREE. 


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 several best-selling Udemy courses, takes you on a fun, hands-on and pragmatic journey to master Angular 2.

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

  • Establish yourself as a front-end developer and get the job you want 
  • Build real-world single page applications (SPA) with Angular 
  • Build re-usable components
  • Render tabular lists with filtering, sorting and pagination
  • Build forms with client-side validation 
  • Format data using pipes
  • Implement custom pipes
  • Use Reactive Extensions and observables to handle asynchrony
  • Consume RESTful APIs
  • Implement CRUD operations
  • Implement navigation
  • Use dependency injection to write loosely-coupled, testable code
  • Troubleshoot common runtime errors
  • Write cleaner, more maintainable code
  • And much more...



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. 


All the examples and exercised are picked from real websites that you use on a daily basis, like Twitter, Facebook, StackOverflow, etc. 


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

 

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


Every single minute of the course is worth watching. No rambling, no mocking around. If you're looking for 15+ hours of wasted time on the content you don't need and a rambling instructor, there are other courses you can enrol in.


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.x (AngularJS) before taking this course?

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


2- Will this course be updated? 

Absolutely! Currently, Mosh is working on a complete re-recording of all the videos with the latest version of Angular. By enrolling in the course now, you'll get all the updated content for free. 


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 several best selling Udemy courses with more than 68,000 students in 182 countries. His students describe him as 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.


Who is the target audience?
  • Web developers wanting to build apps with Angular 2
Curriculum For This Course
Expand All 194 Lectures Collapse All 194 Lectures 09:35:03
+
Getting Started with Angular 2
8 Lectures 25:56

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
Preview 03:30

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

Preview 04:53


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

Preview 01:38

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.

Preview 04:36

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

Preview 03:13

Angular Basics Quiz
4 questions

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

Course Layout
01:27

Asking Questions
02:58
+
Angular 2 Jumpstart
15 Lectures 48:06

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

Introduction
00:30

Breaking Changes
00:00

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

Preview 04:23

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

Preview 05:25

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

Preview 04:30

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.

Preview 02:32

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

Preview 05:46


A cheat of sheet of the materials in this section.

Cheat Sheet
00:01


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.

Exercise
00:57


A quick review of my solution.

Code Review
02:22

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.

Directives
08:02

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

Summary
00:26
+
Displaying Data and Handling Events
10 Lectures 22:00

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

Introduction
00:22

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.

Property Binding
03:25

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

Class Binding
01:48

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

Style Binding
01:10

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.

Event Binding
06:12

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.

Two-way Binding
05:23

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

Cheat Sheet
00:01

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

Exercise: Building a Favorite Component
01:35

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

Code Review
01:39

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

Summary
00:25
+
Building Re-usable Components
13 Lectures 31:44

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

Introduction
00:21

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.

Component API
01:42

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

Input Properties
04:27

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

Output Properties
04:31

This video shows you how to create external templates.

Templates
02:55

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.

Styles
03:31

Cheat sheet for Angular components.

Cheat Sheet
00:01

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

Exercise: Building a Like Component
01:15

Review of my implementation of Twitter like button.

Code Review
02:35

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

Exercise: Building a Voter Component
03:25

Review of my implementation of StackOverflow's voting component.

Code Review
04:10

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.

Challenge
02:17

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

Summary
00:34
+
Controlling Rendering of HTML
16 Lectures 46:05

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

Introduction
00:19

Breaking Changes
00:00

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

ngIf
04:30

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.

ngSwitch
07:04

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.

ngFor
02:13

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.

The Leading Asterisk
02:22

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.

Pipes
05:39

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.

Creating Custom Pipes
04:36

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

ngClass
02:23

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

ngStyle
01:58

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.

Elvis Operator
03:15

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

ng-content Element
05:45

Cheat sheet for this section.

Cheat Sheet
00:01

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

Exercise: Building a Zippy / Accordion
01:51

Review of my solution to the zippy component.

Code Review
03:32

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

Summary
00:36
+
Building Forms with Basic Validation
12 Lectures 38:46

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

Introduction
00:34

Breaking Changes
00:00

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

Building a Basic Form
07:00

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

Control and ControlGroup
03:18

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

ngControl
06:13

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.

Showing Validation Errors
07:00

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.

Showing Specific Validation Errors
06:05

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.

ngForm
05:17

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

Disabling Submit Button
01:27

Cheat sheet of template-driven forms.

Cheat Sheet
00:00

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

Exercise: Building a Subscription Form
01:10

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

Summary
00:41
+
Building Forms with Complex Validation
12 Lectures 36:37

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

Introduction
00:20

Breaking Changes
00:00

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.

Building a Basic Form
00:47

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.

Creating Controls Explicitly
08:43

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.

Using FormBuilder
02:29

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.

Implementing Custom Validation
06:58

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.

Async Validators
08:37

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.

Showing a Loader Image
01:48

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.

Validating Upon Form Submit
03:09

Cheat sheet of model-driven forms.

Cheat Sheet
00:00

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

Exercise: Building a Change Password Form
02:51

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

Summary
00:54
+
Introduction to Reactive Extensions
11 Lectures 28:45

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

Introduction
00:33

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

What is Reactive Extensions?
01:48

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.

Callback Hell
05:51

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

Observables
02:47

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

Creating Observables
02:43

Once we have an observable, we can chain multiple operators to it. This video shows you various useful observable operators: map, filter, debounceTime and distinctUntilChanged.

Using Observable Operators
04:19

We can chain an observable stream to another stream. In this video, I'll show you a very powerful technique to chain multiple observables and transform them.

Transforming Observables
05:37

Unlike promises, observables can be cancelled. This video shows you how easy it is to cancel an observable.

Cancelling Subscriptions
00:52

If you're building performance-critical applications that should run smoothly on mobile devices, you should use the stripped down observable created by Angular team and import the operators manually. This video shows you how.

Importing Operators
02:26

A bunch of exercises to take your understanding of observables and their real-world use cases to the next level.

Exercises
00:53

Reactive Extensions Quiz
8 questions

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

Summary
00:56
+
Connecting to the Server
15 Lectures 37:35

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

Introduction
00:14

Breaking Changes
00:00

In this video, I'll introduce you to a simple RESTful API we will be using throughout this section.

A Simple RESTful API
01:32

In this video, you'll learn how to get data from the server using Http class. You'll see observables in action.

Getting Data from the Server
06:30

We extend our little app and use another method of Http class for posting data to the server.

Sending Data to the Server
01:48

In this video, you'll learn about @Injectable annotation and providers property of component metadata.

Dependency Injection
05:11

Components have lifecycle hooks that we can tap into. By implementing certain interfaces on our components, we can get the opportunity to be notified during various stages of a component's lifecycle.

Component's Lifecycle Hooks
02:56

This lecture is more about TypeScript and how we can achieve static type checking and intellisense by using type annotations.

Static Type Checking
05:42

When waiting for the results from the server, it's good to display a loader icon to the user. This video teaches you how to do so.

Showing a Loader Icon
03:39

Both Http and Jsonp classes in Angular 2 are implemented around observables. So, all their methods return an observable. If you still prefer to work with promises, you can convert an observable to a promise. In this video, you'll learn how.

Using Promises
01:29

In this video, you'll learn how to use Jsonp class to access cross-domain resources.

Accessing Cross-Domain Resources
02:38

Cheat sheet for connecting to the server.

Cheat Sheet
00:01

As part of this exercise, you'll build a simple GitHub user's page. You'll send parallel requests to get the user's profile and followers from GitHub.

Exercise: Building a GitHub User Profile Page
00:47

Review of my solution.

Code Review
04:39

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

Summary
00:29
+
Building Single Page Apps
14 Lectures 34:25

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

Introduction
00:18

Breaking Changes
00:26

The seed project we're going to use throughout this section.

Seed Project
00:47

Unless you want to build a single page application (SPA), you don't need routing. That's why routing is a separate module in Angular 2 and you need to enable it first.

Enabling Routing
03:09

In this lecture, you'll learn how to configure various routes with different patterns (e.g. including parameters, wildcards, etc).

Configuring Routes
05:10

As the user navigates in the application, the router activates a component and renders it in a router outlet. So, a router outlet is a placeholder for rendering content. This video shows you the steps to use router outlet.

Router Outlet
02:21

In single page apps, we don't use the HREF attribute of hyperlinks (<a>). This video explains the reason and shows you how to add links in your single page apps.

Adding Links
05:46

Sometimes we need to pass parameters in routes (e.g. the ID of a user to view). In this video, you'll learn how to pass parameters to a route, and how to extract them in the target component.

Route Parameters
04:45

We don't always navigate the users using hyperlinks. Sometimes, we redirect them as a result of submitting the form. This is called imperative navigation. In this video, you'll learn how to use the router object to navigate the user imperatively.

Imperative Navigation
01:44

If the user is filling out a form and accidentally clicks a link or the browser's back / forward buttons, they'll lose all the data in the form. Routers provide lifecycle hooks we can tap into. When the user is navigating away from a form, we can check to see if the form is dirty and confirm them if they would like to navigate away. This video shows you how to implement this.

Implementing Dirty Checking
05:44

As your application grows, you need a better way to organize it. This video introduces you to "feature areas", and how to create child routing components for each feature area.

Structuring Large Apps
01:45

Angular routers cheat sheet.

Cheat Sheet
00:01

As part of this exercise, you'll simulate the archiving feature of a blogging engine. You'll use various routing features to navigate the user to different archives.

Exercise: Archives in a Blog
01:42

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

Summary
00:47
7 More Sections
About the Instructor
Mosh Hamedani
4.6 Average rating
30,301 Reviews
89,221 Students
14 Courses
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.