Hur man använder jQuery i Angular

Ibland måste vi använda det

Bhargav Bachina

Follow

Mar 2, 2020 – 3 min read

Foto av Greg Rakozy på Unsplash

Angular är ett javascript ramverk som hjälper oss att bygga företag-nivå av front end-applikationer på ett enkelt och åsiktsbaserat sätt. Å andra sidan är jQuery ett litet men ändå funktionsrikt och kraftfullt javascriptbibliotek som hjälper oss att manipulera HTML DOM med mindre javascriptkod. Nu har du en fråga om varför i helvete ska vi använda jQuery med Angular och vad är behovet av det?

Det finns vissa situationer som du stöter på när du bygger Angular-applikationer där det är absolut nödvändigt att använda ett bibliotek som jQuery för att få något gjort. Ett av de exempel som jag kan tänka mig är att skicka in formuläret till den externa webbplatsen från din Angular-app.

Föreställ dig en situation där du är på webbplatsen som är byggd med Angular och handlar något. Du har en länk som tar dig till en annan webbplats för att slutföra beställningen med alla uppgifter som angetts på den här webbplatsen. Det finns sätt att genomföra detta utan jQuery men jag skapar bara ett hypotetiskt scenario där du kan använda jQuery. I det här inlägget kommer vi att se hur man använder jQuery med Angular.

  • Vad är jQuery
  • Exempelprojekt
  • jQuery med Angular
  • Sammanfattning
  • Slutsats

jquery är ett enkelt, litet men ändå funktionsrikt javascriptbibliotek som hjälper till att manipulera HTML DOM med mindre javascript. Här är den officiella webbplatsen för jQuery som du kan gå igenom.

Låt oss göra ett enkelt projekt för att förstå jQuery bättre för dem som inte använt det ännu. Här är ett enkelt formulär som tar förnamn och efternamn. När vi klickar på submit-knappen ska namnet visas längst ner i formuläret.

Exempel på jQuery-projekt

Här är koden för ovanstående. Hela logiken är placerad inuti script taggen. Vi kan fråga efter och ställa in DOM-elementen med jQuery baserat på ids, CSS-selektorer osv. Vi kan till exempel fråga efter förnamnet med $("#fname").val och ställa in det med detta $("#fn").val(firstName).

jQuery.html

.