Dall'archivio script > HTML5

Creare un modulo e un controller con AngularJS

di Stefano MostardaStefano Mostarda, in HTML5, AngularJS,

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

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi