Angular structure, styleguide

Remek, ez a pont egy medior Angular fejlesztő egyik legfontosabb kompetenciáját fedi le. Kifejtem neked tömören, lényegre törően, hogy hogyan érdemes ezekre felkészülnöd, és mit jelent egy-egy rész.

---

✅ 1. Angular alkalmazás felépítése (kis-közepes projekt)

Alapvető struktúra:

src/
├── app/
│   ├── core/         ⟵ singleton szolgáltatások, interceptor, auth, stb.
│   ├── shared/       ⟵ közös modulok, pipe-ok, direktívák, UI komponensek
│   ├── features/     ⟵ domain alapú modulszervezés (pl. user, products, ...)
│   ├── app-routing.module.ts
│   └── app.component.ts
├── assets/
├── environments/
│   ├── environment.ts
│   └── environment.prod.ts

📘 Best practice szerint domain (feature) alapú modulokra bontjuk az appot, nem komponens típusokra (pl. pages, components).

---

✅ 2. Style Guide (https://angular.io/guide/styleguide)

Néhány fontosabb irányelv, amit kérhetnek interjún:

• kebab-case fájlnevek, PascalCase komponens osztály.
• Egy fájl = egy osztály.
• Használj providedIn: 'root'-ot szolgáltatásokhoz.
• Strukturált modulfelosztás: Core, Shared, Feature.
• Használj barrel fájlokat (index.ts) exportokhoz.

---

✅ 3. angular.json jelentése

Ez a fájl a build és workspace konfiguráció fő fájlja.

Fontos szekciók:

• projects[app-name].architect.build.options
  • outputPath: build kimenet könyvtára
  • assets: átmásolandó statikus fájlok
  • styles: globális stílusok
  • scripts: globális JS fájlok
• fileReplacements: környezeti fájlok cseréje --configuration production esetén

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.prod.ts"
  }
]

---

✅ 4. Environments (környezeti fájlok)

Környezeti beállításokra való, pl. API_URL, debugMode.

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

• ng build automatikusan lecseréli environment.ts-t prod-ra ha --configuration production van megadva.

---

✅ 5. Build scriptek

A package.json-ban lévő scripts:

"scripts": {
  "start": "ng serve",
  "build": "ng build",
  "build:prod": "ng build --configuration production",
  "test": "ng test",
  "lint": "ng lint"
}

---

✅ 6. Gyakori Angular feature-ök (komplexebbek)

✅ Guard-ok

• Route hozzáférés ellenőrzése.

canActivate(route: ActivatedRouteSnapshot): boolean {
  return this.authService.isLoggedIn();
}

✅ Interceptor

• HTTP kérések módosítása (pl. token beszúrás, loading spinner, error kezelés).

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const cloned = req.clone({ setHeaders: { Authorization: 'Bearer token' } });
  return next.handle(cloned);
}

✅ Direktívák

• Saját attribútum logika komponensek nélkül.

@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

---

🧠 Tipp: Készülj az alábbi kérdésekre:

Kérdés	Rövid válasz
Mi a különbség a CoreModule és SharedModule között?	Core: singleton service-ek, Shared: komponens + pipe újrafelhasználás
Miért jó a feature-modul szerkezet?	Különálló domain-ek, jobb skálázhatóság, lazy loading
Hogyan működik az environment fájlcsere?	angular.json fileReplacements alapján történik
Mikor használjunk guard-ot?	Route-hoz való hozzáférés szabályozása (pl. AuthGuard)
Mikor jó az interceptor?	Minden HTTP kéréshez automatikus módosítás

---

Ha kéred, adok rá egy mini projekt struktúra példát vagy gyakorló interjúkérdéseket ezekből.