• Szerző: Sallai András
• Copyright © Sallai András, 2021, 2022
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

mkdir projekt01

Backend készítése:

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

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:

routes/api.php

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

A backend ezzel kész.

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
  ],

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:

src/app/todo.service.ts

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:

src/app/shared/task.service.ts

//...
 
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);
  }
}

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:

src/app/task/task.component.ts

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

Majd használhatjuk:

src/app/task/task.component.ts

//...
 
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);
    });
  }
}

src/app/task/task.component.html

<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:

src/app/app.component.html

<app-task></app-task>

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

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

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