Tempo di lettura: 75 minuti
Angular e Laravel: utilizzare il servizio HTTP per collegarsi all’END POINT
Per poter collegare le applicazioni Angular a fonti esterne abbiamo bisogno di importare il servizio HTTP .
Aprite innanzitutto il file app.module.ts ed importate il servizio:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavComponent } from './shared/nav/nav.component';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { ContactComponent } from './components/contact/contact.component';
import { HomeAdminComponent } from './admin/home-admin/home-admin.component';
import { ListAdminComponent } from './admin/list-admin/list-admin.component';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
NavComponent,
HomeComponent,
AboutComponent,
ContactComponent,
HomeAdminComponent,
ListAdminComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
ho inserito nella lista degli imports HttpClientModule, quindi l’ho importato:
...
import {HttpClientModule} from '@angular/common/http';
...
Angular:crea il Service ed una classe model
In Angular è buona norma delegare il compito di interrogare gli END POINT ad un service, per cui creiamolo:
ng g s services/user
bene lo abbiamo creato all’interno della directory services (creata in automatico mediante il comando sopra 🙂 ).
Visto che ci siamo realiziamo una classe per tipizzare i dati,questo non è obbligatorio ma è una best practice in Angular per evitare errori nell’inserire tipi di dati diversi nelle proprietà ed avere un intellisense nell’ide che ci aiuta quando questi sono in tanti.
Da terminale:
ng g cl models/user
questa creata all’interno della directory models.
Apritela:
export class User {
}
molto semplice, quindi aggiungiamo:
export class User {
constructor(
public id: string,
public email: string,
public name: string,
public password: string
) {
}
}
come si può notare ho semplicemente tipizzato i dati.
Aggiungi la chiamata al service
Aprite il service services/user.services.ts e digitate:
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {User} from '../models/user';
const API = `http://127.0.0.1:8000/api/v1/users`;
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
// VISUALIZZARE LA LISTA USER
getUsers(): Observable<User> {
return this.http.get<User>(API);
}
}
ho valorizzato la costante API con il link che punta al nostro END POINT, quindi inietto nel costruttore il modulo HttpClient valorizzandolo nella proprietà http.
Realizzo il metodo getUsers() il quale riceve un dato asincrono, quindi osservabile di tipo User(il nostro model) e ritorno la lista grazie al metodo get (di lettura).
Ricordatevi di importare {Observable} da ‘rxjs’, {HttpClient} da ‘ @angular/common/http’ ed {User} da ‘../models/user’.
Visualizza la lista degli utenti
La lista degli utenti sarà visualizzata nel componente admin/list-admin.component.ts per cui apritelo e modificate:
import {Component, OnInit} from '@angular/core';
import {UserService} from '../../services/user.service';
import {User} from '../../models/user';
@Component({
selector: 'app-list-admin',
template: `
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-lg-auto">
<h1>ADMIN LIST</h1>
</div>
</div>
</div>
`,
styles: [
`
h1 {
color: orange;
font-size: 15vh;
font-family: 'Big Shoulders Inline Text', cursive;
}
`
]
})
export class ListAdminComponent implements OnInit {
users: User;
constructor(private userService: UserService) {
}
// LETTURA DATI
getUser(): any {
return this.userService.getUsers()
.subscribe(res => {
this.users = res;
console.log(this.users);
});
}
ngOnInit(): void {
this.getUser();
}
}
Innanzi tutto inietto nel costruttore il nostro service UserService valorizzandolo in userService, dichiaro la proprietà users di tipo User. Realizzo il metodo getUser che si iscriverà all’Observable e valorizzo users con i dati ricevuti facendoli visualizzare al momento mediante un console.log.
Inizializzo il metodo in ngOnInit (metodo ciclo di vita di un componente, il quale si avvia subito dopo il costruttore, ne parleremo in seguito).
Aggiungiamo la rotta nell’app.routing.module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AboutComponent} from './components/about/about.component';
import {ContactComponent} from './components/contact/contact.component';
import {HomeComponent} from './components/home/home.component';
import {ListAdminComponent} from './admin/list-admin/list-admin.component';
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full'},
{path: 'home', component: HomeComponent},
{path: 'about', component: AboutComponent},
{path: 'contact', component: ContactComponent},
{path: 'admin/users', component: ListAdminComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
ora se cliccate su http://localhost:4200/admin/users:
grandi!! Dati ricevuti con successo, il che vuol dire che anche i CORS funzionano correttamente 🙂 🙂
Proviamo a visualizzarli a video, riaprite il component admin/lista-admin.component ed aggiungete:
...
<pre>{{users | json}}</pre>
...
subito dopo il :
<div class="row">
utilizzo il metodo dell’interpolazione, cioè le doppie parentesi graffe che mi consentono di leggere il contenuto di una proprietà. Il pipe e json mi ritorna il dato in formato json.
Bhe una volta testato potete eliminare :
<pre>{{users | json}}</pre>
