È un’ottima soluzione per lo sviluppo di applicazioni web a pagina singola. Sviluppato in Javascript puro, si integra senza problemi con altre librerie javascript potenziando le vostre web app. Vi segnaliamo il sito di riferimento del progetto che è:
Indice
Perché scegliere Angular JS
Il framework vi aiuta a costruire e testare al meglio il vostro codice JavaScript, comunica col browser per farlo diventare il partner ideale per qualsiasi tecnologia server utilizzando la dependency injection (DI) e l’inversion of control (IoC). AngularJS aumenta la capacità MVC (Model View Controller) delle vostre applicazioni web. Ecco i principali motivi del successo di AngularJS
- Consente il routing semplice e il binding dei dati
- Puoi creare facilmente il modello di oggetto documento personalizzato (DOM)
- Possono essere create bellissime interfacce utente
- I dati devono essere sincronizzati tra i componenti e la vista del modello
- Può essere considerato un’estensione della sintassi HTML
- Crea componenti riutilizzabili tramite direttive
- Fornisce librerie e soluzioni stabili e affidabili per la creazione di template
- Dispone di una eccellente fase per il test delle applicazioni
Funzionalità Principali
AngularJS ha funzionalità utili non solo agli sviluppatori ma anche ai designers. Di seguito alcune funzionalità interessanti di AngularJS, che permettono di sviluppare applicazioni web di ultima generazione.
Direttive
Le direttive sono la funzionalità più unica, predominante e potente disponibile solo in AngularJS. Permettono di creare componenti HTML personalizzati e riusabili, che possono essere utilizzati per nascondere la complessità della struttura DOM e permettono di dare uno stile ad alcuni elementi con comportamenti specifici. Vi consentono di estendere il vostro HTML permettendovi di inventare nuove sintassi HTML, e istruendo AngularJS per incorporare le loro funzionalità nella pagina. Hanno il prefisso “ng-“, saranno inserite come attributi HTML e funzionano come elementi standalone. Queste le direttive più usate:
- ng-app: Questa direttiva dichiara un elemento come elemento root dell’applicazione e tipicamente vine posizionato all’interno del tag <body> o <html>. <html ng-app> è sufficiente per dichiarare una pagina come applicazione Angular.
- ng-bind: Sostituisce il testo contenuto in un componente HTML con il contenuto di una espressione, e l’aggiorna se l’espressione viene modificata.
- ng-controller: Permette di definire una classe controller JavaScript per risolvere le espressioni HTML.
- ng-model: E’ simile a ng-bind, ad eccezione del fatto che è responsabile del data binding bidirezionale tra lo scope definito nel model e nel view.
- ng-repeat: Permette di instanziare un template per item, con cui ciclare sulle variabili di una collection.
- ng-class: Questa direttiva permette di caricare dinamicamente gli attributi di classe
- ngif: Questa direttiva di if dichiarativa è usata per reinserire o eliminare un elemento dal DOM, a seconda del valore true o false.
- ng-hide e ng-show: Queste direttive consentono di mostrare o nascondere un elemento.
Esempio di codice
Abbiamo visto che AngularJS estende l’HTML con le direttive ng. Ng-app definisce un’applicazione AngularJS. La direttiva ng-model lega il valore dei controlli HTML (input, select, textarea) ai dati dell’applicazione. La direttiva ng-bind collega i dati dell’applicazione alla visualizzazione HTML.
<!DOCTYPE html>
<html>
<!--
AngularJS è distribuito come file o libreria JavaScript
può essere aggiunto a una pagina Web con il seguente tag script:
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Quindi:
- AngularJS viene caricato nella pagina web.
- ng-app dice ad AngularJS che l’elemento <div> è il “proprietario” di un’app AngularJS.
- ng-model lega il valore del campo di input al nome della variabile dell’app.
- ng-bind lega il contenuto dell’elemento <p> al nome della variabile dell’app.
Data Binding Bidirezionale
Il Data-Binding è la seconda funzionalità più potente di AngularJS. Permette di eliminare una buona parte di codice inutile da scrivere lato server per la gestione dei template. Solitamente l’80% del codice di una web application è dedicato alla manipolazione, navigazione e all’ascolto degli eventi DOM. Il data binding di AngularJS nasconde questo codice, permettendovi di focalizzarvi sugli altri aspetti importanti della vostra web application. Lo sviluppatore risparmia il lavoro di inserire dati nella view manualmente, Angular JS sincronizza automaticamente i dati tra il model e il view e viceversa.
Dependency Injection
AngularJS dispone di un sistema di injection integrato che si occupa di creare componenti, caricare dipendenze e di passare questi agli altri componenti se necessario. Il Dependency Injection consente agli sviluppatori di dichiarare come la web app è collegata. Con questo sistema AngularJS porta i tradizionali servizi lato server sul client. Si alleggerisce il lavoro sul server di backend e migliorano le prestazioni. Per avere accesso ai servizi core di AngularJS, dovrete semplicemente aggiungere quel servizio come parametro, il framework rileverà automaticamente la richiesta del servizio e fornirà una istanza.
Templates
In AngularJS i template sono scritti in HTML, contengono componenti ed attributi specifici di AngularJS. AngularJS effettua il merge del template con le informazioni (dal model e controller) per visualizzare view dinamiche per un utente nel browser. Di seguito i tipi di attributi ed elementi che AngularJS utilizza:
- Directive: Questo elemento o attributo potenzia un componente DOM esistente o visualizza un elemento DOM riusabile.
- Markup: Collega le espressioni agli elementi, utilizzando le doppie parentesi graffe {{ }}.
- Form Controls: Consente di validare l’input utente.
- Filter: Questo elemento formatta i dati da mostrare.
Conclusioni
Abbiamo visto in questo articolo AngularJS Framework con l’introduzione a esempi di codice. Abbiamo visto che Angular JS è il framework client-side MVC/MVVM web open source più utilizzato con introduzione e i primi esempi di codice. E altresì utile ricordare che in questo Blog abbiamo inserito tutta una sezione riservata a Javascript e agli esempi di codice che comportano la presenza di questo linguaggio di programmazione. Vi invitiamo quindi a visitare questa sezione del sito.