Knihovny Angular

Knihovny Angular jsou vytvořeny jako řešení obecných problémů, jako je prezentace jednotného uživatelského rozhraní, prezentace dat a umožnění zadávání dat. Vývojáři mohou vytvářet obecná řešení pro konkrétní oblasti, která lze přizpůsobit pro opakované použití v různých aplikacích. Tato řešení lze vytvořit jako knihovny Angular a tyto knihovny lze publikovat a sdílet jako balíčky npm.

Knihovna Angular je angulární projekt, ale od aplikace Angular se liší tím, že nemůže běžet samostatně. Je importována a používána v aplikaci.

Použití knihoven Angularu

• Knihovny Angularu rozšiřují jeho základní funkce. Pokud například chcete do aplikace přidat reaktivní formuláře, přidejte balíček knihovny pomocí ng add @angular/forms a poté do kódu aplikace importujte modul ReactiveFormsModule z knihovny @angular/forms.
• Angular Material je příkladem velké univerzální knihovny, která poskytuje propracované, opakovaně použitelné a přizpůsobitelné komponenty uživatelského rozhraní.

Instalace knihoven

Knihovny jsou publikovány jako balíčky npm a jsou integrovány do rozhraní Angular CLI. Chceme-li do aplikace integrovat kód opakovaně použitelné knihovny, musíme balíček nainstalovat a importovat poskytované funkce tam, kde je budeme používat.

Syntaxe

Příkaz ng add využívá správce balíčků npm k instalaci balíčku knihovny a vyvolává schémata, která jsou součástí balíčku, pro další lešení v kódu projektu, jako je přidání příkazů import, fontů, témat atd.

Typování knihovny

Balíčky knihovny obsahují typování v souborech .d.ts. Pokud balíček vaší knihovny neobsahuje typování a prostředí IDE zobrazí chybu, musíte nainstalovat přidružený balíček @types/.

Předpokládejme například, že máte knihovnu s názvem d1:

Typy definované v balíčku @types/ pro knihovnu nainstalovanou do pracovního prostoru se automaticky přidají do konfigurace jazyka TypeScript pro projekt, který tuto knihovnu používá. TypeScript ve výchozím nastavení hledá typy ve složce node_modules/@types, takže nemusíte přidávat každý balíček typů zvlášť.

Pokud knihovna neobsahuje typy ve složce @types/, můžete ji přesto používat tak, že pro ni přidáte typy ručně. Můžete to udělat následujícím způsobem:

Vytvořte soubor typings.d.ts ve složce src/. Tento soubor je automaticky zařazen jako globální definice typu.

Přidejte následující kód do src/typings.d.ts.

Přidejte následující kód do komponenty nebo souboru, který knihovnu používá:

Aktualizace knihoven

Knihovny můžete aktualizovat pomocí příkazu ng update. Ten aktualizuje jednotlivé verze knihoven. Angular CLI kontroluje nejnovější zveřejněné vydání knihovny, a pokud zjistí, že nejnovější verze je novější než vaše nainstalovaná verze, stáhne ji a aktualizuje soubor package.json tak, aby odpovídal nejnovější verzi.

Syntaxe

Poznámka: Při aktualizaci systému Angular na novou verzi musíte zajistit, aby všechny knihovny, které používáte, byly aktuální. Pokud mají knihovny vzájemné závislosti, musí být také aktualizovány.

Jak přidat knihovnu do globálního oboru runtime

Knihovny JavaScriptu Legacy, které nejsou importovány do aplikace, lze přidat do globálního oboru runtime a načíst je, jako by byly ve značce skriptu. Musíte nakonfigurovat CLI, aby to provedlo v době sestavení pomocí možností „scripts“ a „styles“ cíle sestavení v konfiguračním souboru CLI angular.json.

Chcete-li například používat knihovnu Bootstrap 4, nainstalujte nejprve tuto knihovnu a její závislosti pomocí správce balíčků npm:

Přidejte soubor Bootstrap CSS do pole „styles“:

Vytváření nových knihoven

Můžete vytvářet a publikovat vlastní nové knihovny pro rozšíření funkcí systému Angular. Obvykle se to používá, když potřebujete vyřešit stejný problém ve více než jedné aplikaci (nebo chcete své řešení sdílet s ostatními vývojáři), máte kandidáta na knihovnu.

Např:

Otevřete Angular CLI a pomocí následující syntaxe vytvořte novou knihovnu.

Syntaxe

Ve vašem pracovním prostoru se vytvoří složka projects/my-lib, která obsahuje komponentu a službu uvnitř modulu NgModule. Konfigurační soubor pracovního prostoru angular.json se aktualizuje o projekt typu ‚library‘.

Nyní můžete svůj projekt sestavit, otestovat a lintovat pomocí následujících příkazů: