< Angular

Laravel 8 backend

Szerző: Sallai András

Copyright © Sallai András, 2021, 2022

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

Bevezetés

Ebben a leírásban egy egyszerű Laravel projektet készítünk, ami egy tömböt ad át az Angular alkalmazásnak.

Backend

Projektek készítése

mkdir projekt01

Backend készítése:

cd projekt01
composer create-project laravel/laravel backend
ng new frontend

Útvonal beállítása

Az útválasztóban generálunk egy egyszerű tömböt, amely teendő azonosítót és teendő nevet tartalmaz. Szerkesszük a routes/api.php fájlt:

Route::get('tasks', function () { return response()->json( [ ['id' => 1, 'name' => 'Angular tanulás'], ['id' => 2, 'name' => 'Laravel tanulás'] ] ); });

A backend ezzel kész.

Frontend

HttpClientModule

A szolgáltatásban HttpClientModule-t fogjuk használni, ezért kezdjük ezzel.

Töltsük be a HttpClientModule nevű modult. Ehhez szerkesszük a src/app/app.module.ts fájt. Vegyük fel a következő import sort:

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

Regisztráljuk a modult:

imports: [ HttpClientModule ],

Szolgáltatás

A frontend oldalon egy szolgáltatást fogunk készíteni, meghívunk egy modult, és az alkalmazás főkomponens-vezérlőosztályát szerkesztjük.

Hozzuk létre a szolgáltatást:

ng generate service task

Létrejön a task.service.ts fájl. Szerkesszük:

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class TaskService { }

Vegyük használatba a HttpClient modult:

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

Egészítsük ki a TaskService osztályt:

//... export class TaskService { host: string = 'http://localhost:8000/api/'; constructor(private http: HttpClient) { } getTasks() { let endpoint: string = 'tasks'; let url = this.host + endpoint; return this.http.get<any>(url); } }

task komponens

ng generate component task

Vegyük használatba a TaskService osztályt. Szerkesszük az src/app/task/task.component.ts állományt. Elsőként importáljuk:

import { TaskService } from './task.service';

Majd használhatjuk:

//... export class TaskComponent implements OnInit { tasks: any; constructor(private taskService: TaskService) { } ngOnInit(): void { this.getTasks(); } getTasks() { this.taskService.getTasks().subscribe(tasks => { this.tasks = tasks; console.log(this.tasks); }); } }
<table> <tr *ngFor="let task of tasks"> <td>{{ task.id }}</td> <td>{{ task.name }}</td> </tr> </table>

A fő komponensben vegyük fel a task komponenst:

<app-task></app-task>

Működés

Indítsuk el a backendet. A backend könyvtáron belül:

php artisan serve

Indítsuk el a frontendet. A frontend könyvtáron belül:

ng server -o

A backend a 8000 porton érhető el. Írjuk be a /api/tasks útvonalat:

localhost:8000/api/tasks

Látnunk kell a tömböt.

A frontend a 4200 porton fut. Írjuk a böngészőbe:

localhost:4200

Az eredményt nézzük meg a böngészőben és annak fejlesztői felületén.

F12

Linkek

Van, aki a Laravelt és az Angulart jobban „összevarja”:

https://medium.com/swlh/how-to-setup-laravel-with-angular-d3de171afa03 (2021)