Add Angular to MVC Applications
Would you like to speed up your MVC or web form application? This course will show you how to add, or even replace, pages in an MVC application without affecting the rest of your application.
What you'll learn
Your boss wants you to add some new functionality to your large MVC application. You want to learn Angular and your boss is okay with you using Angular, as long as you don't have to rewrite your existing application. You know you can just keep all your old MVC pages in place, but add new pages in Angular. In this course, Add Angular to MVC Applications, you'll learn how to add, or even replace pages in an MVC application without affecting the rest of your application. First, you'll explore how to integrate Angular into your project, and how to replace an MVC page. Next, you'll develop Web API's to serve the data from your back-end data storage and reuse the view models your MVC controllers call. Finally, you'll cover how to handle validation errors both on the client and server-side. By the end of this course, you'll be efficiently using pure HTML calling Web API's through Angular.
Table of contents
- Module Introduction 1m
- Install Node.js and Set up Visual Studio 2m
- Add Angular Files to MVC Project 4m
- Configure Angular to Run Within MVC 5m
- Configure MVC and Run the Angular Component 2m
- Add Product List Component and HTML 4m
- Angular Routing 2m
- Add Angular Routing to Your MVC Application 4m
- Module Summary 1m
- Module Introduction 1m
- Add a Web API Class 4m
- Add WebApiConfig Class 2m
- Configure Global.asax 4m
- Building the Typescript to Call the Web API 1m
- Create the Product and Product Service Classes 4m
- Update AppModule to Use the Service Class 1m
- Add the HTML Table and Call the Product Service 6m
- Handling Exceptions 5m
- Module Summary 1m
- Module Introduction 0m
- Build Search Panel HTML 3m
- Build Web API to Get Categories 2m
- Create Category Classes to Call Web API 4m
- Build Product Search Class, Update Product List Component 4m
- Calling the Category Web API 3m
- Create Search Web API 3m
- Modify Product Service to Call Search Web API 2m
- Call Search Service from Product List Component 2m
- Module Summary 1m
- Module Introduction 0m
- Create HTML for Product Detail Page 5m
- Create Product Detail Component Class 2m
- Add Routing for Detail Page 1m
- Update AppModule and Create Add Button 1m
- Programmatically Route to the Detail Page 2m
- Create Category API and Angular Category Service 2m
- Build Drop Down List of Categories on Product Detail Page 2m
- Create POST Method for Adding Products 4m
- Add Products in ProductService and Handle Validation Errors 3m
- Add Code to Detail Page to Add Products 4m
- Module Summary 0m
- Module Introduction 0m
- How to Get a Single Product to Display 1m
- Build a Get(id) Controller Method 2m
- Write Angular Code to Get a Single Product 4m
- Create the PUT Web API Method 3m
- Create Update Service and Update a Product 3m
- Add Delete Web API Method 2m
- Write Angular Code to Delete a Product 4m
- Module Summary 0m
- Module Introduction 1m
- Add Form Tag and Setup Input Fields 4m
- Display Client-side Validation Error Messages 4m
- How Custom Validators Are Created 2m
- Create the NotLowerCase Validator 4m
- Using the NotLowerCase Validator 3m
- Validators That Need a Value 2m
- Create the Min Validator 3m
- Add Min Validator to AppModule and Try It Out 2m
- Create the Use Max Validator Directive 3m
- Module and Course Summary 1m
About the author
Paul has over thirty years of experience architecting information systems and his expertise is in much demand from Fortune 500 companies. Paul is a Pluralsight author, has published 400+ articles, and authored over 14 books on topics ranging from JavaScript, Angular, C#, SQL Server and many .NET technologies. Paul is a frequent speaker at conferences and user groups.