Angular and .Net Core Web API Starter Application

This is an Angular/.Net Core Web API starter application that has the basic functionality for Adding, Editing, and Deleting customers so that you can use it as a starting point for building your applications. It uses the following frameworks:

• Angular Material
• Bootstrap
• .Net Core
• Entity Frameworks

You can download the code or see the latest code at GitHub.

How to run on your computer

Please be sure to have the following installed first:

• Node v12.19.*
• Angular CLI 11.2.*
• .Net 5

In the code downloaded, open the file api/Api/appsettings.Development.json and change the Data Source to point to your SQL Server:

Build the Api solution to make sure the NuGet packages are installed and the solution builds successfully.  The solution needs to be built successfully before you can run Entity Framework updates for the database.

Open the command prompt and navigate to api/Data, then run the command below which will update your Sql Server with the structure needed for the application:

You should now have a database named AngApiStarter with a table named Customers in the Sql Server.  You can insert a sample customer with sql below into the table:

Check that the API can get the data from the database by running the Api project and go to the url below, which should return the list of customers in the database:

Navigate to the ui folder in the command prompt and run the command below to get the libraries needed for running Angular:

If you get an error for modules not found, then you can run the command below to get the modules needed:

Start Angular by running the command below, which will start the server and open the application in the browser:

How the application was built

Starting with the data layer from the API, a class model for Customer was created:

Then the DbContext class for the Customer was created, using the Customer class as the DbSet which will ultimately become a table in the database:

In the Api project we then define the database connection string, and add the code below to the ConfigureServices method of the Startup.cs as shown below.  This is so that we can use the connection string defined in the Api project to create the database and table in Sql Server:

Build the solution, then using the command prompt navigate to the Data project folder and run the command below to create the classes for the database migration:

After the classes are created, run the command below to create the database and tables in Sql Server:

In the Data project it has the Interface and the implementation of the Interface using Entity Framework:

Now on to the Api project. In the Api project it defines the implementation class for the interface in the ConfigureServices method:

Then the controller to uses the interface by dependency injection:

Since the Api and the UI will be run from different website, it needs to allow the UI website to access the Api using CORS. In the Api’s appsettings.Development.json it has the UI’s url:

Then the CORS policy is specified in the Startup.cs file:

Now on to the UI project with Angular. Using the Getting Started project from Angular, the Angular Materials components are defined in the project under app/common/material.module.ts, where all the components are added so that you can use the components without explicitly adding it to app.module.ts.  Then in app.module.ts it just includes the Material module:

The location of the API url is defined in environments/environments.ts file:

The model is defined in model/ICustomer.ts file, with the same model signature as the API:

The support for interacting with the API is in service/customer.service.ts file.  It uses BehaviorSubject to make the list of customers as an Observable (you can think of it as a data stream).  When the Observable changes, all the Observers (you can think of it as listeners or subscribers) gets notified of the change and can react accordingly.  In the CustomerService class the customerList.next method is called when the Observable needs to notify all the Observers:

The Customer component, which shows the list of customers that you can manage, listens to the changes in the CustomerService class by subscribing to it in the ngOnInit method:

When the user clicks on the Add or Edit customer button, it opens a dialog which you can pass the data to the dialog, and define the action to take when the dialog is closed.  Below shows the data passed to the dialog when adding a new customer, and calling the CustomerService when the dialog is closed:

For editing customer, it needs to pass a copy of the customer data to the dialog instead of the actual customer data, so that if the user decided to cancel the customer values are not changed:

The dialog component is defined in app/customer/dialog/customer-dialog.component.ts, which accepts the caller’s data using MAT_DIALOG_DATA from Material’s Dialog component:

And that’s all. Hope you find it useful as a starting point for your projects.