Easy To Learn .NET 6.0 And Angular - Getting Started Angular Template

Good day all this time I have planned to publish .NET 6.0 and Angular series of articles. In this series, I have planned to publish articles like

• Easy to learn .NET 6.0 and Angular - Getting Started Angular Template – Part 1
• Easy to learn .NET 6.0 and Angular - Getting Started Angular Standalone Template – Part 2
• Easy to learn .NET 6.0 and Angular - Getting Started Admin LTE Design – Part 3
• Easy to learn .NET 6.0 and Angular - Getting Started Multi Language – Part 4
• Easy to learn .NET 6.0 and Angular - Getting Started Publish to IIS – Part 5
• Easy to learn .NET 6.0 and Angular - Getting Started WEB API – Part 6
• Easy to learn .NET 6.0 and Angular - Getting Started WEB API CRUD SQL SERVER – Part 7

Introduction

In this article, we will see in detail how to get started with the .NET 6.0 and Angular using the Angular Template which is available in Visual Studio 2022.

.NET 6.0 has more improvement on the performance which includes on major advantage as it has intelligent code editing and also it is called the fastest full stack web framework. The .NET 6.0 also provides better performance in the File Stream.

When you create a new Angular Template project using Visual Studio 2022 you can notice as the Asp.NET Core 6.0 and Angular 13 version has been used as both .NET6.0 and Angular 13 is new versions and surely it will be quite interesting and fun to learn and work with new things.

 Prerequisites

• Visual Studio 2022
• Node.js – If you don’t have Node.js install Node.js (Download link).

Visual Studio 2022

If you have not yet installed Visual Studio 2022 then you can download the Visual studio 2022 from this link and install it on your computer.

Download and install the Visual Studio 2022.

Note: The Community version is free for all and you can download the community version as if you don’t have the Installation Key, if you have the Installation key or have the MSDN subscription then you can download the Professional or Enterprise version.

As a Microsoft MVP I have the MSDN subscription and I have installed the Professional version.

Create ASP.NET Core with Angular Template

After installing all the prerequisites listed above and click Start >> Programs >> Visual Studio 2022 >> Visual Studio 2022 on your desktop. Click New >> Project.

Search for Angular Template and Select ASP.NET Core with Angular and click Next.

Enter your project name and click Next.

Now we can see as the Framework is .NET 6.0(Long term support). Click on the Create button.

When we create the project, we can see the Solution structure like below.

Here we can see few interesting and new files has been added and we can also see as here in Visual Studio there is no Startup.cs file which was the main class for the Asp.NET Core projects in 2019 versions.

Visual Studio 2019 with Startup.cs

If you had worked with the ASP.NET MVC and ASP.NET Core you might be aware about the Startup.cs class. As this class is very main class for all the .NET and .NET Core applications. This Startup.cs class contains configure and configureService methods.

As this class is used to register all our services which our application is needed in ConfigureService and the configure methods used as the middleware pipeline for controlling the application.

Visual Studio 2022 does not need the Startup.cs

When we create ASP.NET Core 6.0 and Angular Application the Startup.cs class file will be missing. Yes, now all the Configure and ConfigureService related services will be added to the Program.cs file.

For example, if we need to add the connection string and need to add the DBContext means then we can add it to the Program.cs file with builder.Service.AddDbContext() . To add all the services we can use the builder object as we can see for adding the DBContext service we use the builder.Service.AddDbContext().

We can see that as there is no main method, class and using headers in the program.cs file, don’t panic, yes now in the .NET 6.0 the codes are made simpler and the intelligent code supports seem to be more advanced and now it’s easier and reduces the time on working our codes and projects.

Top-Level statements

This is called as the Top-Level statements as the main method is not needed from the C# 9. The main aim of the Top-Level statement is to reduce the code and improve the performance, The main method and the class will be created by the compiler as we no need to write separate code for it.

New Angular Files Part

aspnetcore-https.js

This JavaScript file set up the HTTPS for the application which is targeted to use the ASP.NET Core HTTPS certificates.

proxy.conf.js

This JavaScript file is used to add our HTTPs ports, WEB API URL as target and in the context, we will be adding all our controller and methods to get access in the angular application.

Build and Run the Application

When we run the application, we can see by default the home. Counter and Fetch data components has been added to menu and we can navigate to each menu and see the component results.

Current Month Item Wise Sales Details Making

Now let’s make a simple WEB API controller to get the Item Sales details.

Creating Model Class

For this first we need to add the class file to create our Model Class. Right click the project and click > Add > New Item. Select Class and name it as ItemDetails.cs and click add.

In the class add property variables like below code.

public class ItemDetails {
    public String ItemCode {
        get;
        set;
    }
    public int SaleCount {
        get;
        set;
    }
}

Creating API Controller Class

Right click Controllers folder and click > Add > Controller. Select API > Select API Controller – Empty and click Add

Give the empty API Controller name as ItemDetailsController.cs and click Add.

In the controller we add Get Method which will create random 10 item code along with random Sale count value range from 20 to 100.

[ApiController]
[Route("[controller]")]
public class ItemDetailsController: ControllerBase {
    private readonly ILogger < ItemDetailsController > _logger;
    public ItemDetailsController(ILogger < ItemDetailsController > logger) {
            _logger = logger;
        }
        [HttpGet(Name = "GetItemDetails")]
    public IEnumerable < ItemDetails > Get() {
        var rng = new Random();
        int ivale = 0;
        return Enumerable.Range(1, 10).Select(index => new ItemDetails {
            ItemCode = "ITM_" + rng.Next(1, 100),
                SaleCount = rng.Next(20, 100),
        }).ToArray();;
    }
}

This is first article in this series, later when we use the SQL Server for CRUD then we can see more in detail as to how actually the real world examples work.

Angular Part

Here I use the default home Angular components to update for showing the Item details with sale count.

home Component

In the home component I have updated the code by adding the HTTPClient import part also Inject import part.

Then I create the interface with ItemDetails as same we created in Model class.

In the Constructor method using the http.get method we get the API JSON results and bind it to the itemsdetails to display the results in the HTML page.

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})

export class HomeComponent {
  public itemsdetails: ItemDetails[] = [];
  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<ItemDetails[]>(baseUrl + 'ItemDetails').subscribe(result => {
      this.itemsdetails = result;
    }, error => console.error(error));
  }
}
interface ItemDetails {
  itemCode: string;
  saleCount: number;
}

home.component.html

In the HTML add the below code to display the results of ItemCode and salescount from API.

<h1>Current Month Item wise Sales Details</h1>
<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="itemsdetails">
  <thead>
    <tr>
      <th>Item Code</th>
      <th>Sales Count</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let itemdetail of itemsdetails">
      <td>{{ itemdetail.itemCode }}</td>
      <td>{{ itemdetail.saleCount }}</td>
    </tr>
  </tbody>
</table>

Build and Run

Build and run the application. In the Home page we can see the result like below and you can notice as we are not able to see the Item Details and sale count values. This is because we didn’t add yet the controller class and method in the proxy.config.js file. In order to use the WEB API in Angular App we need to add the WEB API Controller and methods in Proxy.config.js context array.

You can see from the below image now we have added our controller named as ItemDetails in the proxy.config.js file context array.

Run the application to see the result. Now we can see as our WEB API results has been binded in our home page with Item Code and Sales Count.

Conclusion

Hope this article helps to understand on getting started with ASP.NET Core and Angular using Visual Studio 2022. In the next part, we will see more in detail on how to using the ASP.NET Core for creating the Standalone Angular application.