Building Angular and ASP.NET Web API Apps (2018)

Course details

Single-page applications (SPAs) can provide a more positive and fluid user experience, but designing and building a SPA is not without its challenges. In this course, learn how to leverage ASP.NET Web API and the Angular framework to make the work of designing and building SPAs a bit easier. Instructor Ervis Trupja first shows how to set up the app infrastructure, demonstrating how to create a Web API and Angular app, and then set up the essentials for each one. He steps through how to create the service layer with ASP.NET Web API and use Angular and Material Design to build the UI. Discover how to send requests to a Web API app, handle errors in Angular, create an authentication system using tokens, and more.

Learning objectives
Setting up the app infrastructure
Creating a database
Configuring routing in Angular
Designing a view with Material Design
Updating existing data
Creating a Web API HttpPut endpoint
Deleting data
Authentication using tokens
Adding a filter, pagination, and icon buttons

Concepts

Introduction

Make your site more interactive with Angular and ASP.NET Web API
What you should know

Setting Up the App Infrastructure

Application overview
Creating a Web API application
Web API architectural overview
Creating a new Angular application
Angular architectural overview

Getting Started with Web API

Creating the entry model
Configuring DbContext
Configuring a database
Creating a database
Getting data from the database

Getting Started with Angular

Adding a component
Adding a service
Configuring routing in Angular
Requesting data from Web API
Designing a view with Material Design
Creating a Material Design table
Showing data to the users

Saving Data to Database

Creating a Web API HttpPost endpoint
Configuring an Angular reactive form
Creating an Angular reactive form
Validating an Angular reactive form
Designing a header and footer
Creating an HttpPost request in Angular

Updating Existing Data

Creating a Web API HttpPut endpoint
Setting up a dialog
Configuring the dialog with data
Populating the dialog with data
Creating an HttpPut request in Angular

Deleting Data

Creating a Web API HttpDelete endpoint
Adding a confirmation step
Getting a single entry
Designing a confirmation view
Creating an HttpDelete request in Angular

Authentication Using Tokens

Setting up AuthController
Setting up AuthService
Creating a register component
Registering users
Generating a token
Requesting a token from Angular
Authentication check via tokens
Logging out users
Creating an Angular login component
Getting data from the login form
Logging in users
Handling errors in angular

Project Design Wrap-Up

Adding a filter
Adding pagination
Adding icon buttons

Conclusion

Next steps