Direttiva AngularJS vs Service vs Controller

14

Sto per iniziare a implementare una richiesta di modifica sul sito Web interno delle mie società, che controllerà un gruppo di campi e li evidenzierà se corrispondono a determinate linee guida. Ad esempio, se la data di nascita è oggi, quel campo sarà delineato e il suggerimento suggerirà "Augurigli un buon compleanno!".

Le specifiche chiedono che questo venga caricato dopo che il resto della pagina ha finito il rendering, quindi non aumenterà il tempo di caricamento. Dal momento che sono nuovo in AngularJS, non sono sicuro dei modi "corretti" in cui ciò dovrebbe essere fatto.

Problemi:

Poiché questo include l'aggiunta di bordi e immagini e attributi del titolo (manipolazione DOM), sembra che dovrei usare una direttiva.

Tuttavia, questo non sarà riutilizzabile o "breve" come sembra essere la maggior parte delle direttive.

La metà dei dati che ho bisogno di verificare verrà restituita nella chiamata originale al caricamento della pagina, quindi vorrei salvarla e non sprecare un'altra chiamata recuperandola, il che mi fa pensare che un servizio sarebbe bello per la memorizzazione di tutti quei dati.

So come fare tutto questo nel controller, ma questo è un brutto codice errato: P

Qualche idea sul modo migliore in cui ciò potrebbe essere fatto? Fondamentalmente, avrò bisogno di una chiamata http per controllare tutti i dati, che restituiranno un oggetto con valori bool per ogni tipo di "Call Out" che devo fare. Quindi visualizzerò questo elenco e se il valore è true, aggiungi un testo di bordo, immagine e descrizione comandi.

Non sono sicuro che questa domanda sia abbastanza chiara, quindi se vuoi che aggiunga qualche dettaglio, per favore chiedi. Grazie!

    
posta Bobo 04.08.2014 - 22:56
fonte

1 risposta

26

Hai ragione, ci sono molte opzioni in gioco.

Un controller è un buon punto di partenza per scrivere qualcosa di nuovo in modo angolare. Legando un controller a un pezzo di markup puoi utilizzare la già esistente libreria di angolari con i servizi esistenti di angular.

Dopo un brevissimo periodo di convivenza con questo, ti renderai conto che il tuo controller è diventato troppo grande. Bene, ora è tempo di refactoring. Ecco le linee guida generali che tendo a seguire.

  • Controller: i controllori collegano e gestiscono valori / funzionalità legati al $ scope. In definitiva $ scope tende ad essere strongmente presentation driven . IE è un modello di visualizzazione.
  • Servizi: i servizi tendono a legare infrastruttura, back-end o altre funzionalità del browser
  • Direttive: le direttive consentono di integrare eventi / funzionalità DOM non gestiti da gestori esistenti.

Quindi vorrai inserire il codice in una delle tre direzioni:

  1. Il codice dal mio controller è in realtà logicamente un altro pezzo di dati di presentazione / logica e dovrebbe essere suddiviso in un altro controller . Nota quando lavori con gli oggetti su $ scope, è meglio separare le parti di cui ogni controller è responsabile nei propri oggetti su $ scope. Ad esempio $ scope.creditCard. [Blah] per un controller vs $ scope.billingAddress. [Blah] per un altro controller. Questo aiuta a prevenire problemi con l'uso angolare dell'ereditarietà del prototipo su $ scope.

  2. Il codice del mio controller è un'infrastruttura applicativa o un codice di utilità, che potrebbe dover essere condiviso tramite l'app e deve essere suddiviso in un servizio

  3. Il codice del mio controller è strongmente correlato alla presentazione / organizzazione DOM, e quindi dovrebbe essere suddiviso nella sua stessa direttiva

Un esempio di 1. potrebbe essere quello di gestire l'inserimento / convalida della carta di credito separatamente dal resto del modulo di pagamento. Avresti una serie di logiche di carte di credito in un controller separato dalla logica per consentire agli utenti di inserire gli indirizzi, quindi sarebbero controllori logicamente separati.

Un esempio di 2 potrebbe essere spostare la parte che comunica con il servizio di back-end della carta di credito per accettare / rifiutare il pagamento. Oppure un altro esempio potrebbe essere un modulo che parla al back-end per gestire l'API di creazione dell'utente.

Un esempio di 3 potrebbe essere quello di creare una sorta di funzionalità di tabulazione automatica che sposta il cursore tra le 4 caselle di modifica dopo che sono stati immessi 4 numeri per una carta di credito.

Dividi la tua app di conseguenza.

    
risposta data 05.08.2014 - 00:02
fonte

Leggi altre domande sui tag