best practice angularjs con l'esempio

1

Sto cercando di capire come strutturare meglio le mie applicazioni angularjs senza sovraccaricare i miei controller con troppa logica. Mi sento come se avessi letto quasi tutti gli articoli sull'argomento ma speravo che qualcuno potesse essere in grado di fornire consigli basati su un esempio specifico. Ho inserito i requisiti seguenti per una schermata di lavoro (come in lavori per una società di servizi) e la funzionalità richiesta.

Requisiti:

  • I lavori sono elencati in una tabella e contengono le seguenti colonne: id, cliente, valore ($), data di scadenza
  • I dati provengono da un backend api (laravel / php) che fornisce un array json di oggetti con oggetti correlati annidati e array di oggetti. I dati sono crudi, ad es. valore ($) è 123,23 e la data di scadenza è il 2015-03-09.
  • Lo schermo contiene diversi filtri per selezionare un cliente da un elenco a discesa / completamento automatico o selezionando un intervallo di date per la data di scadenza. Il filtraggio viene eseguito lato server e il server prevede parametri di query con un oggetto filtro, ad es. filters = {due_date_from = '2015-03-07', due_data_to = '2015-03-09', customer_id = 123}
  • I filtri vengono applicati solo quando l'utente fa clic su un pulsante di filtro
  • Ogni colonna è ordinabile e l'ordinamento viene eseguito lato server, quindi il server si aspetta parametri di query con un oggetto di ordinamento, ad es. sort = [{by: 'due_date', dir: 'asc'}, {di: 'customer_id', dir: 'desc'}]
  • 25 lavori per pagina, il paging viene eseguito sul lato server, ad es. page = 2
  • Se i lavori sono in ritardo, la riga deve essere rossa
  • Lo stato dei filtri, il paging, gli ordinamenti dovrebbero essere memorizzati nell'URL e letti al momento dell'inizializzazione.
  • Un pulsante di ripristino dovrebbe cancellare tutti i filtri

Sto usando il modulo Restangular 3rd party per estrarre i dati dal lato server e ho usato i metodi extendModel per aggiungere funzioni di aiuto come isOverdue () che restituisce true / false.

Attualmente ho creato le seguenti proprietà e metodi nel mio JobsListController.

$scope.jobs = [];
$scope.filters = [];
$scope.sorts = [];
$scope.loadData = function(){}; //build data packet to send to server
$scope.sort = function(); // checks if column is currently sort in order to reverse direction
$scope.reset = function(){}; //clears filters, sorts and paging to send to server

Nel mio html ho le seguenti cose:

<input type="date" ng-model="filters.due_from" />

<td><a on-click="sortBy('customer_id')"></td>

In definitiva penso che la mia domanda sia, dovrei creare un servizio / fabbrica chiamato JobsListModel piuttosto che avere tutte queste funzionalità nel controller?

    
posta the-a-train 09.03.2015 - 01:05
fonte

2 risposte

2

Parlerò della mia piccola esperienza con AngularJS. Non direi assolutamente che è un sacco di logica, e comunque sembra che abbia a che fare con l'API lato server, laddove la logica aziendale è, suppongo, quindi è tutta logica della vista. Mi sembra perfettamente adatto.

Se sei preoccupato di avere troppa logica, comunque, prenderei davvero in considerazione l'aggiunta di alcuni test automatici.

    
risposta data 09.03.2015 - 02:14
fonte
0

Ecco i miei 2 centesimi da un progetto AngularJS che ho gestito negli ultimi 6 mesi. Anche se non sono affatto un esperto di Angular, ho scoperto i problemi e scoperto alcune cattive pratiche che ho avuto la tendenza a fare (e in qualche modo fissate lungo la strada).

I controllori sono un problema perché tendono a ottenere grasso da rally, a rally veloce. Se il tuo controller sta passando il segno delle 500 linee (o ti sembra che passerà molto presto) dovresti interrompere tutto e rifattare il tuo codice. un paio di cose che ho fatto sono state

  1. logica separata (recupero dati remoto) e controller (visualizzazione dei dati visualizzati) logica, questa è la prima cosa che dovresti fare quando scrivi la tua app, se hai errori nella gestione delle tue chiamate http, mandale al servizio. che dovrebbe eliminare un paio di linee nei controller. dovresti disaccoppiare il codice in base alla logica o ai tipi di lavoro.

  2. puoi assegnare più di un controller per visualizzazione. Nel mio progetto ho dovuto scrivere una dashboard che recupera dati in diversi grafici in una vista e popola ~ 5 tabelle di log, tutte nella stessa vista. Ho separato la visualizzazione dashboard in 2 controller, uno per gestire i grafici e l'altro per le tabelle di registro. Potrei separare il controller dei grafici ancora di più in futuro.

  3. filtri, non importa quanto piccoli debbano essere nei loro file, ogni nuovo modulo che assegni al tuo progetto dovrebbe avere il proprio file, mantiene le cose organizzate

  4. Spesso mi sono trovato a fare una convalida complessa nei miei controller (un esempio è quello di convalidare un campo di input come indirizzo ip valido), puoi invece scrivere una direttiva e migrare quella logica laggiù.

  5. le guide di stile sono i tuoi migliori amici! eccone un paio di buoni, questo e quello

risposta data 25.05.2015 - 09:28
fonte

Leggi altre domande sui tag