In this series, we are going to go through a detailed example of how to use .NET Core, Angular 4 and MySQL for ASP.NET Core web application development.
If someone asks: “Why this combination of technologies”, without getting in too much detail, the answer would be:
- The technologies are free of charge
- Applications can be deployed on both Windows and Linux OS
- Production-grade performance
- … And because we can 🙂
What are we going to do in this guide?
We are going to use MySQL as our database. First, we are going to install the MySQL server, create tables and populate them with some data.
Then we are going to step into the world of .NET Core 2.0 Web API development. It is going to be our server-side part of the application. Even though this app is small, we are going to use repository pattern, generics, LINQ, entity framework core, create more projects and services to demonstrate some good practices. Overall we will try to write the application as we would in the real-time environment. You will learn about .NET Core architecture and code organization, so you can make it more readable and maintainable.
There are three approaches to using Entity Framework: Database First, Code First and Model First. In this tutorial, we are going to use Database First approach, because we want to create our database prior to typing .NET code. This approach is good when you know the structure of your database beforehand, and we get to use the visual editor which makes the creation of relationships between tables much easier.
After the server part, we are going to dive into the client-side part. You’ll see how easy it is to use Angular 4 to consume the REST API we created on the server side with Web API. You’ll also get familiar with modules, services, components and many other features of angular. We are going to create reusable services and use some third party libraries to complete the client part of the app.
In the end, we are going to publish our app on Windows and Linux OS, and finish strong by completing the whole development cycle.
List of technologies required for the entire series:
- MySQL server installed on your machine
- .NET SDK
- Visual Studio 2017
- Node.js which is prerequisite for Angular 4
- Visual Studio Code, or any other editor you like
To install MySQL on your machine, follow this guide.
You can install Visual Studio 2017 by following these instuctions (In the section where you select workloads, please select ASP.NET and web development section).
- Intermediate C# knowledge
- Familiarity with HTML and CSS
This tutorial will be separated into several parts:
- Part 1 – MySQL, creating database data
- Part 2 – Creating .NET Core WebApi project – Basic code preparations
- Part 3 – Creating .NET Core WebApi project – Custom logging in .NET Core
- Part 4 – Creating .NET Core WebApi project – Repository pattern with Entity framework core
- Part 5 – Creating .NET Core WebApi project – Using repository for GET requests
- Part 6 – Creating .NET Core WebApi project – Using repository for POST, PUT and DELETE requests
- Part 7 – Creating Angular4 client side – Preparing the project and creating the first component
- Part 8 – Creating Angular4 client side – Navigation and routing
- Part 9 – Creating Angular4 client side – HTTP, Services and environment files
- Part 10 – Creating Angular4 client side – Lazy load, showing data on page
- Part 11 – Creating Angular4 client side – Error handling, Details list
- Part 12 – Creating Angular4 client side – Child components, @Input, @Output, directive
- Part 13 – Creating Angular4 client side – Create owner and validation
- Part 14 – Creating Angular4 client side – Update owner
- Part 15 – Creating Angular4 client side – Delete owner
- Part 16 – Application hosting – Host .NET Core on Windows with IIS
- Part 17 – Application hosting – Host .NET Core on Linux OS