[[oktatas:web:angular|< Angular]]

====== Laravel 8 backend ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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 ====


<code bash>
mkdir projekt01
</code>


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:


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


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:

<code javascript>
import { HttpClientModule } from '@angular/common/http';

</code>


Regisztráljuk a modult:
<code javascript>
  imports: [
    HttpClientModule
  ],
</code>



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

<code javascript src/app/todo.service.ts>
import { Injectable } from '@angular/core';

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

}

</code>

Vegyük használatba a HttpClient modult:
<code javascript>
import { HttpClient } from '@angular/common/http';

</code>


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

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



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

<code javascript src/app/task/task.component.ts>
import { TaskService } from './task.service';
</code>


Majd használhatjuk:
<code javascript 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);
    });
  }
}
</code>


<code javascript src/app/task/task.component.html>
<table>
    <tr *ngFor="let task of tasks">
        <td>{{ task.id }}</td>
        <td>{{ task.name }}</td>
    </tr>
</table>
</code>

A fő komponensben vegyük fel a task komponenst:
<code html5 src/app/app.component.html>
<app-task></app-task>
</code>


===== 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)