Posts

Showing posts from March, 2025

NgRx - Devtools

Az @ngrx/store-devtools egy fejlesztői eszköz az NgRx Store -hoz, amely segít nyomon követni és debuggolni az állapotváltozásokat egy Angular alkalmazásban. 📌 Mit csinál az NgRx Store Devtools? Time-travel debugging 🕰️ – Vissza tudsz lépni korábbi állapotokra. Akciók monitorozása 🔍 – Megnézheted, milyen actionök futottak le és milyen adatokat tartalmaztak. Állapotváltozások vizualizálása 📊 – Láthatod, hogyan módosult az állapot az egyes akciók hatására. Exportálás/importálás 📂 – Elmentheted az állapotot és visszatöltheted később. 🚀 Hogyan telepítsd? Futtasd az alábbi parancsot a projektedben: npm install @ngrx/store-devtools ⚙ Hogyan konfiguráld? Nyisd meg az app.config.ts (vagy app.module.ts , ha még module-alapú az appod) fájlt, és egészítsd ki: import { provideStoreDevtools } from '@ngrx/store-devtools' ; export const appConfig : ApplicationConfig = { providers : [ provideStoreDevtools ({ maxAge : 25 , // Ennyi állapotvált...

Bevezetés az NgRx-be

Bevezetés az NgRx-be – Állapotkezelés Angularban Az NgRx egy Redux-alapú állapotkezelő könyvtár Angular alkalmazásokhoz. Segít az alkalmazás állapotát egy központi helyen tárolni, ezáltal könnyebben kezelhetővé és előrejelezhetővé válik az állapotváltozás. Az NgRx főbb elemei 1. Store (Állapottár) A Store egy központi adattár, amely az alkalmazás állapotát tartalmazza. Az állapot csak egy módon módosulhat: actionökön (akciókon) keresztül. import { createFeature, createReducer, on } from '@ngrx/store' ; import { loadItemsSuccess } from './items.actions' ; export interface ItemsState { items : string []; } const initialState : ItemsState = { items : [], }; export const itemsFeature = createFeature ({ name : 'items' , reducer : createReducer ( initialState, on (loadItemsSuccess, ( state, { items } ) => ({ ...state, items })) ), }); 2. Actions (Akciók) Az actionök olyan objektumok, amelyek egy adott műveletet írnak le. E...

Alapvető Hálózati Protokollok és Szolgáltatások

Alapvető Hálózati Protokollok és Szolgáltatások: TCP/IP, HTTP/HTTPS, DNS, DHCP A modern számítógépes hálózatok számos protokollra és szolgáltatásra épülnek, amelyek lehetővé teszik a különböző eszközök közötti kommunikációt. Ebben a cikkben négy alapvető technológiát mutatunk be: TCP/IP , HTTP/HTTPS , DNS és DHCP . 1. TCP/IP: Az Internet Alapja A TCP/IP (Transmission Control Protocol/Internet Protocol) egy olyan protokollkészlet, amely az internet és a helyi hálózatok alapját képezi. A rendszer két fő protokollra épül: IP (Internet Protocol) : Ez felelős az adatok célba juttatásáért az interneten keresztül. Az IP címek segítségével az eszközök egyedi azonosítót kapnak a hálózaton. TCP (Transmission Control Protocol) : Ez biztosítja az adatok megbízható továbbítását. Felbontja az információt kisebb csomagokra, majd a célállomáson újra összerakja őket. A TCP/IP működése négy rétegre osztható: Hálózati hozzáférési réteg (pl. Ethernet, Wi-Fi) Internetes réteg (IP-címzés és csomagok útv...

CSS Flexbox

CSS Flexbox: Rugalmas Elrendezés Egyszerűen A CSS Flexbox egy hatékony elrendezési modell, amely segít a HTML elemek rugalmas és dinamikus igazításában. Kiválóan alkalmas a modern weboldalak komponenseinek elhelyezésére, különösen akkor, ha a tartalom mérete változó. 1. Flexbox Alapjai A Flexbox egy olyan elrendezési modell, amely lehetővé teszi az elemek igazítását egy szülő konténeren belül. Két fő eleme van: Flex konténer : Ez az az elem, amely tartalmazza a rugalmas elemeket. Flex elemek : A konténerben elhelyezkedő elemek, amelyek igazodnak a megadott szabályok szerint. Egy elemet flex konténerré alakíthatunk a display: flex; tulajdonság beállításával. .container { display: flex; } 2. Főtengely és Melléktengely A Flexbox egyik legfontosabb koncepciója a tengelyrendszer: Főtengely (main axis) : Az a tengely, amely mentén az elemek alapértelmezés szerint igazodnak. Melléktengely (cross axis) : A főtengelyre merőleges tengely. Az alapértelmezett irány vízszintes (balról jobbra), d...

RxJS Operátorok

RxJS Operátorok: concatMap, mergeMap, switchMap, exhaustMap Az RxJS egyik legfontosabb funkciója az operátorok használata, amelyek lehetővé teszik az Observable-ek átalakítását és kezelését. Ebben a cikkben a concatMap , mergeMap , switchMap és exhaustMap operátorokat vizsgáljuk meg, és mindegyikhez mutatunk egy egyszerű, futtatható példát. 1. concatMap A concatMap sorban hajtja végre a belső Observable-eket. Amíg egy belső Observable nem fejeződik be, nem kezdi el a következő hívást. Használat: Jó választás, ha a műveleteket sorban szeretnénk végrehajtani. Megőrzi az események sorrendjét. Példa: import { of, interval } from 'rxjs'; import { concatMap, take } from 'rxjs/operators'; of(1, 2, 3).pipe( concatMap(value => interval(1000).pipe(take(2))) ).subscribe(console.log); Kimenet (időben): 0 1 0 1 0 1 (2 másodpercenként új szám indul) 2. mergeMap A mergeMap párhuzamosan futtatja a belső Observable-eket, tehát azonnal indít egy új Observable-t, amint érkezik...