Diciamo che voglio creare un'app AngularJS (Angular 1.x). La pagina avrà due sezioni: a sinistra, un pannello con una serie di input utente: caselle di testo, pulsanti di opzione, ecc. Sulla destra, un tipo di display il cui output è determinato da questi input dell'utente, forse un grafico o una tabella qualcosa.
In qualche modo, i dati devono passare dal pannello di input al pannello di output.
Dopo aver esaminato diversi libri Angular e trascorso molto tempo a guardare tutorial e post di blog online, ci sono solo due modi per farlo che posso trovare:
-
Associa gli elementi di input nel pannello di input a un gruppo di variabili utilizzando
ng-model. Entrambe le variabili devono essere incluse nello scope principale, oppure il controller per il pannello di input deve guardarle per le modifiche e quindi usare$scopeper inserire i valori nello scope di root. In entrambi i casi, il riquadro di input (e output) deve conoscere i nomi delle variabili nello scope di root. Questo è un accoppiamento stretto. Questo non è modulare. Questo mi rende triste. -
Crea i riquadri angolari di input e di output. Ora posso passare in variabili tramite attributi di tag HTML tramite binding, che si comportano come argomenti di funzione in un aspetto importante: il componente non ha bisogno di conoscere il nome di alcuna variabile nello scope di root. Questo non è strettamente accoppiato, il che mi rende felice. Ma devo usare un modello, il che è sconveniente - il mio HTML si sta dividendo in pezzi più piccoli e più piccoli sparsi su molti file solo per poter ridurre l'accoppiamento nel mio codice.
L'altra cosa che non mi piace tanto dell'opzione (2) è che non ho l'impressione che sia quello che dovresti fare. Le persone parlano di Angular come se i controller fossero dove sono e i componenti sono proprio come uno strumento avanzato che usi in situazioni specifiche.
Qual è il modo previsto di strutturare un'applicazione in modo da avere un accoppiamento lento tra le varie parti e tuttavia passare ancora i dati tra quelle parti?