Hvordan man bruger jQuery i Angular

Angular er et javascript framework, der hjælper os med at bygge enterprise-niveau front-end applikationer på en nem og meningsfuld måde. På den anden side er jQuery et lille, men alligevel funktionsrigt og kraftfuldt javascript-bibliotek, der hjælper med at manipulere HTML DOM med mindre javascript-kode. Nu har du et spørgsmål om, hvorfor fanden skal vi bruge jQuery med Angular, og hvad er behovet for det?

Der er nogle situationer, du støder på, mens du bygger Angular-apps, at det er absolut nødvendigt at bruge et bibliotek som jQuery for at få noget gjort. Et af de eksempler, som jeg kan komme i tanke om, er at indsende formularen til det eksterne websted fra din Angular-app.

Forestil dig en situation, hvor du er på det websted, der er bygget med Angular, og handler noget. Du har et link, der fører dig til et andet websted for at fuldføre bestillingen med alle de oplysninger, der er indtastet på dette websted. Der er måder at implementere dette uden jQuery på, men jeg skaber bare et hypotetisk scenarie, hvor du måske bruger jQuery. I dette indlæg vil vi se, hvordan vi kan bruge jQuery med Angular.

• Hvad er jQuery
• Eksempelprojekt
• jQuery med Angular
• Summary
• Konklusion

jquery er et simpelt, lille, men alligevel funktionsrigt javascriptbibliotek, der hjælper med at manipulere HTML DOM med mindre javascript. Her er det officielle websted for jQuery, som du kan gå igennem.

Lad os lave et enkelt projekt for at forstå jQuery bedre for dem, der ikke har brugt det endnu. Her er en simpel formular, der tager fornavn og efternavn. Når vi klikker på submit-knappen skal navnet vises nederst i formularen.

Her er koden til ovenstående. Hele logikken er lagt inde i script-tag. Vi kan forespørge og indstille DOM-elementerne med jQuery baseret på id’er, CSS-selektorer osv. Vi kan f.eks. forespørge på fornavnet med $("#fname").val og indstille det med dette $("#fn").val(firstName).