Cos'è AngularJS? ArchiStruttura, Caratteristiche e Vantaggi

Cos'è AngularJS?

AngularJS è un framework Model-View-Controller open-source scritto in JavaCopione. AngularJS è stato uno dei framework web più popolari degli anni 2010 ed è utilizzato per lo sviluppoping principalmente applicazioni a pagina singola. Questo framework è stato sviluppato da un gruppo di sviluppatori di Google stessa.

Grazie al sostegno incondizionato di Google Grazie anche alle idee provenienti da un ampio forum della comunità, il framework è stato mantenuto aggiornato per tutta la sua durata di attività. Ha inoltre incorporato le principali tendenze di sviluppo dell'epoca, motivo per cui ancora oggi gran parte del codice di produzione lo utilizza.

Un punto terminologico vale la pena chiarirlo subito. AngularJS è ampiamente descritto come un framework MVC, che è un utile punto di partenza. Il team di AngularJS stesso, tuttavia, preferiva l'etichetta MVW (Model-View-Whatever), perché il runtime si comporta più come Model-View-ViewModel che come il classico MVC. L'ufficiale Documentazione di AngularJS Lo definisce un framework strutturale per applicazioni web dinamiche. Chiarito questo, ecco come i vari elementi si incastrano tra loro.

AngularJS Architectura

AngularJS segue l'architettura MVC. Il diagramma del framework MVC è mostrato di seguito:

AngularJS Archidiagramma della struttura

Ciascuno dei tre strati ha un compito ben definito:

• Il Controller rappresenta il livello che ha la logica aziendale. Gli eventi utente attivano le funzioni memorizzate nel 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 tuo modello possono essere semplici come avere solo dichiarazioni primitive. Ad esempio, se stai gestendo un'applicazione per studenti, 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 stai gestendo un'applicazione di proprietà di un'auto, puoi avere strutture per definire il veicolo stesso in termini di cilindrata, capacità di posti a sedere, ecc.

In pratica, il controller raramente inserisce manualmente i dati nella vista. AngularJS monitora il modello e aggiorna la vista automaticamente, grazie alle funzionalità descritte di seguito.

Caratteristiche di AngularJS

AngularJS possiede le seguenti caratteristiche chiave che lo rendono uno dei framework più potenti sul mercato:

1. MVC – Il framework è costruito sul famoso concetto di MVC (controller di visualizzazione del modello). Questo è un modello di progettazione utilizzato in tutte le applicazioni web moderne. Questo modello si basa sulla suddivisione del livello della logica aziendale, del livello dei dati e del livello di presentazione in sezioni separate. La divisione in diverse sezioni è fatta in modo che ognuna possa essere gestita più facilmente.
2. Associazione del modello di dati – Non è necessario scrivere codice speciale per associare i dati ai controlli HTML. Questo può essere fatto da AngularJS semplicemente aggiungendo alcuni frammenti di codice.
3. Scrivere meno codice – Quando si eseguono molte manipolazioni del DOM JavaCopione In passato era necessario scrivere del codice per progettare qualsiasi applicazione. Ma con AngularJS, rimarrai stupito dalla minore quantità di codice che dovrai scrivere per la manipolazione del DOM.
4. Unità Collaudo pronti – I designer di Google Non solo ha sviluppato AngularJS, ma ha anche creato un framework di test chiamato "Karma" che aiuta a progettare test unitari per le applicazioni AngularJS.
5. direttive – Marcatori come ng-app, ng-model e ng-repeat aggiungere comportamento agli elementi HTML ordinari.

Queste funzionalità sono più facili da comprendere una volta che le si mette in pratica, quindi la sezione successiva crea una pagina funzionante da zero.

Come configurare AngularJS e creare la tua prima applicazione

Leggere di data binding è una cosa, vederlo in azione è tutt'altra. AngularJS non necessita di gestore di pacchetti, bundler o compilatore, quindi la tua prima applicazione sarà un singolo file HTML che viene eseguito direttamente dal tuo disco rigido.

Passaggio 1) Aggiungere la libreria AngularJS

Carica la libreria da una CDN con un singolo tag script. La versione 1.8.3 è l'ultima release di AngularJS, quindi assicurati che la tua pagina sia esattamente a quella versione, anziché a una versione variabile.

Passaggio 2) Contrassegna la directory principale dell'applicazione con ng-app

La direttiva ng-app indica al compilatore AngularJS quale parte della pagina è di sua proprietà. Inserendola nel tag html, si cede l'intero documento al framework, e il valore che le si assegna identifica il modulo che si sta per creare.

Passaggio 3) Collegare i dati con ng-model e un'espressione

La direttiva ng-model associa un elemento input a una proprietà nello scope e un'espressione con doppie parentesi graffe stampa la stessa proprietà altrove nella pagina. Poiché l'associazione è bidirezionale,ping nella casella aggiorna immediatamente l'intestazione, senza bisogno di un gestore di eventi personalizzato.

