The main objectives of this article:
Update the 'student.ts' model
In the next article, we will implement the 'Create', 'Update', and 'Delete' operations in both API and angular projects.
- Create StudentController In API Project
- HTTP Get Action Method In API Project(Read Operation)
- Create Student Component In Angular Application.
- Create Student Model In Angular Application.
- Add A Student Service And Invoke GET Student API In Angular Application.
- Bind API Response In Student Component In Angular Application.
- Fix Cross-Origin Issue.
Create StudentController In API Project:
A controller is an entity or class that contains logical methods or function that gets executed for an HTTP request from the clients.
So let's create the 'StudentController' in API Project.
API_Project/Controllers/StudentController.cs:
using Microsoft.AspNetCore.Mvc; using Student.Api.Data; namespace Student.Api.Controllers; [ApiController] [Route("[controller]")] public class StudentController: ControllerBase { private readonly MyWorldDbContext _myWorldDbContext; public StudentController(MyWorldDbContext myWorldDbContext) { _myWorldDbContext = myWorldDbContext; } }
- (Line: 6) The 'ApiController' attribute applies all roles and rules of API.
- (Line: 7) Defined the attribute routing, the '[controller]' is an expression that specifies the path of API is the name of the controller excluding the word 'controller' from it.
- (Line: 8) To make our 'StudentConroller' class as API then it must inherit the 'Microsoft.AspNetCore.Mvc.ControllerBase'.
- (LIne: 10-14) Our database context is injected into the controller constructor.
HTTP Get Action Method In API Project:
In an API action method is logic unit gets executed for HTTP requests and that method server's response to the user.
Let's implement the read operation(fetching data) by adding the HTTP Get action method.
API_Project/Controllers/StudentController.cs:
[HttpGet] public async Task<IActionResult> Get() { var students = await _myWorldDbContext.Student.ToListAsync(); return Ok(students); }
- Here no explicit route is defined because in a controller if we define a single action method for each HTTP method (GET, POST, PUT, DELETE) then no need to define the route. But if we have to define multiple action methods of the same HTTP methods then we have to define the route explicitly.
- (Line: 1) Defined the action method type as 'HTTPGet'.
- (Line: 2-6) Defined the asynchronous 'Get' action method.
- (Line: 4) Fetching the collection of 'Student' from the database using entity framework core with Linq extension method.
Create Student Component In Angular Application:
Let's create a 'student' component in the angular application.
ng g component student --skip-tests
The 'student' component reference was added to the 'AppModule'.
Create A Student Model In Angular Application:
Let's create a 'Student' model in the angular application which for to represent the API response type.
ng g class student/student --skip-tests
Angular_Project/src/app/student/student.ts:
export interface Student { id: number; name: string; age: number; gender: string; }
Add A Student Service And Invoke GET Student API In Angular Application:
In angular application API, calls will be added in the 'Service' files. So let's add the 'student.service.ts' file.
ng g service student/student --skip-tests
Angular_Project/src/app/student/student.service.ts:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { Student } from './student'; @Injectable({ providedIn: 'root' }) export class StudentService { constructor(private httpClient:HttpClient) { } get(){ return this.httpClient.get<Student[]>("https://localhost:7007/student") } }
- (Line: 5) The 'Injectable' decorator makes service to inject in our angular components.
- (Line: 9) Injects the 'HttpClient' instance that loads from the '@angular/common/http'.
- (Line: 12) Invoking the 'Student' API.
Angular_Project/src/app/app.module.ts:
import { HttpClientModule } from '@angular/common/http'; // code hidden for display purpose @NgModule({ imports: [HttpClientModule] }) export class AppModule {}
- (Line: 4) Imported the 'HttpClientModule' from the library '@angular/common/http'.
Bind API Response In Student Component In Angular Application:
In the 'student.component.ts' file let's invoke the API call and then bind the response to the 'student.component.html' file.
Angular_Project/src/app/student/student.component.ts:
import { Component, OnInit } from '@angular/core'; import {Student} from './student'; import { StudentService } from './student.service'; @Component({ selector: 'app-student', templateUrl: './student.component.html', styleUrls: ['./student.component.css'] }) export class StudentComponent implements OnInit { students:Student[] = []; constructor(private studentService:StudentService) { } ngOnInit(): void { this.get(); } get(){ this.studentService.get() .subscribe({ next:(data) => { this.students = data; }, error:(err) => { console.log(err); } }) } }
- (Line: 6) To make a typescript as a component it should be decorated with a 'Component' decorator that loads from the '@angular/core'.
- (Line: 7) The 'selector' value will be used as an HTML element tag to render the component.
- (Line: 8) The 'templateUrl' value will be the path of the component HTML file.
- (Line: 9) The 'styleUrls' value will be the path of the component Style file.
- (Line: 12) Declared the 'student' of type 'Student' array, this variable will be used in the component HTML file.
- (Line: 13) Injected the 'StudentService'.
- (Line: 15-17) The 'ngOnInit()' is a lifecycle method that gets executed one time on component renders. To use 'ngOnInit()' method our component class must implement 'OnInIt'.
- (Line: 19-29) Defined method a method 'get()' where we invoke our student API.
- (Line: 23) Assigning the API response to the 'students' variable.
<table class="table"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Name</th> <th scope="col">Age</th> <th scope="col">Gender</th> </tr> </thead> <tbody> <tr *ngFor="let sd of students"> <th scope="row">{{sd.id}}</th> <td>{{sd.name}}</td> <td>{{sd.age}}</td> <td>{{sd.gender}}</td> </tr> </tbody> </table>
- In angular one-way data binding can be done with '{{}}' is called interpolation.
- An array of data can be rendered in angular by iterating them with the help of 'ngFor'.
- (Line: 11) Iterating our collection of data in the 'students' variable to render.
- (Line: 12-15) Binding each property of an object using interpolation technique.
Now render the student component in 'app.component.html' file.
Angular_Project/src/app/app.component.html:
<app-student></app-student>
Fix Cross-Origin Issue:
Now run both our API and angular application and check the output.
Here you can observe that API failed due to a 'CORS error'. So cors happen when the domain of the API and client(eg: angular application) are different. So to fix this issue in our API project we have to enable the cors.API_Project/Program.cs:
builder.Services.AddCors(options => { options.AddPolicy("Cors", p => { p.AllowAnyHeader() .AllowAnyMethod() .AllowAnyOrigin(); }); });
- Here registered the 'AddCors' service where we allow all the 'headers', 'methods', 'any origin'.
API_Project/Program.cs:
app.UseCors("Cors");
- Configure 'UseCors' middleware above the 'UseHttpsRedirection' middleware.
Hopefully, I think this article delivered some useful demo on .NET6 API and Angular application. using I love to have your feedback, suggestions, and better techniques in the comment section below.
Refer:
Part-3 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-5 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Part-5 A CRUD Operation Demo With .NET6 Web API | SQL Database | Angular13
Comments
Post a Comment