Angular 2 Web Development with TypeScript
4.2 (6 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.
70 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 Web Development with TypeScript to your Wishlist.

Add to Wishlist

Angular 2 Web Development with TypeScript

Leverage the power of TypeScript while authoring Angular 2 applications to take your web development skills to the next
4.2 (6 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.
70 students enrolled
Created by Packt Publishing
Last updated 2/2017
Curiosity Sale
Current price: $10 Original price: $125 Discount: 92% off
30-Day Money-Back Guarantee
  • 8 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Set up the development environment to get started with Angular 2 and Typescript
  • Grasp how to debug TypeScript in a browser
  • See how TypeScript solves “this” problem in JavaScript
  • Create web API web services in ASP.NET Core with Entity Framework 7 and SQL Server
  • Author the key building blocks of an Angular 2 application, injectable services, components, pipes, and directives
  • Find out how to validate user input using Angular 2 forms
  • Use the built-in Angular features to build list-based screens and study how to conditionally display data
  • Create a menu-based navigation system to guide the user through the application
  • Understand the basics of the Reactive Extensions framework to compose complex applications, flowing data, and events between components
View Curriculum
  • Some understanding of web development is very helpful and a basic knowledge of JavaScript is highly recommended to follow the course.
  • This is a fast-paced, example-based video course packed with information from the basics of TypeScript and Angular 2 to writing code on the go. We start with TypeScript core concepts, move on to Angular building blocks, and finish up with a running application that can serve as a blueprint for further studying or production development. Although briskly paced, it covers all the key concepts of the technologies involved.

Angular 2 is a web development framework focused on writing component-based applications. TypeScript allows us to develop applications in a higher language than JavaScript, avoiding common mistakes and leveraging the future features of JavaScript. The two make a great combination, helping us write maintainable, clean web applications’ code using the tools of our choice.

This course will get your well on your way to learning Angular 2 and TypeScript together. You will study and practice how to create Angular 2 components in TypeScript. When we are done, you will be able to set up the environment and create a full-fledged application that can consume and publish server data and allow users to interact with it.

We start out by setting up an environment to develop a TypeScript-based Angular application. You will study the object-oriented features of TypeScript and then jump straight into the key concepts of Angular 2. We will create a new project setup in Visual Studio 2015 using the ASP.NET vNext web project. Next,we’ll cover the creation of database and web API controllers that handle data operations using Entity Framework and SQL Server. Finally, we will create components, communicate with web services, and learn how to guide users through our application with menus and forms.

This course will take your web development skills to a new level, enabling you to author Angular 2 applications from scratch.

About The Author

Sergey Barskiy has a Bachelor's degree in Computer Science with almost 20 years of experience in Software Development. Sergey has architected and coded many software projects using Microsoft technologies for over 15 years. Presently, he is working as an Architect with Tyler Technologies, the largest provider of municipal government software in the United States. He is a Microsoft MVP in IIS/ASP.NET, the division focused on web development. He is the author of Code-First Development with Entity Framework. He has spoken at many technical conferences on many topics, including Angular and TypeScript.

Who is the target audience?
  • This video is for new web application developers.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
45 Lectures
Introducing TypeScript
3 Lectures 20:09

This video provides an overview of the entire course.

Preview 05:22

We could continue using JavaScript to build web applications, but TypeScript offers many advantages while having few, if any, drawbacks. We will go over the uses, features, and benefits of the TypeScript language.

Features and Benefits of TypeScript

Although we could write TypeScript in Notepad and setup command-line tooling, this approach is far from productive. Although there are many editors available that support TypeScript, we will use Visual Studio 2015 to write TypeScript code.

Setting Up Our Environment
TypeScript Concepts
5 Lectures 52:00

Type safety is an important programming feature that JavaScript lacks. TypeScript brings type safety into web development.

Preview 12:31

We need to have an ability to break our application code into discrete units of work. This video will help us get started with the basic building block of the TypeScript web application, which is a class. We will create a class with properties and methods.

Your First Class

The need to write complex code and implement extensive logic in our methods is quite common. If the use cases for what methods should do and what parameters they take aren't clear, it may cause problems. We will take a closer look at the class' methods in this video.

Creating Advanced Methods

Sometimes, you want to share some specific functionality across many different classes. Inheritance helps us solve this problem by adding functions to base classes. At times, we want to rely on abstractions instead of concretions, and the interface is the feature in TypeScript that solves the problem.

Inheritances and Interfaces

Any time we write some code, we need an ability to debug it. We are talking about examining variables, setting breakpoints, and so on. Let's take a look at how we can use the browser tools to debug TypeScript.

Debugging TypeScript
Advanced TypeScript Concepts
5 Lectures 48:58

In order to increase the readability of our code, we want to use language constructs to name discrete values. We also want to have an ability to reuse variable names when appropriate.

Preview 08:24

Sometimes, creating an instance of a class is not necessary to call a method, but classes provide a nice way to encapsulate code. In this video, we will discuss how static methods and properties can help us write such code.

Working with Statics

Sometimes, we find ourselves writing duplicate code when defining properties and constructors. We also find ourselves with an inability to run additional code when a property is set. At times, we want to expose read-only properties. Let's look at how we can tackle this.

Advanced Properties

Arrays, the only collection objects in JavaScript, cannot be typed. This opens our code to a potential type safety problem. It would also be nice if we could reuse functions and classes without losing type safety in TypeScript.


Dealing with a pointer to "this" variable is an issue that has been present in JavaScript since the beginning. TypeScript has features that help us solve this problem.

Solving "this" Problem
Starting Angular 2 Application
5 Lectures 59:43

It is usually quite hard to get started with a new technology. Angular 2 is no exception. We will go through an overview of the Angular framework with a brief detour into version 1 but mostly covering the features of Angular 2.

Preview 07:43

One of the hardest things in learning a new technology is getting started and setting up the environment.

Setting Up the New Project

It is important to have a good understanding of the key classes we are going to write when creating an Angular application. We need to know the key parts of the Angular framework.

Overview of Key Angular 2 Concepts

A single Angular 2 application is a heavy client-side web application, and we need to create a starting page for it.

Creating the Shell Page

As the Angular 2 application consists of components, it is time for us to create our first component. It will have a property and a method so that we can look at data bindings in action.

Creating the First Component
Creating Web API Web Services
5 Lectures 42:14

Our Angular application needs to communicate with the server in order to get or persist data. We need to understand how to use a Web API for this purpose.

Preview 06:59

Our applications need to persist data as well as retrieve it. One of the most common storage options are relational databases. We need a technology to enable us to easily talk to databases. We need to learn Entity Framework to achieve this goal.

Brief Overview of the Entity Framework

We need to model our database in order to retrieve and persist the data. Entity framework allows us to create classes and configuration in order to do so.

Creating Entity Framework Classes and Configuration

Now that we know what the Web API is about, we need to create a controller, a web service that operates on our data. We should think about separating the concerns between controllers and data.

Creating API Controller to Handle CRUD Operations

Now that we have written the web service layer, we need to configure our application entry point, the start-up class. We need to configure the dependency injection for all the components of our app so that we can test what we have accomplished.

Configuring Application Start-up
Authoring Angular Components
4 Lectures 57:59

We need to get the data from the service to show in our application. We want to isolate the server communications at the same time. Let's create an injectable component responsible for exposing the server data to the rest of the application.

Preview 14:13

Now that we can get the data from the server, we need to present it to the user. We will create two components that do this.

Creating the Nested Components Which Use Services

Components in Angular 2 are designed to represent large portions of the user interface. They are not designed to manipulate DOM. If you need to adjust HTML, you should use directives to achieve this goal.

Creating a Directive

Sometimes, we want to format the data from our JSON objects differently than just displaying them as is in the UI. Pipes serve this exact purpose. As a part of data binding, we can transform the data on the way to the HTML.

Creating a Pipe
4 Lectures 40:17

In a client-side application, we must still navigate between screens. In an Angular 2 application, navigation components handle menu-related features and general navigation tasks. We need to setup the necessary scripts and shell page as well as bootstrap client-side navigation. We must also setup a server to handle deep linking into client-side URLs.

Preview 06:11

Now that we know we need to define a structure of URLs that represents the views and components that our user will navigate to, we need to define these as routes.

Configuring Routes

Sometimes, we want to pass information to our components when navigating to them. We also want to have a way to organize routes logically into areas instead of putting all of them on the starting component. You will learn how to use route parameters to pass data to our components. We will also group our routes.

Nested Routes, Parameters, and Query Strings

Now that we have defined the routes, you need to learn how we can navigate to components that implement routes and where the data is displayed. You will learn how router outlets are placeholders for components and how we navigate via directives and in code. We will also take a look at how to handle missing routes.

Navigating with Directives and Code
Working with Forms
5 Lectures 01:02:24

How do we create forms that collect user input and provide validation? Angular forms make this process easy, while providing tools to control user input and dynamic validation with proper error messages and submission handling.

Preview 08:17

When we used jQuery in the past, we often found ourselves writing code to move data between HTML and models in JavaScript. Angular's data binding feature solves this problem. You will learn how we can create TypeScript models and bind them to the user interface

Form Data Binding

We need to ensure that the information we submit and persist based on user input is valid. When a user enters invalid information, we want to present the user with information pertinent to correcting the mistake made. We also want to keep the user from submitting invalid information to the server.

Simple Validation

Although we saw that we could make forms work without configuration using forms and the ngControl directive, we need to handle more complex use cases with custom validation. Forms based on control groups could be constructed in code, giving developers a lot more control over the forms and validation.

Reactive Forms

Sometimes we need to be notified that data changes in our model are based on user input. On the other hand, we want to notify the user when the system performs server calls. We will need to add listeners to monitor user changes. We will add visual feedback for the user when we persist data on the server.

Monitoring Changes and Using Notifications
Built-in Angular Building Blocks
5 Lectures 52:53

Quite often, we want to apply a different look to our application's pages based on the data that our application has. Angular 2 comes with two main components, NgClass and NgStyle, which allow us to easily change the user interface.

Preview 13:29

We often need to generate the same HTML element for items contained within a list, such as the TypeScript generic array. Angular 2 comes to our rescue by providing us with the ability to loop over an array specified in the HTML element to be used for each item.

Displaying Lists of Data

Sometimes, we want to suppress certain parts of the view based on the conditions contained in the component. We have a few tools at our disposal in order to hide or show items based on true/false conditions or even a specific value.

Conditionally Displaying Data

At times, we know that our data is static, and we want to optimize performance based on this fact. On the other hand, we may need to query components inside and outside the current component instead of resorting to direct HTML DOM manipulation. Angular 2 allows us to set a change detection strategy to optimize performance. It also gives us the ability to look around the current component for its children and parents in an abstract way.

Change Detection and Component Queries

So far, we have known the component to be instantiated when we design our app. At times, we need to decide which component we want to insert into a visual tree at runtime based on the state of our application. Angular 1 had the ngInclude directive for this purpose. Angular 2 comes with a component loader that is designed for this exact use case.

Dynamic Component Loading
Working with Server Data and Next Steps
4 Lectures 35:14

Promises have been used in Angular 1 to handle HTTP calls. Angular 2 relies on Rx or the Reactive Extensions framework to expose HTTP calls to the rest of the application. You will learn more about Rx and the key features it has.

Preview 07:27

We need to know how to make typical HTTP calls to update, insert, and delete data in our Web API controllers. We also need to be able to handle errors better. We will add the calls to add, update, and delete data following the HTTP REST standards.

Performing Insert, Update, and Delete Calls

As we make server calls, we want to indicate to the user that communication is taking place. We also want to add communication between components to coordinate the completion of HTTP calls. We will create a busy indicator control to use with our components. We will also add an output event to our child component to communicate with the parent when an HTTP call is complete.

Communicating Events between Components

Now that we know the key concepts of Angular 2 and the features of TypeScript as well as writing web services with .NET Core, we want to know what to concentrate on next. We will go over the additional functionality that exists in the frameworks. We will discuss the other steps we might follow to advance and solidify our learning.

Next Steps in Learning Angular 2
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,405 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.