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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
One of the hardest things in learning a new technology is getting started and setting up the environment.
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.
A single Angular 2 application is a heavy client-side web application, and we need to create a starting page for it.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.