Come usare jQuery in Angular

Angular è un framework javascript che ci aiuta a costruireapplicazioni front-end di livello enterprise in un modo facile e con opinioni. D’altra parte, jQuery è una piccola ma ricca di funzionalità, una potente libreria javascript che aiuta a manipolare il DOM HTML con meno codice javascript. Ora avete una domanda: perché diavolo dovremmo usare jQuery con Angular e qual è la sua necessità?

Ci sono alcune situazioni in cui ci si imbatte mentre si costruiscono applicazioni Angular che è assolutamente necessario usare una libreria come jQuery per ottenere qualcosa. Uno degli esempi che mi vengono in mente è l’invio del modulo al sito web esterno dalla tua app Angular.

Immagina una situazione in cui sei sul sito web costruito con Angular e stai comprando qualcosa. Avete un link che vi porta a un altro sito web per completare l’ordine con tutti i dettagli inseriti su questo sito web. Ci sono modi per implementare questo senza jQuery, ma sto solo creando uno scenario ipotetico in cui si potrebbe usare jQuery. In questo post, vedremo come usare jQuery con Angular.

• Che cos’è jQuery
• Progetto di esempio
• jQuery con Angular
• Sommario
• Conclusione

jquery è una semplice, piccola ma ricca di funzionalità libreria javascript che aiuta a manipolare il DOM HTML con meno javascript. Ecco il sito ufficiale di jQuery che potete consultare.

Facciamo un semplice progetto per capire meglio jQuery per quelli che non l’hanno ancora usato. Ecco un semplice modulo che prende il nome e il cognome. Quando clicchiamo sul pulsante submit il nome dovrebbe essere visualizzato in fondo al modulo.

Ecco il codice per quanto sopra. L’intera logica è messa dentro il tag script. Possiamo interrogare e impostare gli elementi DOM con jQuery in base agli id, selettori CSS, ecc. Per esempio, possiamo interrogare il nome con $("#fname").val e impostarlo con questo $("#fn").val(firstName).