Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- angular [2025/12/31 17:26] – created admin
+++ angular [2026/10/07 14:58] (aktuální) – [Angular] admin
@@ Řádek 1: / Řádek 1: @@
 ====== Angular ======
-**Angular** je postaven na jazyce **TypeScript** a je navržen pro vývoj rozsáhlých podnikových (enterprise) aplikací. Poskytuje vývojářům pevně danou strukturu a sadu vestavěných nástrojů pro vše od navigace až po komunikaci se serverem.
+**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 =====
-===== 1. Klíčové koncepty =====
+==== 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:
-==== TypeScript jako základ ====
+  * **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.
-Angular vyžaduje použití TypeScriptu (nadstavba JavaScriptu s datovými typy). To umožňuje odhalit chyby v kódu už během psaní a usnadňuje práci ve velkých týmech, kde je jasně definováno, jaká data kudy proudí.
+  * **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) ====
-Toto je jedna z nejznámějších funkcí Angularu. Pokud změníte data v kódu, okamžitě se změní v HTML. A naopak – pokud uživatel napíše něco do políčka, data v kódu se ihned aktualizují.
+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 má propracovaný systém pro sdílení částí kódu (služeb). Pokud jedna část aplikace potřebuje data z databáze, Angular jí automaticky "přihraje" správnou službu, která to umí zařídit. To vede k velmi čistému a testovatelnému kódu.
+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.
-==== Modulární systém (NgModules) ====
+  * Výsledkem je vysoce modularizovaný, přehledný a snadno testovatelný kód (jednotlivé služby lze při testování jednoduše mockovat).
-Aplikace se dělí na bloky (moduly), které lze načítat postupně (tzv. //Lazy Loading//). To zajišťuje, že se uživateli nestahuje celý obří systém najednou, ale jen ty části, které zrovna potřebuje.
+==== 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 | Knihovna pro UI |
+| **Typ** | Kompletní framework (all-inclusive) | Knihovna zaměřená na UI |
-| **Jazyk** | TypeScript (povinný) | JavaScript / TypeScript |
+| **Jazyk** | TypeScript (povinný standard) | JavaScript / TypeScript |
-| **Učení** | Náročné (strmá křivka) | Snazší (postupný růst) |
+| **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) | Nutno doinstalovat knihovny |
+| **Ekosystém** | Vše v ceně (Routing, Forms, HTTP klient) | Nutno doinstalovat externí knihovny |
-| **Výrobce** | Google | Meta (Facebook) |
+| **Výrobce / Zázemí** | Google | Meta (Facebook) + silná komunitní open-source podpora |
+----
 ===== 3. Historické okénko: AngularJS vs. Angular =====
-Je důležité rozlišovat mezi těmito dvěma verzemi:
+V historii vývoje tohoto nástroje existuje zásadní předěl, který je nutné mít na paměti:
-  * **AngularJS (v1.x):** Původní verze z roku 2010. Dnes je zastaralá a její podpora skončila.
+  * **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 (v2 a novější):** Úplný přepis z roku 2016. Tyto verze nejsou zpětně kompatibilní s AngularJS. Dnešní verze (např. Angular 17, 18+) jsou extrémně rychlé a moderní.
+  * **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 (Komponenta v TypeScriptu) =====
+----
+===== 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',
@@ Řádek 48: / Řádek 66: @@
 </code>
-===== 5. Kdy zvolit Angular? =====
+----
+===== 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.
-  * **Enterprise sféra:** Ideální pro bankovní systémy, vládní portály a rozsáhlé firemní nástroje.
+> **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.
-  * **Velké týmy:** Pevná pravidla frameworku zaručují, že kód bude vypadat stejně, i když na něm pracují desítky lidí.
-  * **Dlouhodobá údržba:** Díky TypeScriptu a podpoře Googlu je Angular sázkou na jistotu pro projekty, které mají běžet deset a více let.
-> **Zajímavost:** Angular používá tzv. **AOT (Ahead-of-Time) kompilaci**. To znamená, že se kód přeloží do stroji srozumitelné podoby už při sestavování aplikace, nikoliv až v prohlížeči uživatele, což výrazně zrychluje start webu.
+----
 [[it_encyklopedie:it_architektura_rozcestnik|Zpět na Architekturu]]