AngularJS Front to Back with Web API

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.
Course info
Rating
(1144)
Level
Intermediate
Updated
Apr 16, 2015
Duration
5h 15m
Table of contents
Introduction
Getting Started: Angular & Web API
Retrieving Data
CORS and Formatters
Passing Parameters
Using OData Queries
Saving Data
Action Results, Error Handling & Validation
User Authentication in Web API
User Registration and Login
User Authorization
Final Words
Description
Course info
Rating
(1144)
Level
Intermediate
Updated
Apr 16, 2015
Duration
5h 15m
Description

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.

About the author
About the author

Deborah Kurata is a software developer, consultant, Pluralsight author, Google Developer Expert (GDE) and Microsoft Most Valuable Professional (MVP). Follow her on twitter: @deborahkurata

More from the author
RxJS in Angular: Reactive Development
Beginner
3h 48m
Jul 17, 2019
Angular Routing
Intermediate
4h 48m
Dec 20, 2018
More courses by Deborah Kurata
Section Introduction Transcripts
Section Introduction Transcripts

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.