Angular 2 with TypeScript for Beginners: The Pragmatic Guide

Angular 2 with TypeScript for Beginners: The Pragmatic Guide
Angular 2 with TypeScript for Beginners: The Pragmatic Guide
English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6.5 Hours | 757 MB

Learn to build real-world apps with Angular 2 with confidence

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 in the shortest possible time, without wasting even one minute of your precious time.

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…

And here is what other students 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.


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 in beta. Will this course be updated?

Certainly, This course will be updated continuously until final version of Angular 2.

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.

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?

  • Over 150 lectures and 6.5 hours of content!
  • 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
Table of Contents

Getting Started with Angular 2
What is Angular?
Architecture of Angular 2 Apps
Setting Up the Development Environment
Your First Angular 2 App
TypeScript Compilation
Course Layout

Angular 2 Jumpstart
Creating Components
Using Components
Dependency Injection
Cheat Sheet
Code Review

Displaying Data and Handling Events
Property Binding
Class Binding
Style Binding
Event Binding
Two-way Binding
Cheat Sheet
Exercise: Building a Favorite Component
Code Review

Building Re-usable Components
Component API
Input Properties
Output Properties
Cheat Sheet
Exercise: Building a Like Component
Code Review
Exercise: Building a Voter Component
Code Review

Controlling Rendering of HTML
The Leading Asterisk
Creating Custom Pipes
Elvis Operator
ng-content Element
Cheat Sheet
Exercise: Building a Zippy / Accordion
Code Review

Building Forms with Basic Validation
Building a Basic Form
Control and ControlGroup
Showing Validation Errors
Showing Specific Validation Errors
Disabling Submit Button
Cheat Sheet
Exercise: Building a Subscription Form

Building Forms with Complex Validation
Building a Basic Form
Creating Controls Explicitly
Using FormBuilder
Implementing Custom Validation
Async Validators
Showing a Loader Image
Validating Upon Form Submit
Cheat Sheet
Exercise: Building a Change Password Form

Introduction to Reactive Extensions
What is Reactive Extensions?
Callback Hell
Creating Observables
Using Observable Operators
Transforming Observables
Cancelling Subscriptions
Importing Operators
Reactive Extensions Quiz

Connecting to the Server
A Simple RESTful API
Getting Data from the Server
Sending Data to the Server
Dependency Injection
Component’s Lifecycle Hooks
Static Type Checking
Showing a Loader Icon
Using Promises
Accessing Cross-Domain Resources
Cheat Sheet
Exercise: Building a GitHub User Profile Page
Code Review

Building Single Page Apps
Seed Project
Enabling Routing
Configuring Routes
Router Outlet
Adding Links
Route Parameters
Imperative Navigation
Implementing Dirty Checking
Structuring Large Apps
Cheat Sheet
Exercise: Archives in a Blog

Project: Building a Real-world App (CRUD Operations)
Adding a Navbar
Code Review
Setting Up a Basic SPA
Code Review
Highlighting the Current Menu in Navbar
Displaying the List of Users
Building a Form
Implementing Validation
Implementing Dirty Tracking
Creating a User
Code Review
Populating the Form on Edit
Code Review and Refactoring
Updating a User
Deleting a User

Project: Building a Real-world App (More Challenges)
Displaying the List of Posts
Adding a Loader Icon
Extracting a Spinner Component
Implementing Master / Detail
Loading Related Objects
Reusing the Spinner Component
Cleaning the Code
Implementing Filtering
Implementing Pagination
Using External Libraries
Paging Data with Underscore
Restructuring the Application
Where to from Here
Additional Resources

Upgrading Angular 1 Apps
VSCode Snippets for Angular 2
Sublime Text Snippest for Angular 2