Ho usato principalmente la libreria jQuery e ho appena iniziato ad usare AngularJS. Ho letto alcuni tutorial su come usare Angular, ma non sono chiaro sul perché o quando usarlo o sui vantaggi che potrei trovare rispetto all'uso di jQuery.

Mi sembra che Angular ti faccia pensare a MVC, il che forse significa che vedi la tua pagina web come una combinazione modello + dati. Usi {{data bindings}}ogni volta che ritieni di avere dati dinamici. Angular ti fornirà quindi un gestore $ scope, che puoi popolare staticamente o tramite chiamate al server web. Ciò appare tipicamente simile al modo JSP di progettare pagine Web. Ho bisogno di Angular per questo?

Per una semplice manipolazione del DOM, che non comporta la manipolazione dei dati (ad esempio: cambi di colore al passaggio del mouse, nascondere / mostrare elementi al clic), JQuery o Vanilla JS sono sufficienti e più puliti. Questo presuppone che il modello in mvc di angular sia qualcosa che rifletta i dati sulla pagina e, quindi, le proprietà CSS come colore, visualizzazione / nascondi, ecc., Le modifiche non influiscono sul modello . Angular ha qualche vantaggio rispetto a JQuery o alla vaniglia JS per manipolazioni DOM?

Cosa può fare Angular che lo rende utile per lo sviluppo rispetto a ciò che jQuery può fare insieme ai plugin?

Associazione dati

Vai in giro a creare la tua pagina web e continui a mettere {{data bindings}} ogni volta che ritieni di avere dati dinamici. Angular ti fornirà quindi un gestore $ scope, che puoi popolare (staticamente o tramite chiamate al web server).

Questa è una buona conoscenza dell'associazione dei dati. Penso che tu l'abbia abbattuto.

Manipolazione DOM

Per una semplice manipolazione del DOM, che non implica la manipolazione dei dati (ad esempio: cambi di colore al passaggio del mouse, nascondere / mostrare elementi al clic), jQuery o js di vecchia scuola sono sufficienti e più puliti. Ciò presuppone che il modello in mvc di angular sia qualcosa che rifletta i dati sulla pagina e, quindi, le proprietà css come il colore, la visualizzazione / nascondi, ecc., Le modifiche non influiscono sul modello.

Vedo il tuo punto qui sul fatto che la manipolazione DOM "semplice" sia più pulita, ma solo raramente e dovrebbe essere davvero "semplice". Penso che la manipolazione del DOM sia una delle aree, proprio come l'associazione dei dati, in cui Angular brilla davvero. Capire questo ti aiuterà anche a vedere come Angular considera le sue opinioni.

Inizierò confrontando il modo angolare con un approccio alla vaniglia alla manipolazione del DOM. Tradizionalmente, pensiamo all'HTML come non "fare" nulla e lo scriviamo come tale. Quindi, js inline, come "onclick", ecc. Sono cattive pratiche perché mettono il "fare" nel contesto dell'HTML, che non "fa". Angular ribalta quel concetto in testa. Mentre scrivi la tua vista, pensi all'HTML come a essere in grado di "fare" molte cose. Questa capacità viene sottratta alle direttive angolari, ma se esistono già o le hai scritte, non devi considerare "come" è fatto, basta usare il potere reso disponibile in questo HTML "aumentato" che angolare ti permette di usare. Ciò significa anche che TUTTA la logica della vista è veramente contenuta nella vista, non nei tuoi file javascript. Ancora una volta, il ragionamento è che le direttive scritte nei tuoi file javascript potrebbero essere considerate in grado di aumentare la capacità dell'HTML, quindi ti preoccupi del DOM di manipolarsi (per così dire). Lo dimostrerò con un semplice esempio.

Questo è il markup che vogliamo usare. Gli ho dato un nome intuitivo.

<div rotate-on-click="45"></div>

Innanzitutto, vorrei solo commentare che se abbiamo fornito al nostro HTML questa funzionalità tramite una direttiva angolare personalizzata, abbiamo già finito . È una boccata d'aria fresca. Più su questo in un momento.

Implementazione con jQuery

demo live qui (clicca).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Implementazione con Angular

demo live qui (clicca).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

Abbastanza leggero, MOLTO pulito e questa è solo una semplice manipolazione! A mio avviso, l'approccio angolare vince sotto tutti gli aspetti, in particolare il modo in cui la funzionalità viene sottratta e la manipolazione del dom viene dichiarata nel DOM. La funzionalità è agganciata all'elemento tramite un attributo html, quindi non è necessario interrogare il DOM tramite un selettore e abbiamo due belle chiusure: una chiusura per la factory della direttiva in cui le variabili sono condivise tra tutti gli usi della direttiva e una chiusura per ogni utilizzo della direttiva nella linkfunzione (ocompile funzione).

L'associazione dati bidirezionale e le direttive per la manipolazione del DOM sono solo l'inizio di ciò che rende Angular eccezionale. Angular promuove che tutto il codice sia modulare, riutilizzabile e facilmente testabile e include anche un sistema di routing di app a pagina singola. È importante notare che jQuery è una libreria di metodi di convenienza / cross-browser comunemente necessari, ma Angular è un framework completo per la creazione di app a pagina singola. Lo script angolare include in realtà la sua versione "lite" di jQuery in modo che siano disponibili alcuni dei metodi più essenziali. Pertanto, potresti argomentare che l'utilizzo di Angular IS con jQuery (leggermente), ma Angular offre molta più "magia" per aiutarti nel processo di creazione di app.

Questo è un ottimo post per informazioni più correlate: come faccio a "pensare in AngularJS" se ho uno sfondo jQuery?

