Jak používat jQuery v Angularu

Angular je javascriptový framework, který nám pomáhá vytvářet podnikové-front endové aplikace na úrovni snadným a názorově pestrým způsobem. Na druhou stranu jQuery je malá, ale funkčně bohatá výkonná javascriptová knihovna, která pomáhá manipulovat s DOM jazyka HTML s menším množstvím javascriptového kódu. Teď vás napadá otázka, proč bychom sakra měli používat knihovnu jQuery s aplikací Angular a k čemu je potřeba?

Při vytváření aplikací Angular se setkáte s některými situacemi, kdy je naprosto nezbytné použít knihovnu, jako je jQuery, abyste něco udělali. Jedním z příkladů, které mě napadají, je odeslání formuláře na externí webovou stránku z vaší aplikace Angular.

Představte si situaci, že jste na webové stránce vytvořené pomocí Angularu a něco nakupujete. Máte odkaz, který vás přesměruje na jinou webovou stránku, kde dokončíte objednávku se všemi údaji zadanými na této webové stránce. Existují způsoby, jak to realizovat bez jQuery, ale já jen vytvářím hypotetický scénář, kdy byste mohli jQuery použít. V tomto příspěvku se podíváme, jak použít jQuery s Angularem.

• Co je jQuery
• Příkladový projekt
• jQuery s Angularem
• Shrnutí
• Závěr

jquery je jednoduchá, malá, ale funkčně bohatá javascriptová knihovna, která pomáhá manipulovat s HTML DOM s menším množstvím javascriptu. Zde je oficiální webová stránka jQuery, kterou si můžete projít.

Provedeme jeden jednoduchý projekt pro lepší pochopení jQuery pro ty, kteří jej ještě nepoužívali. Zde je jednoduchý formulář, který přijímá jméno a příjmení. Když klikneme na tlačítko odeslat, mělo by se jméno zobrazit ve spodní části formuláře.

Tady je kód pro výše uvedené. Celá logika je umístěna uvnitř značky script. Pomocí jQuery se můžeme dotazovat a nastavovat prvky DOM na základě id, selektorů CSS atd. Například se můžeme dotazovat na křestní jméno pomocí $("#fname").val a nastavit ho pomocí tohoto $("#fn").val(firstName).

.