szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:angular|< Angular]]

====== Angular Zöld Zrt ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Bevezetés  =====

Zold alkalmazás létrehozása, a virtuális Zöld Zrt, számára.


===== Projekt készítése =====

  ng new zold
  cd zold

Az alkalmazásunk váz részét a src/app alkönyvtárban találjuk.


===== Az alkalmazás szolgáltatása =====

Ha nem vagyunk belépve a projekt könyvtárába lépjünk be, majd:
  ng serve --open

Az ng serve <nowiki>--open</nowiki> kapcsolója automatikusan 
megnyitja böngészőben, a 4200-s porton.

  http://localhost:4200/

===== Angular komponensek =====

A komponensek az Angular alapvető építőkövei. 
Gondoskodnak az adatok megjelenítéséről, figyelik
a felhasználói bevitelt, majd ezek alapján tevékenységeket
kezdeményeznek. 

Az alapkomponensek a következő részekből állnak:
  * app.component.ts - a komponens osztálya, TypeScriptben írva.
  * app.component.html - a komponens sablonja, HTML-ben írva.
  * app.component.css - a komponens privát CSS része.
  
  
==== Alkalmazás címének cseréje ====

Nyissuk meg az app.component.ts fájlt, majd állítsuk be a címet:

<code javascript app.component.ts>
title = 'Zöld Zrt';
</code>



Az app.component.html fájlt nyissuk meg, és töröljük
a generált tartalmat. Írjuk bele a következőt:

<code html app.component.html>
<h1>{{title}}</h1>
</code>



==== Stílus hozzáadása ====

Adjunk az alkalmazásunknak egy kevés stílust. 

Szerkesszük az src/style.css fájlt.

<code css src/style.css>
h1 {
    background-color: dodgerblue;
    padding: 20px;
    font-family:Arial, Helvetica, sans-serif;
    border-radius: 5px;
}
</code>

===== A dolgozó neve =====

A dolgozókat angolosan employee rövidítésével
fogjuk megadni: empl.

Készítsünk egy empl nevű komponenst.

  ng generate component empl

A parancs hatására, létrejön egy src/app/empl nevű könyvtár.
Négy fájl generálódik. 


Az Empl komponens osztály állománya a következő:

<code javascript empl.component.ts>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-empl',
  templateUrl: './empl.component.html',
  styleUrls: ['./empl.component.css']
})
export class EmplComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}
</code>



A Component dekorátor függvény meghatározza az Angular metaadatait
a komponens számára. Alapértelmezetten három metaadat tulajdonság
generálódik:
  * selector - CSS elem szelektora
  * templateUrl - a sablon fájl elérése
  * styleUrls - a privát CSS fájl elérése


Az ngOnInit() egy olyan metódus, amely a komponens létrehozása
során lefut. 

A komponens osztály mindig exportálva van, így felhasználható
máshol.


Hozzunk létre az Empl komponensünk számára egy az 
EmplComponent osztályban egy employee tulajdonságot. 

<code javascript>
employee = 'Penge Béla';
</code>


A dolgozó megjelenítéséhez szerkesszük a Empl komponens
sablonállományát, jelenítsük meg a dolgozót. 

<code html>
<p>{{employee}}</p>
</code>


Hogy lássuk a tartalmat, helyezzük el az alkalmazás sablonján 
a komponenst. Emlékezzünk, hogy a Empl komponens szelektora 
app-empl. Ennek megfelelően a következőt írjuk az 
src/app/app.component.html fájlba:

<code html>
<h1>{{title}}</h1>
<app-empl></app-empl>
</code>

Nézzük meg az eredményt.


===== Empl interfész =====

Egy dolgozónak több tulajdonsága is van, a nevén kívül.
Az egyszerűség kedvéért legyen most azonosító, név és
fizetés.

Készítsünk egy ilyen interfészt, az src/app könyvtárban.

<code javascript src/app/empl.ts>
export interface Empl {
    id: number;
    name: string;
    salary: number;
}
</code>

Most menjünk az Empl komponensünk osztályához vissza,
majd importáljuk a Empl interfészt:

<code javascript>
import { Empl } from '../empl';
</code>

Az employee tulajdonság legyen Empl típusú:

<code javascript>
employee: Empl = {
    id: 1,
    name: 'Penge Béla',
    salary: 3800000
};
</code>


Javítsuk az Empl komponens sablonját. 

<code html>
<p>{{employee.id}}</p>
<p>{{employee.name}}</p>
<p>{{employee.salary}}</p>
</code>

===== A dolgozó űrlap =====

