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 kötések ======

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

===== Kötés =====

Egy komponensnek két főbb része van. A HTML és a TypeScript 
fájl a teszt és a CSS mellett. Az adatok általában a TypeScript fájlban keletkeznek, de a HTML fájlban kell megjeleníteni. Ezért a TypeScript fájlok egy-egy változóit a HTML oldal egy pontjához kell kötni.


Készítsünk egy Angular alkalmazást "kotes" néven.

Az alkalmazás gyökérkomponense a következő két fő részből áll:

  * app.component.html
  * app.component.ts


Szerkesszük az **src/app/app.component.html** fájlt.
Töröljük az eredeti tartalmát, majd javítsuk ehhez hasonlóan:

<code html src/app/app.component.html>
<h1>Teszt</h1>

<p>{{name}}</p>
</code>

A kapcsos-zárójelekkel <nowiki>"{{ }}</nowiki>" hozzuk létre a kötést HTML oldalon.
A kapcsos-zárójelek között meg kell adnunk egy olyan nevet ami
a TypeScript fájlban változóként van jelen. 


Most szerkesszük az **src/app/app.component.ts** fájlt.
A fájlban lévő AppComponent osztály tartalma a következő legyen:

<code javascript src/app/app.component.ts>
//...
export class AppComponent {
    name = 'János';
}
</code>
A fájl többi részét hagyjuk változatlanul. Nézzük meg a böngészőben az eredményt.

A TypeScript fájlban a "name" változót a HTML sablon <p> elemébe kötöttük be.

===== Formázás =====

A HTML fájlba kötött adatok formázhatók az alábbi módon. 

<code html src/app/app.component.html>
<h1>Teszt</h1>

<p>{{ name | uppercase }}</p>
</code>

A mintában a pipe "|" karakter után adjuk meg, hogyan formázzuk 
a változó értékét. Az uppercase hatására, minden betű
nagybetűs lesz. 


A következő példában, minden betű kisbetűs lesz. 

<code html src/app/app.component.html>
<h1>Teszt</h1>

<p>{{ name | lowercase }}</p>
</code>

===== Objektum példa =====

Egyetlen változó helyet objektumokat is létrehozhatunk TypeScript oldalon, aminek a tagjait beköthetjük 
a HTML sablonba.
==== Egyetlen dolgozó ====

Hozzunk létre egy emplyoee objektumot, name, city és salary tagokkal:

<code javascript>
  employee = {
    name: 'Pali Márton',
    city: 'Szeged',
    salary: 385
  }
</code>


Kössük be a HTML sablonba:
<code html5>
<p>
  {{ dolgozo.name }} {{dolgozo.city}}
</p>
</code>

==== Több dolgozó ====

Listákat, illetve tömböket is használhatunk:

<code javascript>
  dolgozok = [
    {
      name: 'Pali Márton',
      city: 'Szeged',
      salary: 385
    },
    {
      name: 'Rendes Katalin',
      city: 'Szolnok',
      salary: 324
    }
  ]
</code>

<code html5>

<p>
  {{ dolgozok[0].name }} {{dolgozok[0].city}}
</p>

<p>
  {{ dolgozok[1].name }} {{dolgozok[1].city}}
</p>
</code>

==== Interfésszel ====

Interfészekkel típusokat határozhatunk meg. Legyen például egy Employee típus, amit
egy name és egy salary tagot tartalmaz.

<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  title = 'app01';
  employee: Employee;
  
  constructor() {
    this.employee = {
      name: "Pali Márton",
      salary: 2830000
    };
  }
}
interface Employee {
  name: string,
  salary: number
}

</code>

Az AppComponent osztályban létrehoztunk egy konstruktort is, ahol definiáljuk az objektum tartalmát.

Kössük a HTML sablonba:

<code html first.component.html>
<p>
    {{ dolgozo.name }} {{ dolgozo.salary }}
</p>
</code>


Az interface-t tehetjük külön állományba, de akkor exportálni kell.

===== Konstruktor nélkül =====

<code javascript src/app/app.component.ts>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app16';
  janos: Emplyee = {
    name: "Panda Lajos",
    salary: 2850000
  }
}

interface Emplyee {
  name: string;
  salary: number;
}
</code>


===== Interfész külön fájlban =====

<code javascript src/app/employee.ts>
export interface Employee {
    name: string,
    salary: number
}
</code>

<code javascript src/app/app.component.ts>
import { Employee } from './employee';

//...
</code>

Az interfész tagjai zárhatók pontosvesszővel is:
<code javascript src/app/employee.ts>
export interface Employee {
    name: string;
    salary: number;
}
</code>


===== Függvény eredménye weblapon =====

<code javascript>
{{valamiFuggveny()}}
</code>