Introduzione ad AngularDart: prima parte

Di - 31 March 2014 - in
Post image for Introduzione ad AngularDart: prima parte
Avviso – 04/05/2014
La libreria angular.dart è in fase di sviluppo attivo, alcune classi presentate in questo articolo potrebbero risultare deprecate.

Inauguriamo oggi su Engeene una serie di articoli dedicati ad AngularDart, versione Dart di AngularJS, popolare framework Model-View-Whatever che facilita lo sviluppo di single-page applications estendendo le funzionalità dell’HTML e mantenendo la logica di business dell’app separata dagli elementi che ne costituiscono l’interfaccia grafica. Sebbene entrambe le versioni di Angular siano basate sui medesimi concetti, le implementazioni sono leggermente diverse e in questi articoli tralasceremo eventuali differenze tra l’una e l’altra versione concentrandoci esclusivamente su AngularDart.

Per descrivere il modo in cui AngularDart estende le funzionalità dell’HTML dobbiamo introdurre gli elementi principali del pattern architetturale Model-View-Controller (MVC), ovvero Data Binding, Controller e Model. In AngularDart il data binding consiste nel collegamento di un elemento HTML con un determinato oggetto Dart in modo tale che il valore dell’oggetto e le sue eventuali modifiche siano sempre visibili nel HTML senza ricorrere alla manipolazione esplicita del DOM. Un controller invece è una classe Dart che si occupa della gestione del comportamento dell’app mentre un model – anch’esso un oggetto Dart – contiene i dati dell’applicazione.

Vediamo subito un primo esempio di AngularDart: inserendo del testo in un campo <input>, nel HTML vengono mostrati ed aggiornati in tempo reale il testo inserito e la sua lunghezza. In questo esempio non è stato utilizzato codice Dart, con l’unica eccezione del metodo ngBootstrap(), necessario per utilizzare AngularDart. Più specificatamente, questo metodo serve a:

  1. Localizzare l’elemento root dell’app, ovvero la porzione di HTML che contiene le direttive AngularDart
  2. Creare una nuova NgZone (che analizzeremo nei prossimi articoli)
  3. Creare un injector nella zona creata nel punto precedente
  4. Compilare l’elemento root dell’app

Per poter utilizzare AngularDart dobbiamo aggiungere angular alle dipendenze dell’app; fatto questo, creiamo un nuovo progetto – chiamiamolo “hello_angular” – e aggiungiamo questo codice al file “hello_angular.html”:

<input type="text" ng-model="name" placeholder="Enter your name..."/>
<p>Hello {{ name }}!</p>

<span ng-if="name.length > 0">
  <p>{{ name.length }} characters in your name :-)</p>
</span>

Il file “hello_angular.dart” avrà invece questo contenuto:

import 'package:angular/angular.dart';

main() => ngBootstrap();

Una demo live è disponibile a questo indirizzo.

Vediamo quali sono gli elementi interessanti nel file HTML:

  • ng-model
  • ng-if
  • {{ name }}
  • {{ name.length }}

Intuitivamente, il primo elemento è un attributo di input e serve a definire un modello, nel nostro caso “name”, che avrà come valore il testo inserito. Il secondo elemento, ng-if, è una direttiva di Angular che valuta un’espressione: se la lunghezza di name è maggiore di 0, allora l’elemento span viene mostrato nell’HTML.
Gli ultimi due elementi sono espressioni: ciò che è racchiuso fra le parentesi graffe viene valutato e stampato, nel caso di name viene stampato il testo inserito nel campo di input mentre nel caso di name.length la sua lunghezza.

Passiamo ora ad un esempio leggermente più complesso in cui utilizziamo un controller: aggiungere o rimuovere elementi di una lista. Il codice HTML:

<div list>
  <form ng-submit="ctrl.add()">
    <input type="text" ng-model="ctrl.newItem"/>
    <input type="submit" value="Add"/>
  </form>
  <p>{{ ctrl.items.length }} item<span ng-if="ctrl.items.length != 1">s</span> added.</p>
  <ul>
    <li ng-repeat="item in ctrl.items">
      <a href="" ng-click="ctrl.remove(item)">
        {{ item.text }}
      </a>
    </li>
  </ul>
</div>

Il codice Dart:

import 'package:angular/angular.dart';

@NgController(
    selector: '[list]',
    publishAs: 'ctrl')
class ListController {
  String newItem;
  List<Item> items = [];
  ListController();

  void add() {
    if (newItem.trim().length != 0) {
      items.add(new Item(newItem));
      newItem = '';
    }
  }

  void remove(Item item) {
    items.remove(item);
  }
}

class Item {
  String text;
  Item(this.text);
}

class ListModule extends Module {
  ListModule() {
    type(ListController);
  }
}

main() {
  ngBootstrap(module: new ListModule());
}

La demo live è disponibile a questo indirizzo.

Analizziamo prima il codice Dart: oltre alla funzione main() abbiamo tre classi: ListController, ListModule e Item; la prima definisce il comportamento della nostra lista mentre la seconda serve al dependency injector per consentire ad Angular di utilizzare la prima classe nell’app mentre la terza definisce il singolo elemento della lista.

Per indicare che la classe ListController sia un controller Angular, utilizziamo il decoratore @NgController() che ha due parametri:

  • selector, che definisce il selettore CSS che attiverà il controller
  • publishAs, ovvero l’identificatore dell’istanza del controller

Nel codice HTML notiamo questi elementi:

  • <div list>, il controller avrà effetto in questo elemento HTML
  • <form ng-submit=ctrl.add()>, al momento del submit sarà invocato il metodo add() dell’istanza del nostro controller
  • <input ng-model="ctrl.newItem">, analogamente a quanto visto nell’esempio precedente il testo inserito sarà utilizzato come valore di newItem
  • <li ng-repeat="item in ctrl.items">, ng-repeat è un’altra direttiva notevole di AngularDart: per ogni elemento in ListController.items – che avrà come identificatore item – sarà creato un nuovo elemento li
  • <a ng-click="ctrl.remove(item)">, analogamente ad ng-submit, al click sarà invocato il metodo remove che rimuoverà l’elemento dalla lista.

Nel prossimo articolo parleremo in modo più approfondito delle direttive di Angular, vedremo come crearne di personalizzate e come utilizzare i web components. Il codice visto in questo articolo è disponibile sull’account di Engeene su Github, mentre la documentazione ufficiale di AngularDart è disponibile sul sito https://angulardart.org.

Leave a Reply

Claudio d'Angelis Articolo scritto da

Programmatore e studente di Informatica, appassionato di musica, web e sistemi UNIX. Collabora con Googlab dall’Ottobre 2012.

Contatta l'autore

Previous post:

Next post: