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

0. Introduction

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

1. Setting Up the App Infrastructure

03 - Application overview
04 - Creating a Web API application
05 - Web API architectural overview
06 - Creating a new Angular application
07 - Angular architectural overview

2. Getting Started with Web API

08 - Creating the entry model
09 - Configuring DbContext
10 - Configuring a database
11 - Creating a database
12 - Getting data from the database

3. Getting Started with Angular

13 - Adding a component
14 - Adding a service
15 - Configuring routing in Angular
16 - Requesting data from Web API
17 - Designing a view with Material Design
18 - Creating a Material Design table
19 - Showing data to the users

4. Saving Data to Database

20 - Creating a Web API HttpPost endpoint
21 - Configuring an Angular reactive form
22 - Creating an Angular reactive form
23 - Validating an Angular reactive form
24 - Designing a header and footer
25 - Creating an HttpPost request in Angular

5. Updating Existing Data

26 - Creating a Web API HttpPut endpoint
27 - Setting up a dialog
28 - Configuring the dialog with data
29 - Populating the dialog with data
30 - Creating an HttpPut request in Angular

6. Deleting Data

31 - Creating a Web API HttpDelete endpoint
32 - Adding a confirmation step
33 - Getting a single entry
34 - Designing a confirmation view
35 - Creating an HttpDelete request in Angular

7. Authentication Using Tokens

36 - Setting up AuthController
37 - Setting up AuthService
38 - Creating a register component
39 - Registering users
40 - Generating a token
41 - Requesting a token from Angular
42 - Authentication check via tokens
43 - Logging out users
44 - Creating an Angular login component
45 - Getting data from the login form
46 - Logging in users
47 - Handling errors in angular

8. Project Design Wrap-Up

48 - Adding a filter
49 - Adding pagination
50 - Adding icon buttons

Conclusion

51 - Next steps