ASP.NET Web API With Angular Front End Code Generation

Introduction

This tutorial provides instructions on generating source code using Asp.Net, Angular, SQL Server, and CreaCodex. You will create two fully integrated projects based on a SQL Server database. By the end of the tutorial, you will have two projects with their complete source code: one for your Asp.Net Web API and another for your Angular app.

Limitations and Restrictions

Please note that this tutorial is not designed for beginners in Microsoft .Net or Angular and requires prior knowledge of programming concepts and programming with C#, SQL Server, and Angular. Additionally, you must be familiar with the Microsoft .Net development environment.

Prerequisites

To execute all the steps in this tutorial, it is important to have the latest versions of the following development tools installed on your computer:

• Microsoft Visual Studio
• Microsoft Visual Studio Code
• Microsoft SQL Server Management Studio
• Angular
• Node JS
• Beyond Compare (or any other file comparison tool)
• SendGrid account (optional)
• CreaCodex account (Create a free account by signing up here)

Configure your CreaCodeX Account

First, you must create an account on CreaCodeX to access all the available tools. If you already have an account, please log in and continue with Create a New Project step.

1. Go to https://app.creacodex.com/

2. Click on Register

3. Please enter your information on the Register page and click Register.

4. Check your email; your inbox should have a confirmation email.

5. Open it and follow the link to confirm your email, then on the confirmation page, click Ok.

6. On the Login page, enter your information and click Login.

Create a new Project

1. On CreaCodeX Dashboard, click Create a new project.

2. Add the components that your project needs and then click Next.

3. On the page Project Details, enter your project information as follows:

Project Name- LightningFastApp

Description- LightningFastApp project using CreaCodeX

Version- 1.0

Database Name- LightningFast

4. And then click Next.

5. On the page Checkout, confirm your information and then click Next.

Download and install CreaCodeX App

If you are on the Project Created confirmation page, you can Download and install CreaCodeX App to start coding.

If not, you can go to CreaCodeX Dashboard, click Download and install CreaCodeX App.

Create a new SQL Server Database

Using Microsoft SQL Server Management Studio, create a new SQL Server database with the same database name that you entered in the Project Details page and add.Base at the end (ex. LightningFast.Base).

Important. CreaCodeX App uses your-database-name.Base database name to generate the source code. Once you run the Web API in Visual Studio your-database-name database is going to be created in SQL Server.

Using SQL Server Management Studio

1. In Object Explorer, connect to an instance of the SQL Server Database Engine and then expand that instance.

2. Right-click Databases, and then select New Database.

3. In New Database, enter a database name: LightningFast.Base.

4. Select OK to create the database by accepting all default values.

5. In a New Query, create a new table called Clients with the following script:

