Qual è la differenza tra servizio, direttiva e modulo?

Ho letto molti documenti e sto diventando sempre più confuso. Fondamentalmente non riesco a capire la differenza tra a

• servizio
• direttiva
• modulo

Vedo molti componenti personalizzati. A volte usano direttive, a volte servizi. Si inizia sempre con un modulo. Qualcuno può spiegare con un esempio qual è la differenza tra questi tre tipi?

Pensa a un modulo come a un luogo in cui collegare una serie di altre cose, come direttive, servizi, costanti, ecc. I moduli possono essere iniettati in altri moduli offrendo un elevato livello di riutilizzo.

Quando si scrive un'app angolare, si avrebbe un modulo di livello superiore che è il codice dell'applicazione (senza modelli).

I servizi sono principalmente un modo per comunicare tra i controller, ma è possibile iniettare un servizio in un altro. I servizi vengono spesso utilizzati come modo per accedere agli archivi dati e le persone eseguiranno il wrapping delle API angolari, come ngResource. Questa tecnica è utile poiché rende i test (in particolare beffardi) abbastanza facili. Puoi avere servizi per fare altre cose come autenticazione, registrazione ecc.

Le direttive vengono utilizzate per creare widget o avvolgere cose esistenti come i plugin jquery. Il wrapping dei plug-in esistenti può essere una sfida e la ragione per cui lo faresti è stabilire un'associazione dati bidirezionale tra i plug-in e angolare. Se non hai bisogno di un'associazione di dati bidirezionale, non devi avvolgerli.

Una direttiva è anche un luogo per fare manipolazione DOM, catturare eventi DOM ecc. Non dovresti fare cose relative al DOM in controller o servizi. La creazione di direttive può diventare piuttosto complessa. IMHO, ti consiglio di guardare prima l'API per qualcosa che può fare quello che stai cercando O chiedere consiglio al gruppo Google di Angular.

Dalle mie note personali (principalmente frammenti di documenti, post di gruppi di Google e post SO):

moduli

• fornire un modo per servizi di spazio dei nomi / gruppi, direttive, filtri, informazioni di configurazione e codice di inizializzazione
• aiuta a evitare le variabili globali
• sono usati per configurare $ injector, permettendo che le cose definite dal modulo (o dall'intero modulo stesso) siano iniettate altrove (roba di Dependency Injection)
• I moduli angolari non sono correlati a CommonJS o Require.js. A differenza dei moduli AMD o Require.js, i moduli angolari non cercano di risolvere il problema dell'ordinamento del caricamento degli script o del recupero degli script pigri. Questi obiettivi sono ortogonali ed entrambi i sistemi di moduli possono vivere fianco a fianco e raggiungere i loro obiettivi (così sostengono i documenti).

Servizi

• sono singoli, quindi esiste solo un'istanza di ciascun servizio definito. Come singoli, non sono interessati dagli ambiti e quindi sono accessibili (condivisi con) più visualizzazioni / controller / direttive / altri servizi
• Puoi (e probabilmente dovresti) creare servizi personalizzati quando
  • due o più cose hanno bisogno dell'accesso agli stessi dati (non usare l'ambito radice) o vuoi semplicemente incapsulare ordinatamente i tuoi dati
  • vuoi incapsulare le interazioni con, diciamo, un web server (estendi $ risorse o $ http nel tuo servizio)
• I servizi integrati iniziano con '$'.
• Per utilizzare un servizio, è richiesta l'iniezione di dipendenza dal dipendente (ad es. Dal controller o da un altro servizio o da una direttiva).

Direttive (alcuni degli articoli seguenti dicono essenzialmente la stessa cosa, ma ho scoperto che a volte una dicitura leggermente diversa aiuta molto)

• sono responsabili dell'aggiornamento del DOM quando cambia lo stato del modello
• estendere il vocabolario HTML = insegnare ai nuovi trucchi HTML.
  Angular viene fornito con un set integrato di direttive (ad es. Ng- * cose) che sono utili per la creazione di applicazioni Web ma è possibile aggiungerne di proprie in modo che l'HTML possa essere trasformato in un linguaggio specifico di dominio dichiarativo (DSL). Ad esempio, gli elementi <tabs> e <pane> nella demo della home page di Angular "Creazione di componenti".
  • Direttive integrate non ovvie (perché non iniziano con "ng"): a, form, input, script, select, textarea. Sotto Angular, tutti fanno più del normale!
• Le direttive ti consentono di "componentizzare HTML". Le direttive sono spesso migliori di ng-include. Ad esempio, quando inizi a scrivere molto HTML con principalmente l'associazione di dati, rifletti quell'HTML in direttive (riutilizzabili).
• Il compilatore angolare consente di associare il comportamento a qualsiasi elemento o attributo HTML e persino di creare nuovi elementi o attributi HTML con comportamento personalizzato. Angular chiama queste direttive sulle estensioni di comportamento .
  • Quando si riduce tutto, una direttiva è solo una funzione che viene eseguita quando il compilatore angolare la incontra nel DOM.
• Una direttiva è un comportamento o una trasformazione DOM innescata da una presenza di un attributo, un nome di elemento, un nome di classe o un nome in un commento. La direttiva è un comportamento che dovrebbe essere attivato quando si incontrano costrutti HTML specifici nel processo di compilazione (HTML). Le direttive possono essere inserite in nomi di elementi, attributi, nomi di classi e commenti.
  • La maggior parte delle direttive sono limitate solo agli attributi. Ad esempio, DoubleClick utilizza solo direttive di attributo personalizzate.
• vedi anche Cos'è una direttiva angularjs?

Definire e raggruppare le cose angolari (roba di iniezione di dipendenza) in moduli.
Condividi i dati e avvolgi l'interazione del web server nei servizi.
Estendi HTML e manipola il DOM nelle direttive.
E rendere i controller il più "sottili" possibile.