Inviare richieste POST in Angular

Tempo fa scrissi un articolo che riguardava lo stesso argomento, ma su una versione vecchia di Angular; e tra l'altro mi ero ripromesso di riscriverlo.

E quindi eccoci qua; cominciamo col creare un service per le richieste:

$ ng generate service jhttp

Verrà creato il file jhttp.service.ts.

Nel mio caso specifico il file contiene questo:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class JhttpService {

  private baseUrl = 'http://www.sito.it/api/';

  constructor(private http: HttpClient) { }

  login(email, password) {
    var loginUrl = this.baseUrl + "user/login?";
    this.http.post(
      loginUrl,
      {
        'email': email,
        'password': password
      }
    ).subscribe(
      res => {
        console.log(res);
      }, err => {
        console.log(err);
      }
    )
  }
}

Questo service dovete registrarlo in tutti i componentin cui dovete eseguire richieste; quindi nel mio login.component.ts avrò una cosa del genere:

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { MessageService } from 'primeng/api';
import { JhttpService } from '../jhttp.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [MessageService]
})

export class LoginComponent implements OnInit {

  userform: FormGroup;
  submitted: boolean;
  description: string;

  constructor(
    private titleService: Title,
    private fb: FormBuilder,
    private messageService: MessageService,
    private jhttpService: JhttpService
  ) { }

  ngOnInit() {
    this.titleService.setTitle('Login');
    this.userform = this.fb.group({
      'username': new FormControl('', Validators.required),
      'password': new FormControl('', Validators.required)
    });
  }

  onSubmit(value: string) {
    this.jhttpService.login(this.userform.value.username, 
                this.userform.value.password);
  }
}

Dovete considerare che io sto usando PrimeNG; quindi copiatevi il necessario per voi.

Comunque potete vedere che in alto richiamiamo il service creato precedentemente.

Giusto per completezza vi metto anche il form, che si trova nel file login.component.html:

<p-toast [style]="{marginTop: '80px'}"></p-toast>

<form [formGroup]="userform" (ngSubmit)="onSubmit(userform.value)">
  <div class="p-grid p-justify-center">
    <div class="p-col-4">
      <div class="boX">
        <p-panel header="Justy Login">
          <div class="p-grid p-justify-center">
            <div class="p-col-4">
              Username *:
            </div>
            <div class="p-col-8">
              <input pInputText type="text" formControlName="username">
            </div>
            <div class="p-col-4">
              Password *:
            </div>
            <div class="p-col-8">
              <input pInputText type="password" formControlName="password">
            </div>
            <div class="p-col-12">
              <button pButton type="submit" label="Login" styleClass="ui-button-info"></button>
            </div>
          </div>
        </p-panel>
      </div>
    </div>
  </div>
</form>

Enjoy!