USE [LightningFast.Base]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Clients](
  [Id] [uniqueidentifier] NOT NULL,
  [BirthdayDate] [datetime2](7) NULL,
  [FirstName] [varchar](100) NOT NULL,
  [LastName] [varchar](100) NOT NULL,
  [Email] [varchar](200) NOT NULL,
  [Phone01] [varchar](20) NULL,
  [WebSite] [varchar](200) NULL,
  [IsActive] [bit] NOT NULL,
  [StartDate] [datetime2](7) NOT NULL,
  [UpdateDate] [datetime2](7) NOT NULL,
  [IsDeleted] [bit] NOT NULL,
  [DeleteDate] [datetime2](7) NULL,
  CONSTRAINT [PK_Clients] PRIMARY KEY CLUSTERED
(
  [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
       ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

Open CreaCodeX App

1. After opening CreaCodeX App enter your user and password and click Login.

2. Double-click on the project you just created from the list with all your projects to open it.

3. In the Build Project window, enter the info of your SQL Server where your database is.

4. Click the Build button (lightning icon) and wait for the source code to be generated.

5. The source code of your project is going to be generated in %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp

6. There you are going to find 2 folders: ..\CS folder for the Microsoft .Net Web API source code and ..\Angular folder for Angular source code

Open and configure the Microsoft .Net Web API code

Go to %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp\CS\WebAPI folder and open API.sln file in Visual Studio.

Update your default values in the appsettings.json or appsettings.Development.json file of the WebApi project with the following:

ConnectionStrings

DefaultConnection = Data Source=.;Initial Catalog=LightningFast;MultipleActiveResultSets=true;Trusted_Connection=True;

JwtToken

Issuer = LightningFastApp

Audience = https://lightningfastapp.com/

SecretKey = Any-Random-Long-String (ex. a GUID value 00000000-0000-0000-0000-000000000000)

ExpiresIn = any values in minutes (ex: 1440)

Email (optional)

SendGridKey = Your-SendGrid-Key

SendGridUser = Your-SendGrid-User

Identity UserAccounts

FirstName = Your-Admin-Name

LastName = Your-Admin-Last-Name

Email = [e-mail]

Password = strong-password

RoleName = Administrator

In Visual Studio, open the Package Manager Console window (Menu -> View -> Other Windows -> Package Manager Console).

In the Default Project dropdown, select Repository Project.

Add your first database migration with Add-Migration AddFirstMigration and then Update-Database.

Run your project by clicking the Start Debugging button or by pressing F5.

Keep handy your Web API URL (ex. https://localhost:44360/api/v1; it is required to run your Angular project.

Open and configure the Angular App source code

In Visual Studio Code, open %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp\Angular\client folder.

Open a new Terminal Window (Menu -> Terminal -> New Terminal) and switch to the Command Prompt profile instead of Powershell.

Install all Angular packages by running the command: npm install

Execute the app by running the command: ng serve

In a web browser, go to http://localhost:4200/

Enter the admin credentials you configure in the appsettings.json file of the Web API project.

Explore the app that you just created.

Update your project with more tables

Now that you have created your first Microsoft .Net Web API + Angular application, it's time to add more tables to explore other capacities of CreaCodeX, like understanding tables relationship and more.

Copy your code to your repo.

Copy your generated code to another folder to avoid your custom code being overwritten.

In your File Explorer, create a new folder (ex. ..\Repos\LightningFastApp\WebAPI) to copy your recently generated C# source code from %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp\CS\WebAPI.

Create a second folder (ex. ..\Repos\LightningFastApp\WebApp) to copy your recently generated Angular source code from %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp\CS\WebAPI.

Optional: Upload your source code to a repository like GitHub or Bitbucket to avoid losing your changes.

Add more tables to the database

Let's explore how CreaCodeX can identify the relationship between different modules of your project by creating Deliveries, ShippingType, and CarrierType tables in your database.

Back to SQL Server Management Studio, please execute in a New Query the following t-script that is going to create Deliveries, ShippingType, and CarrierType tables and set the relationship between them:

USE [LightningFast.Base]
GO

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[CarrierType](
  [Id] [uniqueidentifier] NOT NULL,
  [Name] [varchar](20) NOT NULL,
  [IsVisible] [bit] NOT NULL,
  CONSTRAINT [PK_CarrierType] PRIMARY KEY CLUSTERED 
(
  [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Id'
, @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',
@level1name=N'CarrierType', @level2type=N'COLUMN',@level2name=N'Id'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Carrier Type',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'CarrierType',
@level2type=N'COLUMN',@level2name=N'Name'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Is Visible'
, @level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'CarrierType',
@level2type=N'COLUMN',@level2name=N'IsVisible'
GO


CREATE TABLE [dbo].[ShippingType](
  [Id] [uniqueidentifier] NOT NULL,
  [Name] [varchar](20) NOT NULL,
  [IsVisible] [bit] NOT NULL,
  CONSTRAINT [PK_ShippingType] PRIMARY KEY CLUSTERED 
(
  [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Id' , @level0type=N'SCHEMA',
@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ShippingType', @level2type=N'COLUMN',
@level2name=N'Id'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Shipping Type',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ShippingType',
@level2type=N'COLUMN',@level2name=N'Name'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Is Visible',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'ShippingType',
@level2type=N'COLUMN',@level2name=N'IsVisible'
GO



CREATE TABLE [dbo].[Deliveries](
  [Id] [uniqueidentifier] NOT NULL,
  [Reference] [int] NOT NULL,
  [StartDate] [datetime] NOT NULL,
  [UpdateDate] [datetime] NULL,
  [ShippingTypeId] [uniqueidentifier] NOT NULL,
  [CarrierTypeId] [uniqueidentifier] NULL,
  [DeliveryDate] [datetime] NOT NULL,
  [Quantity] [int] NOT NULL,
  [Price] [decimal](28, 13) NOT NULL,
  [Discount] [decimal](5, 2) NULL,
  [AcceptConditions] [bit] NOT NULL,
  CONSTRAINT [PK_Deliveries] PRIMARY KEY CLUSTERED 
(
  [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON,
ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

ALTER TABLE [dbo].[Deliveries]  WITH CHECK ADD  CONSTRAINT [FK_Deliveries_CarrierType]
FOREIGN KEY([CarrierTypeId])
REFERENCES [dbo].[CarrierType] ([Id]) ON DELETE CASCADE
GO

ALTER TABLE [dbo].[Deliveries] CHECK CONSTRAINT [FK_Deliveries_CarrierType]
GO

ALTER TABLE [dbo].[Deliveries]  WITH CHECK ADD  CONSTRAINT [FK_Deliveries_ShippingType]
FOREIGN KEY([ShippingTypeId])
REFERENCES [dbo].[ShippingType] ([Id]) ON DELETE CASCADE
GO

ALTER TABLE [dbo].[Deliveries] CHECK CONSTRAINT [FK_Deliveries_ShippingType]
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Id' , @level0type=N'SCHEMA',
@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries', @level2type=N'COLUMN',
@level2name=N'Id'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Reference',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'Reference'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Start Date',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'StartDate'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Update Date',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'UpdateDate'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Shipping Type',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'ShippingTypeId'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Carrier Type',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'CarrierTypeId'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Delivery Date',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'DeliveryDate'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Quantity',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'Quantity'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Price',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'Price'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Discount',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'Discount'
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Accept Conditions',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'AcceptConditions'
GO

In the Database Diagrams of your database, please create a new database diagram and add all the tables, then save it with the name DbDiagram. Check that all the tables are now related except for the Clients table.

Generate the code of the modifications

If you already have CreaCodeX App opened on the Build Project window, please build your project by clicking the Build button (lightning icon) and waiting for the source code to be generated.

If not, just open CreaCodeX App -> open LightningFastApp project -> Build the project.

Your project's source code will be generated in %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp.

Integrate the modifications in your code

In Visual Studio, stop debugging your Web API project.

It's important to verify that all the modifications done by CreaCodeX are integrated to avoid compilation errors or unexpected behaviors. Let's use Beyond Compare (or your preferred file comparison tool) to first integrate the new changes in your code and second to identify the modifications made by CreaCodeX. This technique will help you avoid overwriting customs modifications and speed up your coding process.

Starting with your Web API project, open Beyond Compare and set up on one side your repository folder (ex. ..\Repos\LightningFastApp\WebAPI) and on the other side the folder created by CreaCodeX %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp\CS\WebAPI.

Add the following filters -*.\bin\;-*.\obj\;-.\.vs\ to Beyond compare to exclude unnecessary folders.

Integrate the new changes into your code by copying the new files into your destination folder and updating existing files with the newly generated source code. Please check the Model folder, Repository\Context folder, Repository\Interface folder, Repository folder, WebApi\Controller\Dto folder, and WebApi\Controller folder code modifications.

In Visual Studio, open the Package Manager Console window (Menu -> View -> Other Windows -> Package Manager Console).

In the Default Project dropdown, select Repository project.

Add your second database migration with the following command: Add-Migration AddDeliveriesTables and then the command: Update-Database.

If there is any error, please check that you have integrated all the modifications in your code and try again.

Run your project by clicking the Start Debugging button or by pressing F5.

Check Swagger

Now let's repeat the same steps for your Angular project

In Visual Studio Code, stop your Angular project.

In Beyond Compare, set up on one side your repository folder (ex. ..\Repos\LightningFastApp\WebApp\client) and the other side the folder created by CreaCodeX %userprofile%\Documents\CreaCodeX\Projects\LightningFastApp\Angular\client.

Add the following filters -.dist;-.\node_modules\;-.\e2e\ to Beyond compare to exclude unnecessary folders.

Integrate your code the new changes by copying the new files into your destination folder and by updating existing files with the newly generated source code; please check the src\app folder.

Back in Visual Studio Code in the Terminal Window (Menu -> Terminal -> New Terminal), execute the app by running the command: ng serve

If there is any error, please check that you have integrated all the modifications in your code and try again.

In a web browser, go to http://localhost:4200/ or refresh the web browser if the web app is already open.

Explore the app that you just updated.

Add a relationship between the Clients table and the Delivery table

In this last part, we will add a relationship between the Clients table and the Deliveries table in your database, as we did in the previous steps of this tutorial.

Back to Microsoft SQL Server Management Studio, please execute in a New Query the following t-script that will create the relationship between the two tables.

USE [LightningFast.Base]
GO

ALTER TABLE [dbo].[Deliveries] ADD [ClientId] [uniqueidentifier] NOT NULL
GO

ALTER TABLE [dbo].[Deliveries]  WITH CHECK ADD  CONSTRAINT [FK_Deliveries_Clients]
FOREIGN KEY([ClientId])
REFERENCES [dbo].[Clients] ([Id]) ON DELETE CASCADE
GO

ALTER TABLE [dbo].[Deliveries] CHECK CONSTRAINT [FK_Deliveries_Clients]
GO

EXEC sys.sp_addextendedproperty @name=N'MS_Description', @value=N'Client',
@level0type=N'SCHEMA',@level0name=N'dbo', @level1type=N'TABLE',@level1name=N'Deliveries',
@level2type=N'COLUMN',@level2name=N'ClientId'
GO

In CreaCodeX App, please build the project and then use Beyond Compare to integrate your changes as we did in the step Integrate the modifications in your code.

Note: don't forget to stop Microsoft Visual Studio and don't forget to migrate your database; additionally, don't forget to stop Visual Studio Code too.

Once all your modifications are included in your code, please Run your Web API project and run your Angular web app, refresh your web browser, and check for the results.

It is your role as a software developer to implement the custom logic about how the application will handle the integration between the Clients module, Deliveries module, and any other module that your application requires. For instance, how much information do you want to display in the web app? Do you want to add the Client's Addresses table to your database? How the interaction or navigation between modules is going to be?

We recommend you include this incremental modification process into your software development life cycle to speed up the development of your project's POCs and MVPs until you reach your users' and customers' expected outcomes.