How To Use jQuery In Angular

Néha használnunk kell

Bhargav Bachina

Follow

Mar 2, 2020 – 3 min read

Photo by Greg Rakozy on Unsplash

Angular egy javascript keretrendszer, amely segít nekünk a vállalati-szintű front end alkalmazásokat egyszerű és véleményes módon. Másrészt a jQuery egy kicsi, de funkciókban gazdag, nagy teljesítményű javascript könyvtár, amely segít a HTML DOM manipulálásában kevesebb javascript kóddal. Most felmerül benned a kérdés, hogy mi a fenének használjuk a jQuery-t az Angularral, és mi szükség van rá?

Vannak olyan helyzetek, amelyekkel az Angular alkalmazások készítése során találkozol, amikor feltétlenül szükséges egy olyan könyvtár használata, mint a jQuery, hogy valamit elvégezzünk. Az egyik példa, ami eszembe jut, az az, hogy az Angular alkalmazásodból elküldöd az űrlapot a külső weboldalra.

Képzelj el egy helyzetet, amikor az Angular segítségével épített weboldalon vagy és vásárolsz valamit. Van egy linked, ami egy másik weboldalra visz, hogy a rendelést ezen a weboldalon megadott adatokkal befejezd. Van mód arra, hogy ezt jQuery nélkül is megvalósítsd, de én csak egy hipotetikus forgatókönyvet hozok létre, ahol a jQuery-t használhatod. Ebben a bejegyzésben megnézzük, hogyan használhatjuk a jQuery-t az Angularral.

  • Mi a jQuery
  • Példaprojekt
  • jQuery az Angularral
  • Összefoglaló
  • Következtetés

A jquery egy egyszerű, kicsi, de funkciókban gazdag javascript könyvtár, amely segít a HTML DOM manipulálásában kevesebb javascript segítségével. Itt van a jQuery hivatalos honlapja, amit átnézhetsz.

Végezzünk egy egyszerű projektet, hogy jobban megértsük a jQuery-t azok számára, akik még nem használták. Itt van egy egyszerű űrlap, amely a keresztnevet és a vezetéknevet veszi. Amikor a submit gombra kattintunk, a névnek meg kell jelennie az űrlap alján.

Példa jQuery projekt

Itt a kód a fentiekhez. A teljes logika a script tagen belül helyezkedik el. A DOM elemeket a jQuery segítségével lekérdezhetjük és beállíthatjuk az azonosítók, CSS szelektorok stb. alapján. Például lekérdezhetjük a keresztnevet a $("#fname").val segítségével, és beállíthatjuk ezzel a $("#fn").val(firstName).

jQuery.html

módon.