Az űrlap használatához szükségünk van egy modulra. 
Nyissuk meg az app.module.ts fájlt. Importáljuk a FormsModule modult.


<code javascript>
import { FormsModule } from '@angular/forms'; 
</code>




Vegyük fel az imports nevű tömbbe a FormsModule modult is:

<code javascript>
  imports: [
    BrowserModule,
    FormsModule
  ],

</code>


Készítsük el az űrlapot:
<code html>
<div>
    <label for="employeeName">Név</label>
    <input id="employeeName" [(ngModel)]="employee.name" placeholder="név">
    <br>
    <label for="employeeSalary">Fizetés</label>
    <input id="employeeSalary" [(ngModel)]="employee.salary" placeholder="fizetés">

</div>
</code>

===== Lista megjelenítése =====

Hozzunk létre egy új mock állományt:

<code javascript src/app/mock-employees.ts>
import { Empl } from './empl';

export const EMPLOYEES: Empl[] = [
    { id: 1,  name: 'Páros Emese',    salary: 3800500 },
    { id: 2,  name: 'Tornyos Péter',  salary: 2800500 },
    { id: 3,  name: 'Regős Ilona',    salary: 3200000 },
    { id: 4,  name: 'Rétes László',   salary: 3100000 },
    { id: 5,  name: 'Fontos Katalin', salary: 2950000 },
    { id: 6,  name: 'Árva Ferenc',    salary: 3300500 },
    { id: 7,  name: 'Lengő Tibor',    salary: 3500000 },
    { id: 8,  name: 'Fejtős Aladár',  salary: 3400500 },
    { id: 9,  name: 'Remete Zoltán',  salary: 3500500 }
];

</code>



Importáld a Empl komponensben a mock fájlt.

<code javascript>
import { EMPLOYEES } from '../mock-employees';
</code>


Hozz létre egy új tulajdonságot, employees néven:

<code javascript>
export class EmplComponent Implements OnInit {
    employees = EMPLOYEES;
}
</code>


A *ngFor segítségével listázzuk a dolgozókat. 


<code html>
<table>
    <tr *ngFor="let employee of employees">
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.salary}}</td>
    </tr>
</table>
</code>

Az eredeti tartalom törölhető.




===== Részletek =====

A részletek megjelenítéséhez készítsünk egy 
empl-detail komponenst. 

  ng generate component empl-detail

Írjuk mega sablont:

<code html>
<div *ngIf="employee">
    <h2>{{employee.name | uppercase}} részletek</h2>
    <div>
        <label for="empl-name">Név</label>
        <input id="empl-name" [(ngModel)]="employee.name" placeholder="name">
        <br>
        <label for="empl-salary">Fizetés</label>
        <input id="empl-salary" [(ngModel)]="employee.salary" placeholder="fizetés">
    </div>
</div>

</code>

Az EmplComponent osztályban vegyél fel egy új selectedEmployee
tulajdonságot és egy onSelect metódust:

<code javascript>
export class EmplComponent implements OnInit {

  employees = EMPLOYEES;
  selectedEmployee!: Empl;

  constructor() { }

  ngOnInit(): void {
  }

  onSelect(employee: Empl): void {
    this.selectedEmployee = employee;
  }

}
</code>

Javítsuk az empl komponens sablonját:

<code html>
<table>
    <tr *ngFor="let employee of employees" [class.selected]="employee === selectedEmployee"
        (click)="onSelect(employee)">
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.salary}}</td>
    </tr>
</table>

<app-empl-detail [employee]="selectedEmployee"></app-empl-detail>
</code>


Az empl-detail komponens osztályában importáljuk az Input modult.
Vegyük fel, a már meglévő sorba:

<code javascript>
import { Component, OnInit, Input } from '@angular/core';
</code>


Importáljuk a Empl interfészt is:

<code javascript>
import { Empl } from '../empl';
</code>


Az osztályon belül vegyünk fel egy tulajdonságot:
<code javascript>
@Input() employee?: Empl;
</code>


Az EmplDetailComoponent.ts teljes tartalma:

<code javascript EmplDetailComoponent.ts>
import { Component, OnInit, Input } from '@angular/core';

import { Empl } from '../empl';

@Component({
  selector: 'app-empl-detail',
  templateUrl: './empl-detail.component.html',
  styleUrls: ['./empl-detail.component.css']
})
export class EmplDetailComponent implements OnInit {

  @Input() employee?: Empl;

  constructor() { }

  ngOnInit(): void {
  }

}
</code>


Most bármelyik sorra, ha kattintunk, megjelenik alul a részletekben, és javíthatjuk.


===== Forrás =====
  * https://angular.io/tutorial/ (2021)