AngularJS – le direttive
Ovvero costruire un Typeahead
custom, ma non solo.
Mauro Servienti
CTO, Partner @ Managed Designs
mauro.servienti@manageddesigns.it
@mauroservienti
//milestone.topics.it
//b...
Che cosa sono?
• Un modo per incapsulare comportamenti
ripetitivi in un componente riutilizzabile;
– UserControl
– Compone...
Come si usano?
• Commenti: <!-- directive: your-directive-name -->
• Attributi (behavior): <button my-directive-name />
• ...
Che c’è dietro le quinte?
• Parsing dell’HTML  DOM (browser);
• AngularJS identifica tutte le direttive;
– Mettendole in ...
$scope… perché sei tu, $scope :-)
• La vera rogna, perché vi piace fare data-binding…? :-D
scope: false/true;
scope: {
foo...
DEMO
“Bando alle ciance” :-)
Upcoming SlideShare
Loading in …5
×

AngularJS - directives

1,041 views

Published on

Published in: Technology
  • Be the first to comment

AngularJS - directives

  1. 1. AngularJS – le direttive Ovvero costruire un Typeahead custom, ma non solo.
  2. 2. Mauro Servienti CTO, Partner @ Managed Designs mauro.servienti@manageddesigns.it @mauroservienti //milestone.topics.it //blogs.ugidotnet.org/topics //github.com/mauroservienti
  3. 3. Che cosa sono? • Un modo per incapsulare comportamenti ripetitivi in un componente riutilizzabile; – UserControl – Componenti – Behavior • Un DSL per il vostro HTML; • Il tappeto sotto cui nascondere la manipolazione del DOM;
  4. 4. Come si usano? • Commenti: <!-- directive: your-directive-name --> • Attributi (behavior): <button my-directive-name /> • Elementi (controlli): <my-directive-name /> • Classi: <button class=“my-directive-name” />
  5. 5. Che c’è dietro le quinte? • Parsing dell’HTML  DOM (browser); • AngularJS identifica tutte le direttive; – Mettendole in ordine di priorità; • 2-phase-startup (come ovunque): – Invoca “compile” su ogni direttiva; • Fase 1: Fondamentale se avete bisogno di fare manipolazione del DOM (ngRepeat) – Invoca “link” su ogni direttiva; • Fase 2: tutti pronti, possiamo agganciare $watch e $observe;
  6. 6. $scope… perché sei tu, $scope :-) • La vera rogna, perché vi piace fare data-binding…? :-D scope: false/true; scope: { foo: ‘=’, //2 way binding bar: ‘@’, //1 way binding fooBar: ‘&’ //function binding, pointer }; • Componenti vs UserControl
  7. 7. DEMO “Bando alle ciance” :-)

×