In che modo AngularJS è diverso da jQuery


388

Conosco solo una libreria js ed è jQuery .
Ma i miei altri programmatori nel gruppo stanno cambiando AngularJS come libreria predefinita nel nuovo progetto.

Non ne so nulla. In che cosa differisce da jQuery?
Ho già un set di funzioni fatte per compiti simili in jQuery. Posso ancora usare roba jQuery con AngularJS?

Risposte:


414
  1. Mentre Angular 1 era un framework, Angular 2 è una piattaforma . ( rif )

Per gli sviluppatori, Angular2 fornisce alcune funzionalità oltre a mostrare i dati sullo schermo. Ad esempio, l'utilizzo dello strumento angular2 cli può aiutarti a "precompilare" il tuo codice e generare il codice javascript necessario ( agitazione dell'albero ) per ridurre la dimensione del download fino a 35 KB.

  1. Shadow DOM emulato Angular2. ( rif )

Questo apre una porta per il rendering del server che può risolvere il problema SEO e funzionare con Nativescript ecc. Che non funziona sui browser.

AngularJS è un framework . Ha le seguenti caratteristiche

  1. Associazione dati bidirezionale
  2. Modello MVW (MVC-ish)
  3. Modello
  4. Direttiva personalizzata (componenti riutilizzabili, markup personalizzato)
  5. REST-friendly
  6. Deep Linking (imposta un link per qualsiasi pagina dinamica)
  7. Convalida del modulo
  8. Comunicazione del server
  9. Localizzazione
  10. Iniezione di dipendenza
  11. Ambiente di test completo (entrambe le unità, e2e)

controlla questa presentazione e questa grande introduzione

Non dimenticare di leggere la guida ufficiale per gli sviluppatori

O imparalo da questi fantastici tutorial video

Se vuoi guardare altri video tutorial, dai un'occhiata a questo post, Raccolta dei migliori 60+ tutorial AngularJS .

È possibile utilizzare jQuery con AngularJS senza alcun problema.

In effetti, AngularJS utilizza jQuery Lite, che è un ottimo strumento.

Dalle FAQ

Angular utilizza la libreria jQuery?

Sì, Angular può utilizzare jQuery se è presente nella tua app quando l'applicazione viene avviata. Se jQuery non è presente nel percorso dello script, Angular torna alla propria implementazione del sottoinsieme di jQuery che chiamiamo jQLite.

Tuttavia, non provare a utilizzare jQuery per modificare il DOM nei controller AngularJS, fallo nelle direttive.

Aggiornare:

Angular2 è stato rilasciato. Ecco un grande elenco di risorse per i principianti


8
Devo sviluppare l'applicazione completa in Angular js o posso usarla su alcune pagine e su alcune apges uso jquery semplice
Mirage

8
+1 Ottima risposta. Direi che Angular si avvicina al modello MVVM.
GFoley83,

8
Sono abbastanza sicuro che Angular sia un MVW
iConnor,

2
Per diversi anni, è stato vicino a MVC. Ma ora per quanto riguarda il factoring e il miglioramento dell'api, è più vicino a MVVM. In Angular $ scope, funziona come una macchina virtuale (visualizza modello).
Invincibile,

14
Per tutti i futuri che si chiedono (come lo ero io), MVW == Model-View-qualunque cosa , come in " m odel- v iew- w hatever-works-for-you" . In altre parole, MV * .
David Frye,

40

Voglio aggiungere qualcosa riguardo la differenza di AngularJS con jQuery dal punto di vista di uno sviluppatore.

In AngularJS devi avere una visione e un approccio molto strutturati su ciò che vuoi realizzare. A malapena sta seguendo un modo lineare per completare un compito, ma piuttosto, gli scambi tra vari oggetti si prendono cura delle richieste e delle azioni, che, quindi, sono necessarie in quanto angolare è un framework basato su MVC . Richiede anche un progetto almeno generale dell'applicazione finalizzata, poiché la codifica dipende molto da come si desidera che le interazioni vengano completate.