Differenze generali.

I punti di cui sopra sono rivolti alle preoccupazioni specifiche del PO. Darò anche una panoramica delle altre importanti differenze. Suggerisco di fare ulteriori letture su ogni argomento.

Angular e jQuery non possono essere ragionevolmente confrontati.

Angular è un framework, jQuery è una libreria. Le strutture hanno il loro posto e le biblioteche hanno il loro posto. Tuttavia, non c'è dubbio che un buon framework abbia più potere nella scrittura di un'applicazione di una libreria. Questo è esattamente il punto di un quadro. Puoi scrivere il tuo codice in semplice JS, oppure puoi aggiungere una libreria di funzioni comuni oppure puoi aggiungere un framework per ridurre drasticamente il codice necessario per realizzare la maggior parte delle cose. Pertanto, una domanda più appropriata è:

Perché usare un framework?

Buoni framework possono aiutare a progettare il tuo codice in modo che sia modulare (quindi riutilizzabile), DRY, leggibile, performante e sicuro. jQuery non è un framework, quindi non aiuta in questo senso. Abbiamo visto tutti i muri tipici del codice spaghetti jQuery. Questo non è colpa di jQuery - è colpa degli sviluppatori che non sanno come progettare il codice. Tuttavia, se gli sviluppatori sapessero come progettare il codice, finirebbero per scrivere una sorta di "framework" minimale per fornire la base (architettura, ecc.) Di cui ho discusso un momento fa, o aggiungerebbero qualcosa. Ad esempio, tu potrebbe aggiungere RequireJS per agire come parte del framework per scrivere un buon codice.

Ecco alcune cose che forniscono i quadri moderni:

• templating
• Associazione dati
• routing (app a pagina singola)
• architettura pulita, modulare, riutilizzabile
• sicurezza
• funzioni / caratteristiche aggiuntive per comodità

Prima di discutere ulteriormente di Angular, vorrei sottolineare che Angular non è l'unico nel suo genere. Durandal, ad esempio, è un framework basato su jQuery, Knockout e RequireJS. Ancora una volta, jQuery non può, da solo, fornire ciò che Knockout, RequireJS e l'intero framework costruito su di essi possono. Non è paragonabile.

Se devi distruggere un pianeta e hai una Morte Nera, usa la Morte Nera.

Angolare (rivisitato).

Basandomi sui miei precedenti punti su ciò che forniscono i framework, mi piacerebbe lodare il modo in cui Angular li fornisce e cercare di chiarire perché questa questione è di fatto superiore a quella di jQuery.

Riferimento DOM.

Nel mio esempio sopra, è assolutamente inevitabile che jQuery debba collegarsi al DOM per fornire funzionalità. Ciò significa che la vista (html) è preoccupata per la funzionalità (perché è etichettata con un qualche tipo di identificatore - come "slider immagine") e JavaScript è preoccupato per fornire quella funzionalità. Angular elimina tale concetto tramite l'astrazione. Il codice scritto correttamente con Angular significa che la vista è in grado di dichiarare il proprio comportamento. Se voglio visualizzare un orologio:

<clock></clock>

Fatto.

Sì, dobbiamo andare su JavaScript per fare in modo che significhi qualcosa, ma lo stiamo facendo in modo opposto rispetto all'approccio jQuery. La nostra direttiva angolare (che è nel suo piccolo mondo) ha "aumentato" l'html e l'html aggancia la funzionalità in sé.

MVW Architecure / Moduli / Iniezione delle dipendenze

Angular ti offre un modo semplice per strutturare il tuo codice. Le cose della vista appartengono alla vista (html), la funzionalità della vista aumentata appartiene alle direttive, altre logiche (come le chiamate ajax) e le funzioni appartengono ai servizi e la connessione dei servizi e della logica alla vista appartiene ai controller. Esistono anche altri componenti angolari che aiutano a gestire la configurazione e la modifica dei servizi, ecc. Qualsiasi funzionalità creata è automaticamente disponibile ovunque sia necessaria tramite il sottosistema Injector che si occupa dell'iniezione delle dipendenze in tutta l'applicazione. Quando scrivo un'applicazione (modulo), la suddivido in altri moduli riutilizzabili, ognuno con i propri componenti riutilizzabili, e poi li includo nel progetto più grande. Una volta risolto un problema con Angular, l'ho risolto automaticamente in modo utile e strutturato per essere riutilizzato in futuro e facilmente incluso nel prossimo progetto. UNL'enorme vantaggio di tutto questo è che il tuo codice sarà molto più facile da testare.

Non è facile far "funzionare" le cose in angolare.

GRAZIE A DIO. Il suddetto codice spaghetti jQuery derivava da uno sviluppatore che ha fatto "funzionare" qualcosa e poi è passato. Puoi scrivere un cattivo codice angolare, ma è molto più difficile farlo, perché Angular ti combatterà al riguardo. Ciò significa che devi sfruttare (almeno un po ') l'architettura pulita che fornisce. In altre parole, è più difficile scrivere codice errato con Angular, ma è più conveniente scrivere codice pulito.

L'angolare è tutt'altro che perfetto. Il mondo dello sviluppo web è sempre in crescita e in cambiamento e ci sono modi nuovi e migliori proposti per risolvere i problemi. React e Flux di Facebook, ad esempio, hanno alcuni grandi vantaggi rispetto ad Angular, ma presentano i loro svantaggi. Niente è perfetto, ma Angular è stato ed è ancora fantastico per ora. Proprio come una volta jQuery ha aiutato il mondo del web ad andare avanti, così ha fatto Angular, e così faranno molti a venire.