Quando creiamo un'applicazione con AngularJS, il primo passo consiste nel creare un modulo. Un modulo non contiene nessuna funzionalità, ma è solo un contenitore di oggetti. Questi oggetti possono essere controller, direttive o altro ancora. In questo script ci occupiamo di creare un controller che è l'oggetto che gestisce il comportamento di una pagina.
Creare un modulo è estremamente semplice come si può vedere da questo esempio.
var peopleModule = angular.module('peopleModule', []);
angular è l'oggetto creato dallo script di AngularJS e il suo metodo module crea il modulo. Il primo parametro rappresenta il nome del modulo mentre il secondo rappresenta il nome dei moduli da cui questo modulo dipende.
Il secondo step consiste nel creare il controller all'interno del modulo.
peopleModule.controller('peopleController', function ($scope) { $scope.people = [ {'name': 'Stefano Mostarda', 'age': 20 }, {'name': 'Daniele Bochicchio', 'age': 25 } ]; });
Per creare il controller usiamo il metodo controller del modulo. il primo parametro consiste nel nome del controller mentre il secondo parametro è il costruttore del modulo. Nel nostro caso inizializziamo lo scope (concetto di cui parleremo nei prossimi script) con dei dati da mostrare sula pagina.
Una volta creati il modulo e il controller, non ci rimane che creare la pagina che mostra i dati.
<html ng-app="peopleModule"> <head> <script src="bower_components/angular/angular.js"></script> ... </head> <body ng-controller="peopleController"> <ul> <li ng-repeat="p in people"> <span>{{p.name}}</span> <p>{{p.age}}</p> </li> </ul> </body> </html>
Nell'attributo ng-app mettiamo il nome del modulo mentre nell'attributo ng-controller del tag body specifichiamo il nome del controller (gli attributi in gergo angular sono chiamati direttive). Successivamente usiamo la direttiva ng-repeat per mostrare tutte le persone create nel costruttore del controller. (Anche questa direttiva verrà approfondita in script successivi).
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Ridurre il reflow cambiando il CSS
Implementare il throttle in JavaScript
Creare una libreria CSS universale: Cards
Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
Ricevere notifiche sui test con Azure Load Testing
Creare una libreria CSS universale - Rotazione degli elementi
Gestione degli eventi nei Web component HTML
Utilizzare Hybrid Cache in .NET 9
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Recuperare App Service cancellati su Azure
Referenziare un @layer più alto in CSS
Esporre i propri servizi applicativi con Semantic Kernel e ASP.NET Web API
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Impersonation di utente per l'esecuzione di codice in una pagina ASP.NET
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!