Speaker: Alessandro Giorgetti / @a_giorgetti
Socio fondatore di SID Srl - società che opera nel campo della sanità
Partecipo a DevMarche
Un po' di contatti:
Mail: alessandro.giorgetti@live.comBackground nella scrittura di applicazioni Desktop (Windows Forms, WPF).
Necessità di migrare su piattaforme Web: iniziamo con ASP.NET MVC (razor + knockout + javascript)
2 mesi e mezzo di lavoro per la primissima versione: funzionante, ma non completamente soddisfatti!
Abbiamo creato prototipi con tutti i maggiori framework disponibili.
Demo!
Informazioni dettagliate a questo link della guida di AngularJS
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
terminal: false,
template: '', // or // function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html', // or // function(tElement, tAttrs) { ... },
replace: false,
transclude: false,
restrict: 'A',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
require: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
};
return directiveDefinitionObject;
});
Aggiungiamo comportamento ad un tag <input>
.directive('selectOnFocus', function () {
return {
restrict: 'A',
link: function(scope, iElement) {
iElement.mouseup(function(evt) {
evt.preventDefault();
});
iElement.focus(function() {
iElement.select();
});
}
}
})
Introducing:
argomenti:
Demo!
Iniziamo da del markup per una form di immissione dati usando Bootstrap
angular.module('myDirectives', [])
.directive('myLabelInput', function () {
return {
restrict: 'EA',
replace: true,
template: '' +
'' +
'' +
''
}
});
introducing: replace & template
Demo!
Consentire alle direttive di creare i propri scope è fondamentale per realizzare componenti che siano riutilizzabili sfruttanto il meccanismo dei binding senza dover 'impazzire' nel gestire la comunicazione con l'esterno tramite attributi.
.directive('myLabelInput2', function () {
return {
restrict: 'EA',
replace: true,
scope: { // isolated scope!!! (it does not inherits the scope from its enclosing scope).
id: '@', // one-way binding
type: '@',
placeholder: '@',
ngModel: '=' // two-way binding
},
template: '' +
'' +
'' +
''
};
});
introducing: isolated scope - gli scope isolati non ereditano il prototipo del parent scope, serve a prevenire leak di dati e ad evitare modifiche accidentali dei dati sui parent scope.
il passaggio di parametri avviene dichiarativamente dal template HTML verso le proprietà definite sullo scope:
scope: {
oneWayExpression: '@',
twoWayBinding: '=',
oneWayBehavior: '&'
}
<div my-directive
one-way-expression="questa espressione viene valutata: {{ i++ }}"
two-way-binding="variabile"
one-way-behavior="func(variabile)" >
</div>
Demo!
Se si devono eseguire operazioni sul DOM o alterare il template della direttiva è buona norma usare la funzione 'compile'.
Argomenti:
Se si usa la funzione compile e si vuole renedere la direttiva dinamica (utilizzando uno scope) occorre far ritornare una link function ed eseguire la compilazione ed il linking allo scope manualmente usando il servizio $compile messo a disposizione da AngularJS
Introducing: compile
Demo!
'Parolona' per indicare una cornice (frame).
Consente di iniettare contenuto (tag html, templates, etc) all'interno del template di una direttiva già esistente senza dover operare ricorrendo alla funzione 'compile' vista in precedenza.
.directive('myCenteredFrame', function () {
return {
restrict: 'EA',
transclude: true,
//replace: true,
template: '<div class="row">' +
'<div ng-transclude class="col-xs-8 col-xs-offset-2"></div>' +
'</div>'
};
})
Introducing: transclude & ng-transclude
Demo!
Le direttive possono avere necessità di comunicare tra loro, possono farlo tramite:
La funzione che definisce il controller puó accettare dei parametri risolti con dependency injection.
Introducing: controller & require
Nell'ordine di esecuzione delle funzioni il controller viene istanziato PRIMA della chiamata alle pre-linking functions. Consente alle direttive di comunicare e modificare il comportamento l'una dell'altra.
Demo: Take a look at the 'myTabs & myPane' sample directives!
No Demo this time!
Contacts:
Mail: alessandro.giorgetti@live.com