Integrating Angular with ASP.NET Core RESTful Services

This course will teach you how to build an Angular and ASP.NET Core application that can perform create, read, update and delete (CRUD) operations using Entity Framework Core.
Course info
Rating
(51)
Level
Intermediate
Updated
Sep 5, 2017
Duration
5h 49m
Table of contents
Course Overview
Course Introduction
Exploring the ASP.NET Core and Angular Application
Retrieving Data Using a GET Action
Inserting Data Using a POST Action
Updating Data Using a PUT Action
Deleting Data Using a DELETE Action
Data Paging, XSRF, and HTTP Headers
Summary
Description
Course info
Rating
(51)
Level
Intermediate
Updated
Sep 5, 2017
Duration
5h 49m
Description

Learn how to build an Angular and ASP.NET Core application that can perform create, read, update and delete (CRUD) operations. In this course, Integrating Angular with ASP.NET Core RESTful Services, you'll see first hand how Angular and ASP.NET Core can be used to build an application that allows users to view customer data, page through it, and then perform, insert, update, and delete operations. First, you'll discover how to move data from a database all the way down to an Angular client using RESTful services. Next, on the server-side, you'll explore C#, ASP.NET Core, and Entity Framework Core and how they can be used together to create a RESTful service. Then, as you dive into the client-side code, you'll see how Angular services can integrate with ASP.NET Core APIs. Finally, you'll learn the different form techniques including template-driven forms, reactive forms, and highlight the differences between them. By the end of the course, you'll understand the process involved to not only create RESTful services using ASP.NET Core, but also how Angular can be used to consume these services and display and capture data in the user interface.

About the author
About the author

Dan Wahlin founded Wahlin Consulting, which provides consulting and training services on JavaScript, Angular, Node.js, C#, ASP.NET MVC, Web API, and Docker. He is a Google GDE, Microsoft MVP and Regional Director, and speaks at conferences and user groups around the world.

More from the author
More courses by Dan Wahlin
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Welcome to the Integrating Angular with ASP. NET Core RESTful Services course. My name is Dan Wahlin and I'm a software developer, architect, and trainer specializing in web technologies. I work a lot with Angular and different server-side technologies so I'm really excited to introduce this course. Throughout the course you'll see first-hand how Angular and ASP. NET Core can be used to build an application that allows users to view customer data, page through it, and then perform insert, update, and delete operations. This includes learning how to move data from a database all the way down to the Angular client using RESTful services. As data is modified in the client, you're also going to learn different techniques for sending that data to the service so it can be stored in the database. On the server side, you'll learn about C#, ASP. NET Core, and Entity Framework Core and how they can be used together to create a RESTful service. This includes using a data repository layer for data access, handling errors and returning appropriate ACTP status codes, and even documenting the API using Swagger. As we dive into the client-side code you'll see how Angular services can integrate with ASP. NET Core APIs, how components can subscribe to observables, and how data can be rendered in the user interface using child components. This includes discussing input and output properties and how they can be used to pass data in and out of components. The course will also discuss different form techniques including template-driven forms and reactive forms and highlight the differences between them. So let's get started and jump right in.

Retrieving Data Using a GET Action
This module is all about exposing data that could be retrieved from an Angular client. We're going to talk about how we can use RESTful services created with ASP. NET Core, how we can use Angular services, and how components can then call into those services. So we're going to start off by talking about how we can inject objects into web API controllers with ASP. NET Core and how we can add some code that then can be used to expose customers and states data from our ASP. NET Core RESTful service. Now once we get done with the server side, we'll then move to the client side and talk about Angular services and we're going to talk about how we can inject Http client and then use it to request this data from our RESTful service on the server side. As we get data and talk about observables, we're then going to subscribe to observables. We'll do this in our components and we'll talk about parent and child components and how they can be used to display customers in a grid, and then finally we'll talk about different form techniques, template driven and reactive driven forms that Angular provides and I'll show you the different approaches you can take so that you can decide which approach you'd like best for your application. So let's go ahead and dive in by first talking about the server side and how we can write RESTful services to make it possible to expose data from our ASP. NET Core web API.

Inserting Data Using a POST Action
If you work a lot with line of business application, then oftentimes you need to get data from the app into a database or some other type of data store. In this module we're going to focus on inserting data by using a POST action that's going to be created in our ASP. NET Core API and then we'll see how we can integrate Angular into that POST action that's going to be exposed. So we're going to start off by discussing how we created a POST action in our ASP. NET Core web API controller. From there we're going to update our Angular service to make a POST request so that we send a customer object from the Angular app up to our ASP. NET Core API. We'll then modify our customer form and look at a template-driven way to validate data, capture data, and then integrate with our data service and then have that data service again talk with ASP. NET Core. And then we'll also explore a reactive form approach for capturing data from the user, validating it, and then integrating with our data service in the Angular world. By the time we're done, you're going to see both approaches, a template-driven approach and a reactive-driven approach. So let's get started by talking about how we can create a POST action in our ASP. NET Core API controller.

Updating Data Using a PUT Action
Another important part of line of business applications is the ability to update data. We've seen how to perform inserts with post actions so now we're going to look at updates with PUT actions. Now we're going to start off by talking about how to create a PUT action in an ASP. NET Core API controller. We'll walk through that process, integrate with our repository layer so that we can update the database. Once that's in place, we'll switch back to our Angular service and we'll issue a PUT request and send a customer object up to that ASP. NET Core API. From there we'll revisit our customer form and make sure it supports updates, and then we'll also do the same thing with our reactive form. So we're going to be using our Angular service not only to get data and insert data, but also now to update data and by the time you're done with this module, you'll see how that process works. Let's go ahead and jump right in.

Deleting Data Using a DELETE Action
The last piece of the puzzle that we need to fill in for our CRUD operations is the ability to delete data. So in this module we're going to focus on deleting and we'll start off by adding a delete action into our ASP. NET Core API controller. Once we get that all set up, we'll move into the Angular side of the equation and we'll revisit our data service and add a delete call from there, then we'll go back into our form and enhance it to call our data service so that we can delete a record as needed. We'll do the same thing to the reactive form as well so that you can see that we're going to have a very similar approach to both and then we'll wrap up with a quick look at some Swagger documentation and what it will generate for a delete request. So let's go ahead and get started by creating our delete action in our ASP. NET Core API.

Data Paging, XSRF, and HTTP Headers
We have our full set of CRUD operations in place for the application and we've seen how Angular can integrate with ASP. NET Core RESTful API, but we have a little bit more we're going to cover in this module that I think you'll find quite interesting. First off, we're going to be talking about paging data and how HTTP headers can also play a role with that. We're going to add a paging API into our server side code and then Angular is going to be accessing that by using a header. So we're going to learn not only how to do the paging, but also how to set a header on the server side that has the total number of records that we're paging and how Angular can then access that header value and use it. We're also going to add pagination support into a component and even talk about a custom paging component and how you would build that and then use it. Now because we have an application that's not just a pure RESTful API, but also an application combined with a RESTful API, there are some different attacks that you need to be aware of. The one we're going to talk about is called a cross-site request forgery attack. So I'm going to provide some details on what that is. We'll then talk about how ASP. NET Core can participate in this and help shut these down and the functionality that Angular adds to be able to set a specific header value that the server would look for to shut down these types of request forgery attacks. So let's go ahead and get started by talking about pagination and how we can page data on the server side and set headers that Angular can then access.