jQuery è come una poesia libera , scrivi linee e mantieni alcune relazioni e slancio appropriati per il tuo compito da compiere.

Sebbene, in Angular JS, dovresti seguire alcune regole oltre a mantenere lo slancio e le relazioni appropriate, forse è più simile al sonetto classico Spencer (un famoso poeta classico) il cui poema è strutturale e legato a molte regole.

Rispetto ad AngularJS, jQuery è più simile a una raccolta di codici e funzioni (che, come già accennato, è ottimo per la manipolazione del DOM e il raggiungimento di effetti rapidi), mentre AngularJS è un vero e proprio framework che offre allo sviluppatore la possibilità di costruire un web aziendale -applicazione con un sacco di dati vincolanti e scambio all'interno di un routing e gestione superbamente organizzati.

Inoltre, AngularJS non ha alcuna dipendenza da jQuery per completare il suo compito. Ha due caratteristiche superbe che non si trovano in jQuery in alcun senso:

1- Angular JS ti insegna come CODIFICARE e raggiungere un obiettivo, non solo raggiungere un obiettivo in alcun modo. Vale la pena ricordare che AngularJS utilizza pienamente il nucleo e il cuore di Javascripts e ti apre la strada per incorporare nella tua app, tecniche come DI (dipendenza-iniezione). Per lavorare con angularJS dovresti (o devi) imparare tecniche più elevate di codifica con Javascript.

2- Angular JS è completamente indipendente per gestire le direttive e strutturare la tua app; potresti semplicemente affermare che jQuery può fare lo stesso (indipendenza), ma, in effetti, AngularJS, come più volte menzionato nelle righe precedenti, ha l'indipendenza nel modo più eccellente possibile strutturalmente basato su MVC.

Un'ultima nota è che non esiste una guerra di nomi, dal momento che è molto inquietante essere di parte o soggettivi. La grandezza e la grandezza di jQuery sono state dimostrate, ma i loro usi e limiti (di qualsiasi framework o software) sono le preoccupazioni della discussione e di dibattiti simili in merito.

Aggiornare:

L'uso di AngularJS è decisivo in quanto è costoso in termini di implementazione, ma trova una solida base per la futura espansione, trasformazione e manutenzione dell'applicazione. AngularJS è per il nuovo mondo del web. Si rivolge alla creazione di applicazioni che sono caratterizzate dal minor consumo di risorse (caricamento delle sole risorse necessarie dal server), tempi di risposta rapidi e alto grado di manutenibilità ed estensibilità racchiusi in un sistema strutturato.


"Per lavorare con angularJS dovresti (o devi) imparare tecniche più elevate di codifica con Javascript" - per favore, mi dia degli esempi di cosa intendi per essere tecniche elevate?
antew

@MostafaTalebi, stavo solo scherzando, ma non ho capito bene "JavaScript è più un concetto ??" Cosa significa questo?? potresti spiegare di più? ehh ci siamo comunque in contatto ??
Azerafati,

Voglio dire, è una sceneggiatura :)))
Mostafa Talebi,

Ho confuso una cosa! per esempio usiamo php per lato server e prendiamo il nostro framework basato sul concetto MVC e in template che usiamo javascript usiamo anche j angolari quindi qui js angolari MVC è inutile, no?
Farhad,

28

AngularJS: AngularJS è per lo sviluppo di applicazioni Web pesanti. AngularJS può utilizzare jQuery se è presente nell'app Web quando l'applicazione viene avviata. Se non è presente nel percorso dello script, AngularJS ricorre alla propria implementazione del sottoinsieme di jQuery.

JQuery: jQuery è una libreria JavaScript piccola, veloce e ricca di funzionalità. Rende molto più semplici le operazioni di spostamento e manipolazione dei documenti HTML, la gestione degli eventi, l'animazione e Ajax. jQuery semplifica molte delle cose complicate da JavaScript, come le chiamate AJAX e la manipolazione del DOM.

Leggi maggiori dettagli qui: angularjs-vs-jquery


20

