Cos'è AngularJS? Architettura e Caratteristiche

Sommario:

Anonim

Cos'è AngularJS?

AngularJS è un framework Model-View-Controller open source simile al framework JavaScript.

Angular JS è probabilmente uno dei framework web moderni più popolari oggi disponibili. Questo framework viene utilizzato per lo sviluppo di applicazioni per lo più a pagina singola. Questo framework è stato sviluppato da un gruppo di sviluppatori della stessa Google.

Grazie al puro supporto di Google e alle idee di un ampio forum della community, il framework è sempre aggiornato. Inoltre, incorpora sempre le ultime tendenze di sviluppo nel mercato.

In questo tutorial imparerai-

  • Caratteristiche di AngularJS
  • Angularjs Architecture
  • Vantaggi di AngularJS

Caratteristiche di AngularJS

Angular ha le seguenti caratteristiche chiave che lo rendono uno dei potenti framework sul mercato.

  1. MVC - Il framework si basa sul famoso concetto di MVC (Model-View-Controller). Questo è un modello di progettazione utilizzato in tutte le applicazioni web moderne. Questo modello si basa sulla suddivisione del livello di logica aziendale, del livello dati e del livello di presentazione in sezioni separate. La divisione in diverse sezioni viene eseguita in modo che ognuna possa essere gestita più facilmente.

  2. Binding del modello di dati : non è necessario scrivere codice speciale per associare i dati ai controlli HTML. Questo può essere fatto da Angular semplicemente aggiungendo alcuni frammenti di codice.

  3. Scrivere meno codice - Quando si eseguiva la manipolazione DOM, era necessario scrivere molto JavaScript per progettare qualsiasi applicazione. Ma con Angular, rimarrai stupito dalla minore quantità di codice che devi scrivere per la manipolazione DOM.

  4. Pronto per gli unit test - I progettisti di Google non solo hanno sviluppato Angular, ma hanno anche sviluppato un framework di test chiamato "Karma" che aiuta nella progettazione di unit test per le applicazioni AngularJS.

Architettura AngularJS

Angular.js segue l'architettura MVC, il diagramma del framework MVC come mostrato di seguito.

Diagramma di architettura di Angularjs
  • Il Controller rappresenta il livello che ha la logica di business. Gli eventi utente attivano le funzioni memorizzate all'interno del controller. Gli eventi utente fanno parte del controller.

  • Le viste vengono utilizzate per rappresentare il livello di presentazione fornito agli utenti finali

  • I modelli vengono utilizzati per rappresentare i tuoi dati. I dati nel modello possono essere semplici come avere dichiarazioni primitive. Ad esempio, se stai gestendo un'applicazione studente, il tuo modello di dati potrebbe avere solo un ID studente e un nome. Oppure può anche essere complesso avendo un modello di dati strutturato. Se si mantiene una domanda di proprietà di un'auto, è possibile disporre di strutture per definire il veicolo stesso in termini di cilindrata, capacità di posti a sedere, ecc.

Vantaggi di AngularJS

  • Poiché si tratta di un framework open source, puoi aspettarti che il numero di errori o problemi sia minimo.

  • Associazione a due vie: Angular.js mantiene sincronizzati i dati e il livello di presentazione. Ora non è necessario scrivere codice JavaScript aggiuntivo per mantenere sincronizzati i dati nel codice HTML e successivamente i dati. Angular.js lo farà automaticamente per te. Devi solo specificare quale controllo è associato a quale parte del tuo modello.

  • Routing - Angular può occuparsi del routing, il che significa spostarsi da una vista all'altra. Questa è la chiave fondamentale delle applicazioni a pagina singola; in cui puoi passare a diverse funzionalità nella tua applicazione web in base all'interazione dell'utente ma rimanere sulla stessa pagina.

  • Angular supporta i test, sia Unit Testing che Integration Testing.

  • Estende l'HTML fornendo i propri elementi chiamati direttive. Ad alto livello, le direttive sono marcatori su un elemento DOM (come un attributo, un nome di elemento e un commento o una classe CSS) che dicono al compilatore HTML di AngularJS di allegare un comportamento specificato a quell'elemento DOM. Queste direttive aiutano ad estendere la funzionalità degli elementi HTML esistenti per dare più potenza alla tua applicazione web.