In this tutorial(guide), we will go through a detailed example of how to use .NET Core, Angular 4 and MySQL for development of web application.

If someone asks: “Why this combination of technologies”, without getting in too much detail, the answer is:

  • They are free of charge
  • App can be deployed on Windows and Linux OS
  • They are really fast in production
  • … And because we can 🙂

What are we going to do in this guide

We will use MySQL as our database. Installing MySQL server, creating tables and populating them will be our first step.

Then we will step into the world of .NET Core Web API development. It is going to be our server-side part of the application. Even though this app is small, we will use repository pattern, generics, LINQ, entity framework core, create more projects and services. Overall we will try to write the application as we would in real time environment. This way, you will gain knowledge of .net core architecture and code organizing architecture, so it could be more readable and maintainable.

While using Entity framework, we can find three approaches to work with our data: Database First, Code First and Model First. In this tutorial, we will use Database First approach, because we want to create our database prior to typing .NET code. It is good to use this approach when you know the structure of your database, and also we have the visual editor for our tables and it is much easier to create relations between tables.

After the server part, we will dive into the client-side part. You’ll see how easy is to use Angular 4 for developing part of the app which will communicate with our Web API, by creating modules, services, components and many other features of angular. We will create reusable services, use third party libraries to complete our client part of the app.

At the end, we will publish our app on Windows and Linux OS, and by doing that, completing our app development circle.

Prerequisites

All technologies requested for this complete tutorial are as follows:

For the first chapter, we will need just MySQL because we will deal only with the database in that chapter.

Installation

For MySQL to be installed on your machine, follow this guide: https://dev.mysql.com/doc/workbench/en/wb-installing-windows.html

To install Visual Studio 2017, follow this guide: https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio (In the section where you select workloads, please select ASP.NET and web development section).

Background

  • Knowledge of C#
  • You should be familiar with Html, CSS
  • Also, knowledge of JavaScript is advantage

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 project
  • Part 8 – Creating Angular4 client side – Home component
  • Part 9 – Creating Angular4 client side – Navigation and routing
  • Part 10 – Creating Angular4 client side – Http, Observables, Repository…
  • Part 11 – Creating Angular4 client side – Lazy load, showing data on page
  • Part 12 – Creating Angular4 client side – Error handling, Details list
  • Part 13 – Creating Angular4 client side – Child components, @Input, @Output, directive
  • Part 14 – Creating Angular4 client side – Create owner and validation
  • Part 15 – Creating Angular4 client side – Update owner
  • Part 16 – Creating Angular4 client side – Delete owner
  • Part 17 – Application hosting – Host .NET Core on Windows with IIS
  • Part 18 – Application hosting – Host .NET Core on Linux OS