Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:angular:angular_httpclient:dolgozok [2023/02/21 11:50] – [Angular HttpClient - Dolgozók] admin
+++ oktatas:web:angular:angular_httpclient:dolgozok [2025/03/02 13:40] (aktuális) – eltávolítva admin
@@ Sor 1: / Sor 1: @@
-[[oktatas:web:angular:angular httpclient|< Angular httpclient]]
-====== Angular HttpClient - Dolgozók ======
-  * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2022, 2023
-  * 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 dolgozók adatait fogjuk kezelni, a teljes **CRUD** műveleteket
-megvalósítva, **azonosítással**. A megvalósításhoz szükséges egy REST API kiszolgáló.
-===== Backend oldal =====
-Szükségünk van egy REST API szerverre, a következő végpontokkal.
-Ennek elkészítését lásd [[oktatas:web:back-end_framework:laravel:laravel_api|Laravel API leírásban]]
-^  Végpont  ^  Metódus  ^  Auth  ^  CRUD  ^  Leírás  ^
-| /employees  | GET | nem  | read | összes dolgozó |
-| /employees  | POST | igen  | create | új dolgozó |
-| /employees/{id}  | GET | nem  | read | egy dolgozó |
-| /employees/{id}  | PUT | igen  | update  | dolgozó frissítése |
-| /employees/{id}  | DELETE  | igen  | delete  | dolgozó törlése  |
-| /register  | POST | nem | n/a | regisztráció  |
-| /login  | POST | nem | n/a | belépés  |
-| /logout  | POST  | nem | n/a  | kilépés  |
-==== GitHub-on ====
-A backend elérhető a GitHubon a következő címen:
-  * https://github.com/oktat/emp.git
-Beüzemelés a projekt docs könyvtárában.
-===== REST API kliens =====
-==== Projekt készítése ====
-Készítsünk egy angular projektet:
-  ng new app01
-Kérjünk router szolgáltatást.
-Lépjünk be, majd indítsunk kódszerkesztőt.
-  cd app01
-  code .
-===== Azonosítás =====
-==== Szükséges modul ====
-<code javascript src/app/app.module.ts>
-import { HttpClientModule } from '@angular/common/http';
-//...
-imports: [
-    HttpClientModule
-],
-</code>
-==== Szolgáltatás létrehozása  ====
-Készítsünk egy szolgáltatást, auth néven:
-  ng generate service shared/auth
-Létrejön két fájl:
-  * src/app/shared/auth.service.ts
-  * src/app/shared/auth.service.spec.ts
-Importáljuk a HttpClient és HttpHeaders osztályokat:
-<code javascript>
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-</code>
-<code javascript>
-host = 'http://localhost:8000/api/';
-</code>
-A konstruktorba paraméterként vegyük fel a http objektumot:
-<code javascript>
-  constructor(private http: HttpClient) { }
-</code>
-A login() metódus:
-<code javascript>
-  login(user: string, pass: string) {
-    const authData = {
-      name: user,
-      password: pass
-    }
-    let httpHeaders = new HttpHeaders();
-    httpHeaders.set('Content-Type', 'application/json');
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'login';
-    let url = this.host + endpoint;
-    return this.http.post<any>(url, authData, httpOptions);
-  }
-</code>
-==== Reaktív űrlap ====
-<code javascript src/app/app.module.ts>
-import { ReactiveFormsModule } from '@angular/forms';
-//...
-  imports: [
-    ReactiveFormsModule
-  ],
-//...
-</code>
-==== A login komponens ====
-Készítsük el az employee komponenst:
-  ng generate component login
-Elsőként importáljuk az AuthService osztályt:
-<code javascript src/app/login/login.component.ts>
-//...
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { AuthService } from '../shared/auth.service';
-//...
-</code>
-Injektáljuk és használjuk:
-<code javascript>
-//...
-export class LoginComponent implements OnInit {
-  loginForm !: FormGroup;
-  constructor(
-    private auth: AuthService,
-    private formBuilder: FormBuilder
-      ) { }
-  ngOnInit(): void {
-    this.loginForm = this.formBuilder.group({
-      user: [''],
-      pass: ['']
-    });
-  }
-  login() {
-    let user = this.loginForm.value.user;
-    let pass = this.loginForm.value.pass;
-    this.auth.login(user, pass).subscribe({
-      next: data => {
-        localStorage.setItem('userData', JSON.stringify(data));
-      },
-      error: err => {
-        console.log('Hiba! A belépés sikertelen!')
-      }
-    });
-  }
-}
-</code>
-A válasz részletezése:
-<code javascript>
-      console.log(res.name);
-      console.log(res.token);
-</code>
-<code html src/app/login/login.component.html>
-<h3>Belépés</h3>
-<form [formGroup]="loginForm" (submit)="login()">
-    <div class="mb-3">
-      <label for="user" class="form-label">Felhasználónév</label>
-      <input type="text" class="form-control" id="user"
-      formControlName="user">
-    </div>
-    <div class="mb-3">
-      <label for="pass" class="form-label">Jelszó</label>
-      <input type="pass" class="form-control" id="exampleInputPassword1"
-      formControlName="pass">
-    </div>
-    <button type="submit" class="btn btn-primary">Belépés</button>
-  </form>
-</code>
-==== Az app.component ====
-<code html src/app/app.component.html>
-<ul>
-  <li>
-    <a routerLink="/employees">Dolgozók</a>
-  </li>
-  <li>
-    <a routerLink="/login">Login</a>
-  </li>
-</ul>
-<router-outlet></router-outlet>
-</code>
-==== Routing ====
-<code javascript>
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { LoginComponent } from './login/login.component';
-const routes: Routes = [
-  { path: 'login', component: LoginComponent}
-];
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
-</code>
-===== Kilépés =====
-==== Az auth bővítése ====
-<code javascript src/app/shared/auth.service.ts>
-//...
-  logout(name: string, token: string) {
-    const userData = {
-      name: name,
-      tokenId: token
-    }
-    let httpHeaders = new HttpHeaders();
-    httpHeaders.set('Content-Type', 'application/json');
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'logout';
-    let url = this.host + endpoint;
-    console.log(userData.name)
-    return this.http.post<any>(url, userData, httpOptions);
-  }
-</code>
-<code html src/app/app.component.html>
-<ul>
-  <li>
-    <a routerLink="/employees">Dolgozók</a>
-  </li>
-  <li>
-    <a routerLink="/login">Login</a>
-  </li>
-</ul>
-<button (click)="logout()">Kilépés</button>
-<router-outlet></router-outlet>
-</code>
-<code javascript src/app/app.component.ts>
-import { Component } from '@angular/core';
-import { AuthService } from './shared/auth.service';
-//...
-export class AppComponent {
-  title = 'app01';
-  constructor(private auth: AuthService) {}
-  logout() {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    console.log(userData.name);
-    console.log(userData.token);
-    this.auth.logout(userData.name, userData.token).subscribe({
-      next: res => {
-        console.log(res)
-      }
-    });
-  }
-}
-</code>
-===== Összes dolgozó =====
-^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
-|  /employees  | GET | nem  | Read  |
-==== Modul regisztrálása ====
-Szükségünk van a HttpClientModule nevű modulra.
-Ha megcsináltuk az azonosítást, akkor ez kihagyható:
-<code javascript src/app/app.module.ts>
-import { HttpClientModule } from '@angular/common/http';
-//...
-imports: [
-    HttpClientModule
-],
-</code>
-==== Szolgáltatás létrehozása ====
-Készítsünk egy szolgáltatást, api néven:
-  ng generate service shared/api
-Létrejön két fájl:
-  * src/app/shared/api.service.ts
-  * src/app/shared/api.service.spec.ts
-Az api.service.ts fájlba írjuk a szolgáltatást. Az api.service.spec.ts a teszt az előbbi állomány számára.
-Vegyük az api.service.ts fájl, majd importáljuk a HttpClient:
-<code javascript src/app/shared/api.service.ts>
-import { HttpClient } from '@angular/common/http';
-</code>
-A konstruktorba paraméterként vegyük fel a http objektumot:
-<code javascript src/app/shared/api.service.ts>
-  constructor(private http: HttpClient) { }
-</code>
-Hozzuk létre a host adattagot és a getEmployees() metódust:
-<code javascript src/app/shared/api.service.ts>
-//...
-  host = 'http://localhost:8000/api/';
-//...
-  getEmployees() {
-    let endpoint = 'employees';
-    let url = this.host + endpoint;
-    return this.http.get<any>(url);
-  }
-</code>
-==== Employee komponense ====
-  ng generate component employee
-Szerkesszük az **src/app/employee/employee.component.ts** fájlt.
-  * Importáljuk az **ApiService** osztályt.
-  * Hozzunk létre egy **employees** adattagot.
-  * Injektáljuk az **ApiService** osztályt.
-  * Írjunk egy **getEmployees()** metódust.
-  * Hívjuk meg a getEmployees() metódust a **ngOnInit()** metódusban.
-<code javascript src/app/employee/employee.component.ts>
-import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../shared/api.service';
-@Component({
-  selector: 'app-employee',
-  templateUrl: './employee.component.html',
-  styleUrls: ['./employee.component.css']
-})
-export class EmployeeComponent implements OnInit {
-  employees: any;
-  constructor(private api: ApiService) { }
-  ngOnInit(): void {
-    this.getEmployees();
-  }
-  getEmployees() {
-    this.api.getEmployees().subscribe({
-      next: data => {
-        this.employees = data;
-      },
-      error: err => {
-        console.log('Hiba! A dolgozók letöltése sikertelen!');
-      }
-    });
-  }
-}
-</code>
-==== Sablonfájl ====
-<code html src/app/employee/employee.component.html>
-<p>Dolgozók</p>
-<table>
-    <thead>
-        <tr>
-            <th>Id</th>
-            <th>Név</th>
-            <th>Település</th>
-            <th>Fizetés</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let employee of employees">
-            <td>{{ employee.id }}</td>
-            <td>{{ employee.name }}</td>
-            <td>{{ employee.city }}</td>
-            <td>{{ employee.salary }}</td>
-        </tr>
-    </tbody>
-</table>
-</code>
-==== Routing újra ====
-<code javascript>
-const routes: Routes = [
-  { path: 'login', component: LoginComponent},
-  { path: 'employees', component: EmployeeComponent}
-];
-</code>
-===== Dolgozó hozzáadása =====
-==== Backend ====
-Backend oldalon van egy /api/employees végpontunk, ahol POST metódussal
-új dolgozókat vehetünk fel.
-^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
-|  /employees  | POST | igen  | Create  |
-==== Szükséges modul ====
-Ha még nincs regisztrálva az src/app/app.module.ts fájlban a HttpClientModule,
-akkor tegyük meg.
-<code javascript src/app/app.module.ts>
-import { HttpClientModule } from '@angular/common/http';
-//...
-imports: [
-    HttpClientModule
-],
-</code>
-==== Szolgáltatás létrehozása  ====
-Ha még nem létezik, hozzuk létre az api szolgáltatást:
-  ng generate service shared/api
-Importáljuk a HttpClient és HttpHeaders osztályokat:
-<code javascript src/app/shared/api.service.ts>
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-//...
-</code>
-A konstruktorba paraméterként vegyük fel a http objektumot, ha még nincs felvéve:
-<code javascript src/app/shared/api.service.ts>
-//...
-  constructor(private http: HttpClient) { }
-//...
-</code>
-Hozzuk létre a addEmployee() metódust:
-<code javascript src/app/shared/api.service.ts>
-//...
-  addEmployee(employee: any) {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    let httpHeaders = new HttpHeaders()
-    .set('Authorization', `Bearer ${userData.token}`);
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'employees';
-    let url = this.host + endpoint;
-    return this.http.post<any>(url, employee, httpOptions);
-  }
-</code>
-==== Employee komponens hozzáadással ====
-Reaktív űrlapot fogunk használni, ezért importáljuk a FormBuilder és a FormGroup osztályt, az **src/app/employee/employee.component.ts** fájlban:
-<code javascript>
-import { FormBuilder, FormGroup } from '@angular/forms';
-</code>
-Az EmployeeComponent osztályban vegyük fel a következő
-adattagokat, és injektáljuk FormBuilder osztályt:
-<code javascript>
-export class EmployeeComponent implements OnInit {
-  employees: any;
-  addForm !: FormGroup;
-  addPanel: boolean = false;
-  constructor(
-    private api: ApiService,
-    private formBuilder: FormBuilder
-    ) { }
-//...
-</code>
-Az ngOnInit() függvényben készítsük elő az űrlapot:
-<code javascript>
-  ngOnInit(): void {
-    this.getEmployees();
-    this.addForm = this.formBuilder.group({
-      name: [''],
-      city: [''],
-      salary: ['']
-    });
-  }
-</code>
-Írjunk itt is egy addEmployee() metódust, ami az api szolgáltatás
-addEmployee() metóudásával dolgozik.
-<code javascript>
-  addEmployee() {
-    let employee = {
-      name: this.addForm.value.name,
-      city: this.addForm.value.city,
-      salary: this.addForm.value.salary,
-    }
-    this.api.addEmployee(employee).subscribe({
-      next: res => {
-        console.log(res)
-        this.employees.push(res);
-      }
-    });
-  }
-</code>
-A hozzáadó űrlap megjelenítéséhez, rejtéséhez
-készítsünk egy showAddPanel() metódust:
-<code javascript>
-  showAddPanel() {
-    this.addPanel = true;
-  }
-</code>
-==== Az employee komponens sablonja ====
-Adjuk meg a fájl elején egy gombot, a végéhez pedig fűzzünk egy űrlapot:
-<code html src/app/employee/employee.component.html>
-<!-- ... -->
-<button (click)="showAddPanel()">Hozzáad</button>
-<!-- ... -->
-<div *ngIf="addPanel">
-<form [formGroup]="addForm" (submit)="addEmployee()">
-    <div>
-        <label for="name">Név</label>
-        <input type="text" id="name" formControlName="name">
-    </div>
-    <div>
-        <label for="city">Település</label>
-        <input type="text" id="city" formControlName="city">
-    </div>
-    <div>
-        <label for="salary">Fizetés</label>
-        <input type="text" formControlName="salary">
-    </div>
-    <button type="submit">Mentés</button>
-</form>
-</div>
-</code>
-A "Hozzáad" gomb a táblázat előtt, az űrlap a táblázat után.
-===== Dolgozók törlése =====
-^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
-|  /employees/{id}  | DELETE | igen  | Delete  |
-==== api.service ====
-Az api szolgáltatás bővítése delEmployee() metódussal,
-a **src/app/shared/api.service.ts** fájlban:
-<code javascript src/app/shared/api.service.ts>
-//...
-  delEmployee(id: number) {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    let httpHeaders = new HttpHeaders()
-    .set('Authorization', `Bearer ${userData.token}`);
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'employees';
-    let url = this.host + endpoint + '/' + id;
-    return this.http.delete<any>(url, httpOptions);
-  }
-</code>
-==== Az employees komponens ====
-Az employee komponensben is megírjuk a delEmployee() metódust:
-<code javascript src/app/employee/employee.component.ts>
-//...
-  delEmployee(employee: any) {
-    this.api.delEmployee(employee.id).subscribe({
-      next: res => {
-        console.log(res);
-        this.employees.forEach( (emp: any, index: number) => {
-          if (emp.id === employee.id ) {
-            this.employees.splice(index, 1)
-          }
-        })
-      }
-    });
-  }
-</code>
-==== Employee komponens sablonja ====
-Fel kell vennünk egy új táblázatelemet a **src/app/employee/employee.component.html** fájlban:
-<code html>
-            <td>
-                <button (click)="delEmployee(employee)">Törlés</button>
-            </td>
-</code>
-A teljes táblázat így néz ki:
-<code html>
-<table>
-    <thead>
-        <th>Id</th>
-        <th>Név</th>
-        <th>Település</th>
-        <th>Fizetés</th>
-    </thead>
-    <tbody>
-        <tr *ngFor="let employee of employees">
-            <td>{{ employee.id }}</td>
-            <td>{{ employee.name }}</td>
-            <td>{{ employee.city }}</td>
-            <td>{{ employee.salary }}</td>
-            <td>
-                <button (click)="delEmployee(employee)">Törlés</button>
-            </td>
-        </tr>
-    </tbody>
-</table>
-</code>
-===== Dolgozók szerkesztése =====
-^  Végpont  ^  Metódus  ^  Azonosítás  ^ CRUD  ^
-|  /employees/{id}  | PUT | igen  | Update  |
-==== ApiService ====
-Szükség van egy updateEmployee() metódusra:
-<code javascript src/api/shared/api.service.ts>
-//...
-  updateEmployee(employee: any) {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    let httpHeaders = new HttpHeaders()
-    .set('Authorization', `Bearer ${userData.token}`);
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'employees';
-    let url = this.host + endpoint + '/' + employee.id;
-    return this.http.put<any>(url, employee, httpOptions);
-  }
-</code>
-==== EmployeeComponent ====
-Szükség van két új adattagra az EmployeeComponent osztályban:
-<code javascript>
-  editPanel: boolean = false;
-  editForm !: FormGroup;
-</code>
-Az ngOnInit() metódusban inicializálni kell az editForm objektumot:
-<code javascript>
-    //...
-    this.editForm = this.formBuilder.group({
-      id: [''],
-      name: [''],
-      city: [''],
-      salary: ['']
-    });
-</code>
-Kell egy metódus, ami megjeleníti a szerkesztő felületet:
-<code javascript>
-  showEdit(employee: any) {
-    this.editForm.patchValue({id: employee.id});
-    this.editForm.patchValue({name: employee.name});
-    this.editForm.patchValue({city: employee.city});
-    this.editForm.patchValue({salary: employee.salary});
-    this.editPanel = true;
-  }
-</code>
-Kell egy metódus amit frissíti az adatokat:
-<code javascript>
-  updateEmployee() {
-    let employee = {
-      id: this.editForm.value.id,
-      name: this.editForm.value.name,
-      city: this.editForm.value.city,
-      salary: this.editForm.value.salary
-    }
-    this.api.updateEmployee(employee).subscribe({
-      next: res => {
-        console.log(res);
-        this.editPanel = false;
-        this.getEmployees();
-      }
-    });
-  }
-</code>
-==== Az employee sablon ====
-Fűzzük az employee.component.html végéhez:
-<code html src/app/employee/employee.component.html>
-//...
-<div *ngIf="editPanel">
-    <form [formGroup]="editForm" (submit)="updateEmployee()">
-        <div>
-            <label for="id">Id</label>
-            <input type="text" id="id" formControlName="id">
-        </div>
-        <div>
-            <label for="name">Név</label>
-            <input type="text" id="name" formControlName="name">
-        </div>
-        <div>
-            <label for="city">Település</label>
-            <input type="text" id="city" formControlName="city">
-        </div>
-        <div>
-            <label for="salary">Fizetés</label>
-            <input type="text" formControlName="salary">
-        </div>
-        <button type="submit">Mentés</button>
-    </form>
-</div>
-</code>
-==== Teljes kód ====
-<tabbox app.module.ts>
-<code javascript src/app/app.module.ts>
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { LoginComponent } from './login/login.component';
-import { ReactiveFormsModule } from '@angular/forms';
-import { EmployeeComponent } from './employee/employee.component';
-@NgModule({
-  declarations: [
-    AppComponent,
-    LoginComponent,
-    EmployeeComponent
-  ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    HttpClientModule,
-    ReactiveFormsModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-</code>
-<tabbox app.component.ts>
-<code javascript src/app/app.component.ts>
-import { Component } from '@angular/core';
-import { AuthService } from './shared/auth.service';
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
-})
-export class AppComponent {
-  title = 'app01';
-  constructor(private auth: AuthService) {}
-  logout() {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    console.log(userData.name);
-    console.log(userData.token);
-    this.auth.logout(userData.name, userData.token).subscribe({
-      next: res => {
-        console.log(res)
-      }
-    });
-  }
-}
-</code>
-<tabbox app.component.html>
-<code html src/app/app.component.html>
-<ul>
-  <li>
-    <a routerLink="/employees">Dolgozók</a>
-  </li>
-  <li>
-    <a routerLink="/login">Login</a>
-  </li>
-</ul>
-<button (click)="logout()">Kilépés</button>
-<router-outlet></router-outlet>
-</code>
-<tabbox app-routing.module.ts>
-<code javascript src/app/app-routing.module.ts>
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { EmployeeComponent } from './employee/employee.component';
-import { LoginComponent } from './login/login.component';
-const routes: Routes = [
-  { path: 'login', component: LoginComponent},
-  { path: 'employees', component: EmployeeComponent}
-];
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
-})
-export class AppRoutingModule { }
-</code>
-<tabbox auth.service.ts>
-<code javascript src/app/shared/auth.service.ts>
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-@Injectable({
-  providedIn: 'root'
-})
-export class AuthService {
-  host = 'http://localhost:8000/api/';
-  constructor(private http: HttpClient) { }
-  login(user: string, pass: string) {
-    const authData = {
-      name: user,
-      password: pass
-    }
-    let httpHeaders = new HttpHeaders();
-    httpHeaders.set('Content-Type', 'application/json');
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'login';
-    let url = this.host + endpoint;
-    return this.http.post<any>(url, authData, httpOptions);
-  }
-  logout(name: string, token: string) {
-    const userData = {
-      name: name,
-      tokenId: token
-    }
-    let httpHeaders = new HttpHeaders();
-    httpHeaders.set('Content-Type', 'application/json');
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'logout';
-    let url = this.host + endpoint;
-    console.log(userData.name)
-    return this.http.post<any>(url, userData, httpOptions);
-  }
-}
-</code>
-<tabbox api.service.ts>
-<code javascript src/app/shared/api.service.ts>
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-@Injectable({
-  providedIn: 'root'
-})
-export class ApiService {
-  host = 'http://localhost:8000/api/';
-  constructor(private http: HttpClient) { }
-  getEmployees() {
-    let endpoint = 'employees';
-    let url = this.host + endpoint;
-    return this.http.get<any>(url);
-  }
-  addEmployee(employee: any) {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    let httpHeaders = new HttpHeaders()
-    .set('Authorization', `Bearer ${userData.token}`);
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'employees';
-    let url = this.host + endpoint;
-    return this.http.post<any>(url, employee, httpOptions);
-  }
-  delEmployee(id: number) {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    let httpHeaders = new HttpHeaders()
-    .set('Authorization', `Bearer ${userData.token}`);
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'employees';
-    let url = this.host + endpoint + '/' + id;
-    return this.http.delete<any>(url, httpOptions);
-  }
-  updateEmployee(employee: any) {
-    let jsonUserData: any = localStorage.getItem('userData');
-    let userData = JSON.parse(jsonUserData);
-    let httpHeaders = new HttpHeaders()
-    .set('Authorization', `Bearer ${userData.token}`);
-    const httpOptions = {
-      headers: httpHeaders
-    }
-    let endpoint = 'employees';
-    let url = this.host + endpoint + '/' + employee.id;
-    return this.http.put<any>(url, employee, httpOptions);
-  }
-}
-</code>
-<tabbox login.component.ts>
-<code javascript src/app/login/login.component.ts>
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { AuthService } from '../shared/auth.service';
-@Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
-})
-export class LoginComponent implements OnInit {
-  loginForm !: FormGroup;
-  constructor(
-    private auth: AuthService,
-    private formBuilder: FormBuilder
-      ) { }
-  ngOnInit(): void {
-    this.loginForm = this.formBuilder.group({
-      user: [''],
-      pass: ['']
-    });
-  }
-  login() {
-    let user = this.loginForm.value.user;
-    let pass = this.loginForm.value.pass;
-    this.auth.login(user, pass).subscribe({
-      next: data => {
-        localStorage.setItem('userData', JSON.stringify(data));
-      },
-      error: err => {
-        console.log('Hiba! A belépés sikertelen!')
-      }
-    });
-  }
-}
-</code>
-<tabbox login.component.html>
-<code html src/app/login/login.component.html>
-<p>Belépés</p>
-<form [formGroup]="loginForm" (submit)="login()">
-    <div>
-        <label>Felhasználónév</label>
-        <input type="text" formControlName="user">
-    </div>
-    <div>
-        <label>Jelszó</label>
-        <input type="password" formControlName="pass">
-    </div>
-    <button type="submit">Belépés</button>
-</form>
-</code>
-<tabbox employee.component.ts>
-<code javascript src/app/employee/employee.component.ts>
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { ApiService } from '../shared/api.service';
-@Component({
-  selector: 'app-employee',
-  templateUrl: './employee.component.html',
-  styleUrls: ['./employee.component.css']
-})
-export class EmployeeComponent implements OnInit {
-  addPanel: boolean = false;
-  editPanel: boolean = false;
-  employees: any;
-  addForm !: FormGroup;
-  editForm !: FormGroup;
-  constructor(
-    private api: ApiService,
-    private formBuilder: FormBuilder
-    ) { }
-  ngOnInit(): void {
-    this.getEmployees();
-    this.addForm = this.formBuilder.group({
-      name: [''],
-      city: [''],
-      salary: ['']
-    });
-    this.editForm = this.formBuilder.group({
-      id: [''],
-      name: [''],
-      city: [''],
-      salary: ['']
-    });
-  }
-  getEmployees() {
-    this.api.getEmployees().subscribe({
-      next: data => {
-        this.employees = data;
-      },
-      error: err => {
-        console.log('Hiba! A dolgozók letöltése sikertelen!');
-      }
-    });
-  }
-  addEmployee() {
-    let employee = {
-      name: this.addForm.value.name,
-      city: this.addForm.value.city,
-      salary: this.addForm.value.salary,
-    }
-    this.api.addEmployee(employee).subscribe({
-      next: res => {
-        console.log(res)
-        this.employees.push(res);
-      }
-    });
-  }
-  showAddPanel() {
-    this.addPanel = true;
-  }
-  delEmployee(employee: any) {
-    this.api.delEmployee(employee.id).subscribe({
-      next: res => {
-        console.log(res);
-        this.employees.forEach( (emp: any, index: number) => {
-          if (emp.id === employee.id ) {
-            this.employees.splice(index, 1)
-          }
-        })
-      }
-    });
-  }
-  showEdit(employee: any) {
-    this.editForm.patchValue({id: employee.id});
-    this.editForm.patchValue({name: employee.name});
-    this.editForm.patchValue({city: employee.city});
-    this.editForm.patchValue({salary: employee.salary});
-    this.editPanel = true;
-  }
-  updateEmployee() {
-    let employee = {
-      id: this.editForm.value.id,
-      name: this.editForm.value.name,
-      city: this.editForm.value.city,
-      salary: this.editForm.value.salary
-    }
-    this.api.updateEmployee(employee).subscribe({
-      next: res => {
-        console.log(res);
-        this.editPanel = false;
-        this.getEmployees();
-      }
-    });
-  }
-}
-</code>
-<tabbox employee.component.html>
-<code html src/app/employee/employee.component.html>
-<p>Dolgozók</p>
-<button (click)="showAddPanel()">Hozzáad</button>
-<table>
-    <thead>
-        <th>Id</th>
-        <th>Név</th>
-        <th>Település</th>
-        <th>Fizetés</th>
-    </thead>
-    <tbody>
-        <tr *ngFor="let employee of employees">
-            <td>{{ employee.id }}</td>
-            <td>{{ employee.name }}</td>
-            <td>{{ employee.city }}</td>
-            <td>{{ employee.salary }}</td>
-            <td>
-                <button (click)="delEmployee(employee)">Törlés</button>
-            </td>
-            <td>
-                <button (click)="showEdit(employee)">Szerkesztés</button>
-            </td>
-        </tr>
-    </tbody>
-</table>
-<div *ngIf="addPanel">
-    <form [formGroup]="addForm" (submit)="addEmployee()">
-        <div>
-            <label for="name">Név</label>
-            <input type="text" id="name" formControlName="name">
-        </div>
-        <div>
-            <label for="city">Település</label>
-            <input type="text" id="city" formControlName="city">
-        </div>
-        <div>
-            <label for="salary">Fizetés</label>
-            <input type="text" formControlName="salary">
-        </div>
-        <button type="submit">Mentés</button>
-    </form>
-</div>
-<div *ngIf="editPanel">
-    <form [formGroup]="editForm" (submit)="updateEmployee()">
-        <div>
-            <label for="id">Id</label>
-            <input type="text" id="id" formControlName="id">
-        </div>
-        <div>
-            <label for="name">Név</label>
-            <input type="text" id="name" formControlName="name">
-        </div>
-        <div>
-            <label for="city">Település</label>
-            <input type="text" id="city" formControlName="city">
-        </div>
-        <div>
-            <label for="salary">Fizetés</label>
-            <input type="text" formControlName="salary">
-        </div>
-        <button type="submit">Mentés</button>
-    </form>
-</div>
-</code>
-</tabbox>
-===== Függelék =====
-==== HttpHeaders változatok ====
-A httpHeaders objektum így is létrehozható:
-<code javascript>
-const httpHeaders = new HttpHeaders()
-    .set('Content-Type', 'application/json');
-</code>
-<code javascript>
-    const httpHeaders = new HttpHeaders({
-      'Content-Type': 'application/json'
-    });
-</code>
-==== Lekérés azonosítással ====
-Ha védett lenne a dolgozók lekérése, akkor
-a tokent is el kellene küldenünk a lekéréskor:
-Hozzuk létre a getEmployees() metódust:
-<code javascript src/app/shared/auth.service.ts>
-  getEmployees() {
-    let url = 'http://localhost:8000/api/employees';
-    let token = '3|7eBr5iAUPgqQz3lxIFgC72Yh3ERO76g1MyuHNOGD';
-    let header = {
-      headers: new HttpHeaders()
-        .set('Authorization', `Bearer ${token}`)
-    }
-    return this.http.get<any>(url, header);
-  }
-</code>