HttpService in Angular Framework

HttpService in Angular Framework:-

It is used to handle HttpRequest from external resources and fetch, post, update and delete from external resources .we will create web API or web services to get data from a remote server, web services, and web API will be consumed by HttpService in Angular Framework.


Web Services will be created by Server side script such as Java, PHP,.NET, PYTHON, Ruby, etc, and Consumed by Angular HTTP Service.


in Angular (currently on Angular-17) .subscribe() is a method on the Observable type. The Observable type is a utility that asynchronously or synchronously streams data to a variety of components or services that have subscribed to the observable.


Step to implement Services:-

1)  go into app.module.ts file and register httpService provider

import { provideHttpClient } from '@angular/common/http';

providers: [

    provideClientHydration(),

    provideHttpClient()

  ]

2)  create service class using  this command :-  ng g s  Servicename

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({

  providedIn: 'root'

})

export class PostService {

  private url = 'http://jsonplaceholder.typicode.com/posts';

  constructor(private httpClient: HttpClient) { }

  getPosts(){

    return this.httpClient.get(this.url);

  }

}

3) create component and Inject PostService

ng g c access-url

Code of Component:-

import { Component } from '@angular/core';

import { PostService } from '../post.service';

@Component({

  selector: 'app-access-url',

  templateUrl: './access-url.component.html',

  styleUrl: './access-url.component.css'

})

export class AccessUrlComponent {

  posts:any;

 

  constructor(private service:PostService) {}

  ngOnInit() {

    this.service.getPosts()

      .subscribe(response => {

        this.posts = response;

      });

}

}

Code of Design File of Access Component

<p>access-url works!</p>

<ul class="list-group">

    <li

        *ngFor="let post of posts"

        class="list-group-item">

        {{ post.title }}

    </li>

  </ul>

Call Access-url component selector under app component.

...................................................

How to consume ASP.NET WEB API under Angular Application:-

1)  Create ASP.NET Core Web API based Project

2)  Create API otherwise .NET Core provide weatherapi by default

3)  Manage Cors Services under Program.js file, first install Cors library under .NET Core Application.

dotnet add package Microsoft.AspNetCore.Cors

 builder.Services.AddCors(options =>

            {

                options.AddPolicy("AllowSpecificOrigin",

                    builder => builder

                        .WithOrigins("http://localhost:4200") // Update with your Angular app's origin

                        .AllowAnyMethod()

                        .AllowAnyHeader());

            });

app.UseCors("AllowSpecificOrigin");