Passaggio 4) Aggiungere un controller per la logica

Un controller è un semplice JavaFunzione script che riceve l'oggetto $scope e ne imposta i valori iniziali. Registrandola nel modulo, la rende disponibile alla direttiva ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Passaggio 5) Eseguire la pagina e verificare il risultato

Salva il file come index.html e aprilo in qualsiasi browser. L'intestazione iniziale è "Hello World!" e si riscrive automaticamente a ogni tasto premuto. Non è coinvolto alcun server web né alcun processo di compilazione.

Se non compare nulla, apri la console del browser e verifica che lo script CDN sia stato caricato e che il nome del modulo all'interno di ng-app corrisponda esattamente al nome passato ad angular.module, perché una mancata corrispondenza genera un errore silenzioso. Questa piccola pagina dimostra già i punti di forza descritti di seguito.

Vantaggi di AngularJS

Ecco i vantaggi di AngularJS:

• Trattandosi di un framework open source, è lecito aspettarsi un numero minimo di errori o problemi.
• Binding bidirezionale: AngularJS mantiene sincronizzati il ​​livello dati e il livello di presentazione. Non è necessario scrivere codice aggiuntivo. JavaQuesto script serve a mantenere sincronizzati i dati nel codice HTML e nel livello dati. AngularJS lo farà automaticamente per te. Devi solo specificare quale controllo è associato a quale parte del tuo modello.
• Routing – AngularJS può gestire il routing, ovvero il passaggio da una vista all'altra. Questo è un elemento fondamentale delle applicazioni a pagina singola (SPA), che permette di navigare tra diverse funzionalità dell'applicazione web in base all'interazione dell'utente, rimanendo comunque sulla stessa pagina.
• AngularJS supporta i test, entrambi Test unitarie Test d'integrazione.
• Estende l'HTML fornendo elementi propri chiamati direttive. A un livello più generale, le direttive sono marcatori su un elemento DOM (come un attributo, il nome dell'elemento, un commento o una classe CSS) che indicano al compilatore HTML di AngularJS di associare un comportamento specifico a quell'elemento DOM. Queste direttive aiutano ad estendere la funzionalità degli elementi HTML esistenti, conferendo maggiore potenza alla tua applicazione web.

Vantaggi di AngularJS

Una visione equilibrata è altrettanto importante, quindi i compromessi verranno illustrati di seguito.

Svantaggi e limitazioni di AngularJS

Ogni framework comporta dei compromessi, e AngularJS non fa eccezione. Queste sono le limitazioni più frequentemente segnalate dai team che gestiscono applicazioni AngularJS:

• Nessun livello di sicurezza proprio – AngularJS non fornisce né autenticazione né autorizzazione, quindi entrambe devono essere implementate lato server.
• Dipendenza totale da JavaCopione – Se un visitatore disabilita JavaLo script, la pagina torna al markup puro e non viene visualizzata.
• prestazioni del ciclo di digestione – Le modifiche vengono rilevate confrontando ripetutamente i valori monitorati, pertanto le pagine con diverse migliaia di collegamenti potrebbero risultare lente.
• Una curva di apprendimento ripida – Ambiti, direttive, stabilimenti, servizi e fornitori si sovrappongono, e spesso esistono diversi modi per raggiungere lo stesso risultato.
• Visibilità sui motori di ricerca – Le viste vengono assemblate nel browser, quindi è necessario un lavoro aggiuntivo, come il pre-rendering, prima che i crawler indicizzino le pagine in modo affidabile.
• Nessun ulteriore aggiornamento – Dal 31 dicembre 2021 non esistono patch ufficiali, quindi una vulnerabilità appena scoperta rimane irrisolta a meno che un fornitore commerciale non fornisca una correzione.

Quest'ultimo punto spinge la maggior parte dei team verso il framework successore, che è un prodotto diverso nonostante il nome in comune.

AngularJS vs Angular: qual è la differenza?

AngularJS e Angular vengono spesso confusi a causa della somiglianza dei nomi, ma si tratta di framework distinti con linguaggi, architetture e linee di rilascio differenti. AngularJS si riferisce esclusivamente alla serie 1.x descritta in questa pagina. Angular, invece, indica la versione 2 e tutte le versioni successive, una riscrittura completa rilasciata nel 2016 e tuttora in fase di sviluppo attivo. Code non si sposta tra di loro senza un lavoro di migrazione deliberato.

La conseguenza pratica è che un controller AngularJS non può essere semplicemente inserito in un progetto Angular. La migrazione implica la riscrittura di ogni controller come componente, quindi è necessario pianificarla come un vero e proprio lavoro di ingegneria, non come un aggiornamento. In breve, considerate AngularJS come una competenza di manutenzione e Angular come la piattaforma per il nuovo sviluppo.

DOMANDE FREQUENTI