Penso che questo sia un ottimo grafico che descrive le differenze in breve. Una rapida occhiata mostra la maggior parte delle differenze.

inserisci qui la descrizione dell'immagine

Una cosa che vorrei aggiungere è che, AngularJS può essere fatto seguire il modello di progettazione MVVM mentre jQuery non segue nessuno dei modelli standard orientati agli oggetti.


12

Funzionano a diversi livelli.

Il modo più semplice di vedere la differenza, dal punto di vista dei principianti, è che jQuery è essenzialmente un estratto di JavaScript, quindi il modo in cui progettiamo una pagina per JavaScript è praticamente come lo faremo per jQuery . Inizia con il DOM, quindi crea un livello comportamentale. Non così con Angular.Js . Il processo inizia davvero da zero, quindi il risultato finale è la vista desiderata.

Con jQuery esegui manipolazioni dom, con Angular.Js crei intere applicazioni web.


jQuery è stato creato per sottrarre le varie idiosincrasie del browser e lavorare con il DOM senza dover aggiungere controlli IE6 e così via. Nel tempo, ha sviluppato un'API bella e robusta che ci ha permesso di fare molte cose, ma alla base è pensata per gestire il DOM, trovare elementi, cambiare l'interfaccia utente e così via. Pensa che funzioni direttamente con dadi e bulloni.

Angular.Js è stato creato come strato sopra jQuery , per aggiungere concetti MVC all'ingegneria front-end. Invece di offrirti le API per lavorare con DOM, Angular.Js ti offre componenti personalizzati, templating, personalizzati per i dati (simili all'interfaccia utente di jQuery , ma dichiarativi invece di attivarsi tramite JS) e molto altro ancora. Pensa che funzioni a un livello superiore, con componenti che puoi collegare insieme, anziché direttamente a livello di dadi e bulloni.

Inoltre , Angular.Js offre strutture e concetti che si applicano a vari progetti, come controller, servizi e direttive. jQuery stesso può essere utilizzato in diversi modi (gazillion) per fare la stessa cosa. Per fortuna, questo è molto meno con Angular.Js , il che rende più facile entrare e uscire dai progetti. Offre un modo sano per più persone di contribuire allo stesso progetto, senza dover riapprendere un sistema da zero.


Un breve confronto può essere questo-

jQuery

  • Può essere facilmente utilizzato da coloro che hanno una conoscenza adeguata dei selettori CSS
  • È una libreria utilizzata per le manipolazioni DOM
  • Non ha nulla a che fare con i modelli
  • Manipola facilmente il contenuto di una pagina web
  • Applica gli stili per rendere l'interfaccia utente più attraente
  • Attraversamento DOM facile
  • Effetti e animazione
  • Semplice per effettuare chiamate AJAX e
  • Facilità d'uso
  • non ha una funzione di rilegatura bidirezionale
  • diventa complesso e difficile da mantenere quando aumenta la dimensione di un progetto
  • A volte devi scrivere più codice per ottenere la stessa funzionalità di Angular.Js

Angular.Js

  • È un framework MVVM
  • Utilizzato per la creazione di SPA (applicazioni a pagina singola)
  • Ha caratteristiche chiave come routing, direttive, associazione dati bidirezionale, modelli, iniezione di dipendenza, unit test ecc
  • è modulare
  • Manutenibile quando le dimensioni del progetto aumentano
  • è veloce
  • Pattern basato su MVC REST friendly di associazione dati bidirezionale
  • Deep Linking
  • templating
  • Convalida del modulo integrato
  • Iniezione di dipendenza
  • Localizzazione
  • Ambiente di test completo
  • Comunicazione del server

E altro ancora

inserisci qui la descrizione dell'immagine

Penso che questo aiuti.

Altro può essere trovato -


3

Jquery: -

jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and its lightweight as well as fast.

So, using jQuery, we can:

easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more 

AngularJS: -

AngularJS is a product by none other the Search Engine Giant Google and its an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.

As being a framework, it dictates us to follow some rules and a structured approach. Its
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).

In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:

Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.