Panoramica di AngularJS Architecture

AngularJS è un framework progettato per estendere le capacità dell'HTML dal semplice linguaggio statico a un linguaggio più dinamico e intuitivo per i dati lato client. AngularJS è JavaScript al 100%. Aiuta a scrivere un codice lato client più gestito. Offre allo sviluppatore un maggiore controllo del codice e poteri di manipolazione dei dati sul lato client stesso. Per raggiungere questo obiettivo, AngularJS ha adottato un modello di progettazione adeguato. Questo si chiama modello MVC. Comprendiamo di più al riguardo nella prossima sezione. In questo argomento, impareremo a conoscere AngularJS Architecture .

L'architettura

AngularJS è basato sul modello di progettazione MVC. I principi alla base dell'architettura MVC sono ben integrati in AngularJS. È possibile che MVC sia un'architettura solida per molte lingue lato server. AngularJS ha unito il modello MVC anche sul lato client.

MVC - Modello, vista, controller

Il modello MVC sta per modello Controller vista modello.

  • Modello

È il livello più basso dell'architettura. È responsabile della conservazione e della gestione dei dati dell'applicazione. I dati vengono mantenuti per tutto il ciclo di vita della pagina e talvolta anche tra le pagine. Il modello si aggiorna automaticamente in base alle istruzioni ricevute dal controller.

  • Visualizza

Una vista è la faccia frontale dell'applicazione. È il livello di presentazione dell'architettura responsabile della visualizzazione dei dati per l'utente. Contiene il codice completo per le pagine dell'interfaccia utente in qualsiasi linguaggio compatibile con browser, in genere HTML. La vista è attivata dal rispettivo controller. Una vista invia richieste al suo controller in base all'interazione dell'utente con l'applicazione. Il controller quindi rigenera la vista in base alla risposta ricevuta dal server.

  • controllore

Un controller è il cervello di elaborazione dietro la vista e il modello. Prende le decisioni per generare, rigenerare o distruggere la vista e il modello. Tutte le operazioni aziendali e le logiche di codice sono scritte all'interno del controller. (Alcuni sviluppatori preferiscono scrivere la logica aziendale nel Modello stesso). Il controller è inoltre responsabile dell'invio di richieste al server e della ricezione di una risposta. Quindi aggiorna la vista e il modello in base alla risposta. In breve, il controller controlla tutto.

L'architettura MVC può essere rappresentata graficamente attraverso l'immagine qui sotto.

MVC è robusto perché si basa sul principio di sviluppo software di Separation of Concerns. Esistono diversi controller che gestiscono set di dati specifici e gestiscono le rispettive viste e modelli. La logica dell'applicazione è quindi separata dal livello dell'interfaccia utente.

MVC in AngularJS

Tutto riguardava MVC e i suoi principi. Come vengono implementati questi principi in AngularJS? Facci capire.

  • Scope - Scope è il modello che contiene i dati dell'applicazione. Le variabili di ambito sono associate al DOM e le proprietà delle variabili sono accessibili tramite collegamenti.
  • HTML con associazione dati - La vista in AngularJS non è un normale HTML. È un HTML con associazione a dati. L'associazione dei dati aiuta a rendere dinamici i dati nei tag HTML. In questo modo, il modello aggiorna regolarmente il DOM.
  • ngController - La direttiva ngController è responsabile della collaborazione tra modello, vista e logica aziendale. La classe controller specificata dalla direttiva ngController controlla l'ambito e la vista.

Panoramica concettuale

Bene, ora capiamo che AngularJS è basato sull'architettura MVC. È tutto? Non c'è nient'altro in gioco? Certo che c'è.

Vi sono alcuni concetti importanti che è necessario comprendere per comprendere il comportamento delle applicazioni AngularJS. Capiamoli.

  • Modelli

I modelli sono gli elementi HTML insieme agli elementi e agli attributi specifici di AngularJS. La dinamicità nelle applicazioni AngularJS si ottiene combinando il modello con i dati del modello e del controller.

  • direttive

Le direttive sono attributi o elementi che rappresentano un componente DOM riutilizzabile. Le direttive manipolano direttamente il DOM HTML sottostante per eseguire il rendering della vista dinamica. Ciò allevia lo sviluppatore dal preoccuparsi di elementi e attributi HTML nativi.

  • Binding dati bidirezionale

AngularJS sincronizza automaticamente i dati tra il modello e la vista mediante l'associazione dati. Il modello è considerato come un'unica fonte di verità per i dati dell'applicazione. La vista è una proiezione del modello in ogni momento. Non appena il modello cambia, la vista cambia e viceversa. Questo è definito come rilegatura a due vie. Si ottiene attraverso la compilazione live del modello sul browser.

  • Routing

Le applicazioni AngularJS sono applicazioni a pagina singola (SPA), molta attenzione è rivolta al routing tra le pagine. AngularJS ha un robusto meccanismo di routing che fa corrispondere l'URL dall'elenco dei percorsi specificati nel router associato al componente. Ciò significa che ogni volta che un browser richiede un URL, viene visualizzato un componente figlio associato anziché un'intera pagina.

  • Servizi

Un controller è accoppiato con una vista. Ciò significa che è buona norma scrivere solo quel codice all'interno del controller che è logicamente utile per la sua visualizzazione. La logica indipendente dalla vista può essere spostata altrove in modo da poter essere riutilizzata anche da altri controller.

Ecco che arrivano i servizi in azione. I servizi separano la logica aziendale riutilizzabile dalla logica specifica della vista. La logica specifica della vista risiede quindi all'interno dei controller specifici mentre la logica aziendale comune è condivisa da tutti i controller.

Come regola generale del pollice, anche il codice per accedere ai dati di backend è scritto nei servizi.

  • Iniezione di dipendenza

Ora che abbiamo spostato le logiche indipendenti dalla vista in un percorso condiviso, come possiamo controllare le autorizzazioni per accedere ai servizi condivisi? Questo viene fatto tramite Dependency Injection (DI). Dependency Injection è un modello di progettazione software che si occupa di come vengono creati gli oggetti e di come ottengono le loro dipendenze. Tutto in AngularJS, dalle direttive ai controller ai servizi e praticamente tutto, è cablato tramite DI.

Curiosità dell'architettura AngularJS

AngularJS è stato chiamato AngularJS a causa delle parentesi angolari nei tag HTML. Il progetto è stato progettato per rendere l'HTML più dinamico e intuitivo per i dati, e quindi gli sviluppatori hanno deciso di chiamarlo come parentesi angolari nell'HTML.

Conclusione - AngularJS Architecture

L'articolo copre tutti i concetti importanti dell'architettura AngularJS. Questo è un buon vantaggio per comprendere il funzionamento di vari elementi dell'applicazione AngularJS. Il prossimo passo è creare un'applicazione AngularJS multi-controller completamente funzionale che recupera anche i dati dal back-end. Questo ti farebbe fare pratica pratica sui concetti di AngularJS.

Articoli consigliati

Questa è una guida all'architettura AngularJS. Qui discutiamo l'architettura, MVC in angularjs e panoramica concettuale. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -

  1. Carriera in AngularJS
  2. Domande di intervista di AngularJS
  3. Che cos'è Backbone.js?
  4. Software di data mining

Categoria:

Sviluppo software