Angular 2 Crash Course with TypeScript
4.1 (608 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.
16,664 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 Crash Course with TypeScript to your Wishlist.

Add to Wishlist

Angular 2 Crash Course with TypeScript

Get in-depth knowledge of Angular 2 and TypeScript with this crash course for all skill levels.
4.1 (608 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.
16,664 students enrolled
Last updated 7/2017
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 4 hours on-demand video
  • 2 Articles
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Code an Angular2 Project with an Online IDE
  • Learn to code with TypeScript and use it's data typing features
  • Understand and use Angular2's Component paradigm
  • Use Angular2's powerful data binding features
  • Use Angular2's improved Pipes to transform displayed data
  • Implement Interfaces in Angular2
  • Compose Components with Angular2's Component Nesting capabilities
  • Implement Services in an Angular2 application
  • Use Dependency Injection to keep an Angular2 application lean
  • Integrate with Web Services using Reactive Extension's Observables
  • Implement Routing in Angular2
  • Understand what Angular2 is, and how it can help you as a developer ... and much, much more!
View Curriculum
  • Before taking this course, a student should ideally (but not absolutely) have some experience in: Creating web UI’s with normal Javascript tools (i.e. jQuery, Bootstrap, ASP.NET, AngularJS, etc.) Programming with a common object-oriented or scripting language (i.e. Java, C#, Python, PHP, etc.) JavaScript development of complete client-side solutions. ANGULAR1 EXPERIENCE IS NOT REQUIRED!!!

There’s no way around it. If you want to gain a competitive edge in UI/UX design, web development, or anything to do with mobile and desktop web apps, then you need to know Angular JS. Better yet, you need to know Angular 2, the latest version. This Angular 2 crash course will refresh your memory and get you updated on the essentials of the latest version. And if you’re just getting started with Angular JS, don’t worry = this is the perfect introduction too.

Get Up to Speed with Angular 2

  • Understand Angular 2 and how it can help you as a developer
  • Code an Angular 2 project with an online IDE
  • Get to grips with Angular 2’s many powerful features
  • Improve your UI/UX design and development skills
  • Discover what’s new in the latest version of Angular

Upgrade your Programming Skills

With 71 lectures and 5 hours of content, this Angular 2 online course will give you a thorough understanding of how Angular 2 solutions are designed, administered, and developed. If you’re a web, mobile or service app developer, architect, UI designer, tester or administrator, or if you just want to know how to get Angular 2 projects up and running, then this is the course for you.

You don’t need any Angular 1 or UI experience to take this course, although if you’re familiar with creating web UIs with normal JavaScript tools (jQuery, Bootstrap, etc.), or object-oriented scripting languages like Java, C#, Python etc., you’ll already have a head start.

The course will begin with an introduction to TypeScript, the Cloud9 IDE and using Angular 2 modules. Then you’ll get stuck into Angular 2’s components, building a UI and binding your data. After that things get a little more challenging with a breakdown of advanced component concepts and component composition. From there you’ll jump into services, web services, and routing before setting up Angular 2 from scratch.

By the end of this course you’ll be able to set up and get going on your own Angular 2 projects quickly, easily, and efficiently.

About Angular JS

Angular is a development platform for building mobile and desktop web applications. It’s a structural framework that allows you to use HTML as your template language, and is JavaScript based. It has many high-power features like data binding and dependency injection that eliminates huge chunks of coding for the developer, making the process much more efficient and streamlined.  It’s mostly maintained by Google and a wide network of users.  Angular 2 is the latest version of the framework, first released in September 2014.

Who is the target audience?
  • This course was built for web developers who design and build UI/UX solutions for mobile and the web. This course is designed for those developers who want to design with Angular2 as easily as they can with other JavaScript frameworks. Of course, the info presented here is just as valuable for architects, testers, and product managers as they too should understand how Angular2 is designed and used in a complete web solution.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
74 Lectures
Introducing Angular 2
5 Lectures 12:04

This course teaches you how to design and build components, how to use templates to create your application’s user interface, how to extend HTML with directives and data binding, and how routing is done.

Please download the attached document for course project source files information 

Preview 02:00

What is Angular? Why should we use Angular? Why is there an Angular2?

Preview 04:10

Let’s understand what we’ll do over the life of this course and how we’ll do it.

How This Course Works

We can get a Cloud9 account set up if necessary and get our initial project set up in the cloud.

Preview 02:00

We now understand what to expect in the sections of this course and what we can expect to learn.

Section Summary
Pack Our Lunch
7 Lectures 21:56

Prepare ourselves with some significant background info and a functioning development environment.

Preview 00:59

TypeScript is the language of choice for Angular2. Let’s learn why.

Preview 03:56

We need to get our Cloud9 online IDE set up and ready for development.

Getting the Cloud9 Online IDE

Setting Up the Cloud9 IDE

We’ll code every concept that we learn in our course project. Let’s set it up and get it ready for our first lesson.

Course Project Setup

Modules are a foundational part of Angular2. Let’s be sure to understand what they are and how we’ll use them.

Using Angular 2 Modules

We are now primed and ready to dive into Angular2.

Section Summary
Angular 2 Components
7 Lectures 25:53

Take a close look at what Angular2 components are and learn the steps involved in creating one.

Section Introduction

Let’s learn what components are and what they’re made of.

The Component Defined

Components consist of 3 parts. Let’s learn what they are and what each part does.

The Component Parts

Let’s learn the interactions of the 3 component parts and how to stitch them together to create a complete component.

Tying a Component Together

The App Component is the heart of an Angular2 application. Let’s learn to create it.

The App Component

With enough ammunition to get an app up and running, let’s learn how to do it.

Bootstrapping an Angular 2 App

We learned enough to get an app up and running. With a very app is simple and very high-level Angular2 knowledge, we’re ready to dive deep into the Angular2 depths.

Section Summary
Building Angula r2 UI
7 Lectures 32:19

We will learn to define the visible aspects of components as HTML within a template.

Section Introduction

Our view is defined in HTML which can then be inserted into our component’s template.

The Component Template

We can create a template in a separate file.

Create A Template

There are 3 steps in using a component as a directive.

The Directive Component

Binding data from our component’s class to it’s template is easy with interpolation.


Angular2 has tons of built-in directives that we need.

Angular 2 Built-In Directives

We learned to work with templates within components, to bind data in those components, and how to use components as directives.

Section Summary
Binding in Angular 2
6 Lectures 16:54
Section Introduction

When data changes in our class, we need to reflect the change in our HTML. Let’s learn how this works.

Property Binding

Certain user interactions with our web page need to update properties in our class. We can use Event Binding to have this happen automatically.

Event Binding

We can use both Property binding and Event binding at the same time to synchronize class properties and page elements.

2-Way Binding

Let’s learn to use Pipes to transform bound properties before they are displayed.

Formatting Bound Data

In this section we learned to use Property binding & Event binding and how to combine them for 2-Way binding. We also learned how Pipes help us control the display of our data.

Section Summary
Advanced Component Concepts
6 Lectures 26:28

We will learn several ways to improve upon our components.

Section Introduction

Let’s see how to make the most of Angular2’s TypeScript benefits thru use of Interfaces.

Interfaces and Components

There is a better way to do styling in Angular2 than simply referencing a CSS file. Let’s learn how!

Styling Components

Let’s learn to listen to an Angular2 application and react to it’s many events.

Component Lifecycle Events

We can transform and apply logic to data before we display it in the browser. Let’s see how it works.

Pipe Transform Interface

In this section we learned to leverage TypeScript strong typing with interfaces, saw how to encapsulate styling within a component, and how to tap into component lifecycle events to trigger operations.

Section Summary
Component Composition
6 Lectures 20:03

We will discus how to build components designed to be nested within other components and have these components talk to one another.

Section Introduction

Let’s see how components can work “inside” other components.

Parent-Child Components

We can use a Nested Component as a Directive. Let’s discuss how this is done..

More Parent-Child Components

Let’s learn how a Nested Component can take input from its Par

Property Binding with Input

A Nested Component can send data to its Parent Component. Let’s examine this functionality.

Event Binding with Output

In this section we learned how Components can nest within one another and still maintain normal data binding.

Section Summary
6 Lectures 16:37

We can use Services when we have data or logic that is not associated with a specific view or that we want to share across components.

Section Introduction

Let’s learn how Dependency Injection can make Services most effective

Angular 2 Dependency Injection

Services are created quite similarly to Components and Pipes. Let’s see how simple it really is.

Creating Services

Let’s learn to get Services into play by registering them as Providers.

Using Services

We can leverage Dependency Injection to expose services where they’re needed.

Service Injection

In this section we learned to create Services, register them as Providers, and how to expose them most efficiently with Dependency Injection.

Section Summary
Web Services
6 Lectures 16:20

We will learn how to use HTTP with observable to retrieve data from the interwebs.

Section Introduction

We can use Reactive Extensions (RxJS) to implement Angular2’s Observables instead of simply using Promises.

Observables vs Promises

Let’s learn to get Reactive Extensions (RxJS) into play along with Angular2’s HTTP library.

Using Reactive Extensions

We’ll learn to send HTTP requests in Angular2.

HTTP Requests

Let’s see how to use Observables to work with data requested via HTTP.

Implementing Observables

In this section we learned about using Reactive Extensions (RxJS) and it’s Observables instead of relying on Promises. We learned how Angular2’s HTTP library gets us HTTP requests and how to use Observables to handle data in an HTTP response.

Section Summary
Angular2 Routing
7 Lectures 27:41

We will learn to define routes for navigate between multiple views in an Angular2 application.

Section Introduction

In Angular2 routing is component based. Let’s learn to configure routing targets and to define routes for components.

Route Configuration

We will discuss the technique of tying routes to user actions for effective navigation within an application.

Routes and Actions

Routes and Views

Oftentimes routes need to be passed a parameter. Let’s discover how this works in Angular2.

Routes And Parameters

Let’s find out how to do routing with code vs. user interactions. We can implement Angular2’s RouterService to make this happen.

Routes And Code

In this section we walked through how to configure routes, tie routes to actions, and define where the routed component’s view should appear. We also uncovered some additional routing techniques, including passing parameters to a route and activating a route with code.

Section Summary
3 More Sections
About the Instructor
Stone River eLearning
4.2 Average rating
16,596 Reviews
274,690 Students
201 Courses
270,000+ Happy Udemy Students

At Stone River eLearning, technology is all we teach. If you're interested in programming, development or design - we have it covered. 

Check out our huge catalog of courses and join the over 450,000 students currently taking Stone River eLearning courses. We currently offer 100+ different technology training courses on our Stone River eLearning website and are adding new courses on hot and trending topics every month. A subscription option is available for those with a real passion for learning.