È 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
I Moduli di Angular JS
Partiamo da una semplice definizione: un modulo realizzato con il framework AngularJS può essere definito come un’applicazione. In sostanza il modulo non è altro che un contenitore per le diverse parti di un’applicazione. Per tale motivo un modulo contiene sempre anche i Controlli dell’applicazione.
Creazione di un modulo
Un modulo viene creato utilizzando la funzione AngularJS denominata:
- angular.module
Facciamo un esempio:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
</body>
</html>
Il parametro “myApp” fa riferimento a un elemento HTML in cui verrà eseguita l’applicazione. Adesso sarà necessario aggiungere controller, direttive, filtri e tutto il necessario alla realizzazione di una applicazione sviluppata con AngularJS.
Aggiungere un controller ad una Applicazione
Per aggiungere un controller ad una applicazione sviluppata con il framework AngularJS bisogna utilizzare la direttiva ng-controller. Ad esempio:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ nome + " " + cognome }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.nome = "Giorgio";
$scope.cognome = "Orlandi";
});
</script>
</body>
</html>
Nei prossimi articoli dedicati ad AngularJS ci saranno maggiori approfondimenti ed esempi sul tema dei controller.
Aggiungere una direttiva ad una App AngularJS
AngularJS ha una serie di direttive integrate che puoi usare per aggiungere funzionalità nello sviluppo di una applicazione. Riprenderemo in modo più approfondito le Direttive di AngularJS in un prossimo articolo. Per quanto abbiamo definito si può utilizzare un modulo per aggiungere direttive alle applicazioni. Facciamo un esempio:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" prova-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("provaDirective", function() {
return {
template : "Sono stato creato costruendo questa direttiva. "
};
});
</script>
</body>
</html>
Anche in questo caso avremo modo, parlando del framework AngularJS, di approfondire l’argomento delle direttive effettuando ulteriori considerazioni ed esempi pratici.
Organizzare Moduli e Controller in dei file
È comune nelle applicazioni AngularJS inserire il modulo e i controller in dei file JavaScript da caricare nel progetto. Nell’esempio che abbiamo visto fino ad ora, “myApp.js” contiene una definizione del modulo ell’applicazione, mentre “myCtrl.js” contiene il controller:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ nome + " " + cognome }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
Il file myApp.js
Un esempio di file myApp.js, rappresentativo di un modulo, è il seguente:
var app = angular.module("myApp", []);
Si osservi che è necessario utilizzare le parentesi quadre [] nella definizione di un modulo che può essere utilizzato per definire i moduli dipendenti. Senza inserire parametri tra le parentesi quadre [], non si creano nuovi moduli, ma si recupera uno già esistente.
Il file myCtrl.js
Un esempio di file che definisce un Controller myCtrl.js, può essere il seguente:
app.controller("myCtrl", function($scope) {
$scope.nome = "Giorgio";
$scope.cognome= "Orlandi";
});
Le funzioni possono sporcare il Global Namespace alterandolo
È note che le funzioni globali dovrebbero essere evitate programmando con il linguaggio JavaScript. Potrebbero essere facilmente sovrascritte o distrutte da altri script, tutto questo ai danni della funzionalità di una applicazione. I moduli di AngularJS hanno drasticamente ridotto questo problema, mantenendo tutte le funzioni locali nel modulo.
Quando caricare la libreria AngularJS
Comunemente, nello sviluppo di applicazioni HTML gli script vengono inseriti alla fine del TAG <body>. Consigliamo sempre di caricare la libreria AngularJS nel TAG <head> o all’inizio del TAG <body>. Questo perché le chiamate a angular.module possono essere compilate solo dopo che la libreria è stata caricata.
Conclusioni
Abbiamo visto in questo articolo come avviene la gestione dei Moduli con il Framework AngularJS. 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.