Dall'archivio script > HTML5

La prima Single Page Application con AngularJS

di Daniele BochicchioDaniele Bochicchio, in HTML5, AngularJS,

AngularJS è un framework JavaScript che semplifica la creazione di applicazioni di tipo SPA (Single Page Application), introducendo nella programmazione lato client alcuni concetti apprezzati dagli sviluppatori desktop, come un motore di template client side, un databinding molto potente e il supporto ai pattern MVC/MVVM.

AngularJS è gratuito e può essere scaricato da questo indirizzo:
http://angularjs.org/

Per cominciare a creare la nostra prima SPA, diamo un'occhiata a come poter comporre una semplice pagina che, grazie all'uso del binding, ci consenta di iniziare a saggiare le potenzialità.

<!DOCTYPE html>
<html ng-app>
<head>
  <script src="angular.min.js"></script>
</head>
<body>
  <div>
    <input type="text"
      ng-model="firstName"
      placeholder="Come ti chiami?" />
    <p>Ciao {{firstName}}</p>
  </div>
</html>

Possiamo notare alcuni attributi nel markup:

  • ng-app: per indicare che quella che abbiamo appena creato è un'app per AngularJS
  • ng-model: per legare le proprietà di default di un tag (in questo caso value) ad una proprietà del modello

In mancanza di un controller e di un modello definiti esplicitamente (lo faremo nei prossimi script), ne viene creato automaticamente uno per noi.

Possiamo notare la sintassi di binding, che è contraddistinta dal formato {{nomeProp}} e che rende molto semplice iniziare a comporre layout dinamici lato client. Questa stessa potenza ci consentirà di comporre questi layout senza necessità di scrivere sempre complesse routine JavaScript.

Commenti

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
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