Introduzione ad AngularDart: seconda parte

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

Nel precedente articolo di questa serie dedicata ad AngularDart abbiamo introdotto i concetti principali del framework e abbiamo visto un esempio di Controller e di alcune direttive notevoli, in questo articolo invece vedremo come sviluppare una direttiva personalizzata ed un elemento HTML personalizzato (Web Component).

Lo scopo di una direttiva è definire un comportamento per l’elemento HTML al quale la direttiva viene associata. In questo primo esempio, di cui è disponibile una live demo, la nostra direttiva personalizzata è hover ed il comportamento che essa definisce consiste nella modifica del colore del testo dell’elemento:

<p hover>Move your mouse over this text.</p>

Il procedimento per definire una direttiva è simile a quello visto nell’articolo precedente per definire un controller: la direttiva sarà definita all’interno di una classe, quest’ultima decorata con l’annotazione @NgDirective():

@NgDirective(selector: '[hover]')
class Hover {
  Element element;
  String originalColor;

  Hover(this.element) {
    originalColor = element.style.color;
    element
      ..onMouseEnter.listen((e) {
        element.style.color = 'red';
      })

      ..onMouseLeave.listen((e) {
        element.style.color = originalColor;
      });
  }
}

Come visto per i controller, per utilizzare questa direttiva nella nostra app dobbiamo aggiungere un nuovo modulo al DI di Angular:

class MyCustomDirective extends Module {
  MyCustomDirective() {
    type(Hover);
  }
}

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

Vediamo ora invece come sviluppare un elemento personalizzato – un web component – per questo esempio – qui una live demo – modificheremo il controller ListController visto nel primo articolo per renderlo un web component, ListComponent.

Una prima differenza fra un controller ed un component è in quest’ultimo il frammento HTML in cui è definita la sua interfaccia grafica risiede in un file HTML esterno, questo per garantire che il component sia facilmente riutilizzabile in altre web app. Creiamo quindi un file HTML e un file dart, rispettivamente my_list.html e my_list.dart.

Come nel caso delle direttive e dei controller, anche il comportamento di un web component è definito in una classe Dart:

@NgComponent(
  selector: 'my-list',
  templateUrl: 'my_list.html',
  publishAs: 'cmp')
class ListComponent {
  String newItem;
  List<Item> items = [];
  int max;

  @NgAttr('max-items')
  set maxItems(String value) {
    max = value == null ? 100 : int.parse(value);
  }

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

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

Notiamo un’altra differenza: stavolta il parametro selector è una singola stringa e non un’array di stringhe, in questo caso my-list; per istanziare l’elemento nel DOM utilizzeremo quindi:

<my-list></my-list>

Per il nostro componente personalizzato possiamo anche definire attributi personalizzati, come nel caso di max-items, annotato con @NgAttr('max-items'), che definirà il numero massimo di elementi che è possibile aggiungere alla lista, e.g.:

<my-list max-items="5"></my-list>

In quest’app di esempio, qualora non venga definito l’attributo max-items, il valore massimo sarà impostato a 100.

Nel prossimo appuntamento con questa rubrica dedicata ad AngularDart vedremo altre caratteristiche interessanti del framework, quali filters e services. Il codice visto in questo articolo è disponibile sull’account di Engeene su Github.

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: