Angular is great for building front-end client-side applications to interact with the user. But most fully featured Web applications also need back-end services to handle data management, user authentication, and other processing. This course focuses on the touch points between an Angular front-end client application and a back-end service built with ASP.NET Web API.
Getting Started: Angular & Web API Like chocolate and peanut butter, Angular and Web API are two technologies that are great together. Welcome again to Angular Front to Back with Web API from Pluralsight. My name is Deborah Kurata, and this module gets us started building both the client-side Angular app and the server-side ASP. NET Web API service. In this module, we will review web application architecture. That will provide a context for building the sample application. We will create both the Angular app and the Web API service projects. We'll add code to these projects throughout this course. With the basic code in place, we'll examine the anatomy of the Angular application. We'll walk through how the Angular app is structured, and how the pieces fit together, and we'll examine the anatomy of the Web API service. We'll look at the code that is generated for us by the ASP. NET Web API templates. When we are finished with this module, we will have a working sample Angular application, and a start to our ASP. NET Web API service. The sample application used in this course is called Acme Product Management, or APM. The first iteration of this application displays a set of products. The Angular application requests the list of products from the Web API. The Web API Service retrieves the products from a data store and returns them to the Angular application, and the Angular application displays them. As we progress through the course we'll add features to this application, and later we'll build an edit form. Let's begin.
CORS and Formatters In the last module, we built retrieve functionality into our Web API service and modified the Angular code to call that service, but the application does not run successfully. There's more work to be done. Welcome once again to Angular Front to Back with Web API from Pluralsight. My name is Deborah Kurata, and this module covers Cross-Origin Request Sharing or CORS, and Web API serialization formatters. Once we understand both of these concepts, we can add the required code to the Web API and get our application running. Recall from the last module that when we run our sample application with Internet Explorer we get this. We can see rows, so we must be getting data, but something is wrong because we don't see that data. When we run Chrome, we don't see anything. If we press F12 to bring up the developer tools, we see an error, No 'Access-Control-Allow-Origin' header is present on the requested resource. So what does that error mean, and how do we fix it? We'll answer those questions in this module. The primary objectives for this module are understanding CORS, enabling CORS in a Web API service, understanding serialization formatters, and configuring the JSON formatter in a Web API service. Let's get started.
Final Words As you have seen throughout this course, Angular and ASP. NET Web API play very well together. You can now leverage what you've learned in this course to masterfully implement all of the touch points between your client-side Angular application and your backend Web API service. Welcome, once again, to Angular Front to Back with Web API from Pluralsight. My name is Deborah Kurata, and the final words in this course include a brief summary and pointers to additional information. Let's jump right in to this short module.