È 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
Le espressioni
AngularJS lega i dati all’HTML usando le espressioni. Le espressioni AngularJS possono essere scritte all’interno di doppie parentesi graffe:
- {{espressione}}
Le espressioni AngularJS possono anche essere scritte all’interno di una direttiva:
- ng-bind = “espressione”
AngularJS risolverà l’espressione e restituirà il risultato esattamente dove è scritta l’espressione. Le espressioni AngularJS sono molto simili alle espressioni JavaScript: possono contenere lettere, operatori e variabili. Ad esempio:
- {{5 + 5}}
- {{Nome + “” + Cognome}}
Primo esempio di codice
Bene mettiamoci subito al lavoro, prendete il vostro Editor di Testo preferito e costruite questa pagina HTML che contiene la chiamata alla libreria AngularJS e la nostra prima espressione:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>La mia prima Espressione: {{ 12 + 7 }}</p> </div> </body> </html>
Esempio di codice senza la direttiva ng-app
Ricordiamo che nell’esempio precedente togliendo la direttiva ng-app, la nostra pagina HTML mostrerà l’espressione così com’è, senza risolverla:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div> <p>My first expression: {{ 12 + 7 }}</p> </div> </body> </html>
Esempio di codice modifica della proprietà CSS
Da questi primi esempi di codice abbiamo visto che possiamo scrivere espressioni dove vogliamo nella nostra pagina HTML. AngularJS risolverà semplicemente l’espressione e restituirà il risultato. Ad esempio facciamo modificare ad AngularJS il valore delle proprietà CSS. Cambieremo il colore della casella di input sottostante, modificandone il valore:
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div> </body> </html>
Conclusioni
Abbiamo visto in questo articolo il il Framework AngularJS studiando le espressioni con 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.