È 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.