====== Angular ======

**Angular** je robustní, open-source frontendový framework postavený na jazyce **TypeScript**, jehož hlavním tvůrcem a správcem je společnost **Google**. Je od základu navržen pro vývoj rozsáhlých, vysoce výkonných a udržovatelných podnikových (*enterprise*) aplikací. 

Na rozdíl od knihoven, které řeší pouze vykreslování uživatelského rozhraní, poskytuje Angular vývojářům pevně danou architekturu, jednotné standardy a obrovskou sadu vestavěných nástrojů – od pokročilého routování a správy formulářů až po HTTP komunikaci se serverem.
{{ ::angular-logo.jpg.pagespeed.ce.sm4c0e9mku.jpg |}}
----

===== 1. Klíčové koncepty a architektura =====

==== TypeScript jako pevný základ ====
Angular striktně vyžaduje použití TypeScriptu – silně typované nadstavby JavaScriptu. Statická typování a moderní OOP prvky (třídy, rozhraní, generiky) přinášejí řadu výhod:
  * **Včasná detekce chyb:** Syntaktické a typové chyby odhalíte už během psaní kódu v IDE, nikoliv až za běhu v prohlížeči.
  * **Skvělá škálovatelnost:** Ve velkých vývojářských týmech pomáhá TypeScript udržovat jasnou dohodu o tom, jaká data (datové modely) mezi jednotlivými vrstvami aplikace proudí.
  * **Pokročilý refaktoring:** Bezpečné a automatizované přejmenovávání proměnných či metod napříč celou aplikací.

==== Obousměrná vazba dat (Two-way Data Binding) ====
Jedna z nejznámějších a nejmocnějších funkcí Angularu (implementovaná pomocí direktivy `[(ngModel)]` a syntaxe "box-and-banana"). 
  * Jakmile programově změníte hodnotu proměnné v TypeScriptovém kódu, stav se okamžitě propíše do HTML šablony.
  * A naopak – pokud uživatel cokoliv upraví v uživatelském rozhraní (např. napíše text do vstupního políčka), hodnota v kódu se ihned automaticky aktualizuje bez nutnosti psát manuální event listenery.

==== Dependency Injection (Injekce závislostí) ====
Angular disponuje extrémně propracovaným, hierarchickým systémem pro injektáž závislostí. Služby (*Services*), které obsahují business logiku nebo komunikují s API, jsou spravovány samotným frameworkem.
  * Pokud komponenta potřebuje načíst data z databáze, Angular jí automaticky „přihraje“ (injektuje) správnou instanci potřebné služby.
  * Výsledkem je vysoce modularizovaný, přehledný a snadno testovatelný kód (jednotlivé služby lze při testování jednoduše mockovat).

==== Modulární systém a Lazy Loading ====
Aplikace jsou logicky členěny na stavební bloky (moduly, resp. komponenty a samostatné feature moduly). 
  * Pomocí mechanismu //Lazy Loading// (postupného načítání) lze zajistit, že se uživateli při startu aplikace nestahuje celý monolitický balík kódu, ale pouze ta část (modul), kterou právě otevírá. To dramaticky zrychluje počáteční načtení (*Initial Load*) rozsáhlých aplikací.

----

===== 2. Srovnání: Angular vs. React =====

^ Vlastnost ^ Angular ^ React ^
| **Typ** | Kompletní framework (all-inclusive) | Knihovna zaměřená na UI |
| **Jazyk** | TypeScript (povinný standard) | JavaScript / TypeScript |
| **Křivka učení** | Strmější (náročnější na začátku, pevná pravidla) | Pozvolnější (velká svoboda volby) |
| **Ekosystém** | Vše v ceně (Routing, Forms, HTTP klient) | Nutno doinstalovat externí knihovny |
| **Výrobce / Zázemí** | Google | Meta (Facebook) + silná komunitní open-source podpora |

----

===== 3. Historické okénko: AngularJS vs. Angular =====

V historii vývoje tohoto nástroje existuje zásadní předěl, který je nutné mít na paměti:
  * **AngularJS (verze 1.x):** Původní přelomová verze představená v roce 2010. Dnes se jedná o zcela zastaralou technologii, jejíž oficiální podpora již dávno skončila.
  * **Angular (verze 2 a novější):** Úplný, moderní přepis architektury z roku 2016. Tyto nové verze **nejsou zpětně kompatibilní** s původním AngularJS. Moderní verze (Angular 17, 18 a novější) přinášejí revoluční prvky, jako je reaktivní programování (RxJS), zónová i bezzónová architektura (*Zoneless*), nové reaktivní šablony a extrémní rychlost kompilace.

----

===== 4. Ukázka kódu: Základní komponenta =====

Následující ukázka demonstruje minimalistickou komponentu v TypeScriptu s definovaným selektorem a inline šablonou:

<code>
import { Component } from '@angular/core';

@Component({
  selector: 'app-pozdrav',
  template: '<h1>Ahoj, {{ jmeno }}!</h1>'
})
export class PozdravComponent {
  jmeno: string = 'Vývojáři';
}
</code>

----

===== 5. Kdy se vyplatí zvolit Angular? =====

  * **Enterprise projekty:** Ideální volba pro robustní bankovní systémy, komplexní vládní portály, CRM systémy a rozsáhlé firemní aplikace.
  * **Velké a rostoucí týmy:** Díky striktním konvencím a pevně dané struktuře frameworku píší všichni členové týmu kód podobným způsobem, což usnadňuje code-review a zaučování nových lidí.
  * **Dlouhodobá údržba a životnost:** Silná garance podpory ze strany Googlu a robustnost TypeScriptu předurčují Angular pro projekty s předpokládanou životností deseti a více let.

> **Zajímavost pod kapotou:** Angular využívá pokročilou **AOT (Ahead-of-Time) kompilaci**. To znamená, že celý zdrojový kód (TypeScript a HTML šablony) se zkompiluje do čistého JavaScriptu a optimalizovaných instrukcí ještě předtím, než je aplikace distribuována uživateli. Prohlížeč tak stahuje již hotový, rychlý kód, což bleskurychle zrychluje start celé aplikace.

----

[[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]