CommitUniversity AngularJSAdvanced Andrea Vallotti

AngularJS
direttive, testing e
organizzazione
@AndreaVallotti

AngularJS
Advanced
17.07.2014
Alcune indicazioni…
Potete scaricare i sorgenti da:
http://localhost/AdvancedAngularBackend/ClientStandalon
e.zip
Potete collegarvi ai servizi usando:
applicationUrls.baseUrl =
'http://localhost/AdvancedAngularBackend/'

AngularJS
Advanced
17.07.2014
Riepilogo
● AngularJS
● Direttive
● Testing (Unit)
● Gestione delle dipendenze
● Mettiamo tutto insieme
● Q&A

AngularJS
Advanced
17.07.2014
AngularJS
● AngularJS
● Direttive
● Testing (Unit)
● Q&A

AngularJS
Advanced
17.07.2014
AngularJS - Generale
E’ un framework JavaScript:
● per lo sviluppo di applicazioni Web in modalità Single
Page Application
● “forza” l’uso del pattern MVC
● implementa il two-way data-binding
● pensato per facilitare il test:
o separazione delle competenze
o dependency injection
o mock del back end

AngularJS
Advanced
17.07.2014
AngularJS - Anatomia
<body ng-app=”ngCommitUniversity”>
...
<div ng-controller="homeController">
...
<div cmsw-spinner="loadingTracker.active()"
class="fixedHeight"
spinner-options="{direction: -1, length: 50}">
...
<span ng-show="username"
ng-bind="'Ciao ' + username + '!'"></span>
</div>

AngularJS
Advanced
17.07.2014
Direttive
● AngularJS
● Direttive
● Testing (Unit)
● Q&A

AngularJS
Advanced
17.07.2014
Direttive - Definizione
//directives = angular.module('…', [ … ]);
directives.directive('cmswSpinner', function () {
return {
// descrittore della direttiva
};
});
//<div cmsw-spinner …
Forme possibili: data-cmsw-spinner, x-cmsw-spinner, cmsw-spinner,
cmsw_spinner, cmsw:spinner

AngularJS
Advanced
17.07.2014
● restrict - definisce le modalità di utilizzo
ammesse (e.g. restrict: ‘EA’)
● template - inline HTML template
● templateUrl - url per scaricare il template
della direttiva tramite richiesta ajax
● replace - definisce se sostituire o
appendere il template all’elemento originale

AngularJS
Advanced
17.07.2014
● priority - definisce l’ordine di
“esecuzione” delle direttive
● terminal - indica se il processo di
compilazione deve terminare alla direttiva
corrente
● require - specifica se è necessario
utilizzare altre direttive: [?][^]directive

AngularJS
Advanced
17.07.2014
Direttive - ciclo di vita
1. costruzione
2. compilazione del template
3. *creazione dello scope e del controller
4. *pre-linking
5. ricorsione sui figli
6. post-linking

AngularJS
Advanced
17.07.2014
Direttive - scope
scope: false | true | { … }
● false - è il default, la direttiva condivide lo
scope del controllore che la contiene
● true - viene creato uno scope per la
direttiva che “deriva” dallo scope contenitore
● { … } - viene creato uno scope isolato

AngularJS
Advanced
17.07.2014
● fondamentali per: separazione e riusabilità
● permettono di definire dei collegamenti con il
mondo esterno:
o @[attr] - collegamento monodirezionale con il
valore di un attributo del DOM
o =[?][attr] - collegamento bidirezionale
o &[attr] - esecuzione di un espressione nello
scope contenitore
Direttive - scope isolati

AngularJS
Advanced
17.07.2014
Direttive - controller
● si dichiarano come i controller “normali”
● iniettabile con:
o qualunque servizio disponibile nell’applicazione
o servizi specifici: $scope, $element, $attrs,
$transclude
● logica e varibili “locali”
● no manipolazione del DOM
● opzionale

AngularJS
Advanced
17.07.2014
Direttive - link
link: function (scope, iElement, iAttrs,
[controller], [transcludeFn]) { ... }
oppure:
link: {
pre: function ( … ) { ... }
post: function ( … ) { ... }
}

AngularJS
Advanced
17.07.2014
Direttive - link
● è la funzione principale
● nel 80% dei casi non serve altro
● manipolazione del DOM
● registrazione agli eventi del DOM:
o è fondamentale utilizzare $scope.$apply per
propagare le modifiche
● registrazione dei watch

AngularJS
Advanced
17.07.2014
Direttive - transclude
transclude: true,
template: '<div><div …></div><div
ng-transclude></div></div>'
<div cmsw-spinner="…" …>
<button …>Carica</button>
<span …></span>
</div>
</div>
<div cmsw-spinner="…" …>
<div …>
</div>
<div>
<button …>Carica</button>
<span …></span>
</div>
</div>
</div>

AngularJS
Advanced
17.07.2014
Direttive - transcludeFn
function([scope], cloneLinkingFn)
● scope - è opzionale, di default viene usato
quello della direttiva
● cloneLinkingFn - è una callback a cui
viene passato l’elemento clonato e collegato
la quale serve per inserirlo nel DOM

AngularJS
Advanced
17.07.2014
Direttive - compilazione
compile: function(tElement, tAttrs) { ... }
● modifica il DOM del template
● non ha accesso allo scope
● è invocata per ogni direttiva
● *ritorna una funzione/oggetto di link
● migliora le performance

AngularJS
Advanced
17.07.2014
Direttive - comunicazione
● Direttiva → Controller:
o scope isolato con binding &
● Controller → Direttiva:
o scope isolato con binding mono o bidirezionale
● Direttiva ←→ Direttiva:
o attraverso i controller

AngularJS
Advanced
17.07.2014
Direttive - Q&A
Domande?
(Sperando di sapervi rispondere :-D)
5 min

AngularJS
Advanced
17.07.2014
Testing
● AngularJS
● Direttive
● Testing (Unit)
● Q&A

AngularJS
Advanced
17.07.2014
Testing - Jasmine
● Stile BDD
● Autonomo
● JavaScript puro
● Test runner:
o una semplice pagina HTML;
o Karma per Node.js;
o Chutzpah per Visual Studio;

AngularJS
Advanced
17.07.2014
Testing - Jasmine - anatomia
describe('Test', function() {
var testFixture;
beforeEach(function() { … });
afterEach(function() { … });
it('should fail', function() {
expect(true).toBe(false);
});
});

AngularJS
Advanced
17.07.2014
Testing - Jasmine - spies
● Mock (FakeItEasy, mockito, etc.)
● Comportamento:
o invocazione metodo originale
o invocazione metodo fake
o lancio eccezioni
● Asserzioni sull’invocazione dei metodi:
o argomenti
o ordine

AngularJS
Advanced
17.07.2014
Testing - angular.mock
● module(…) - registrare moduli per l’injector
● inject(…) - inietta le variabili richieste
● $httpBackend - simula la comunicazione
HTTP con il back end e di definire delle
attese:
o when???(…).response(…)
o expect???(…)[.response(…)]
o flush([count])

AngularJS
Advanced
17.07.2014
Testing - controller
● Caricare il modulo
● Farsi iniettare le dipendenze
● Creare uno scope
● Creare i mock necessari
● Creare il controller
● Utilizzare il metodo $apply dello scope

AngularJS
Advanced
17.07.2014
Testing - direttive
● Caricare il modulo
● Preparare l’HTML di test (stringa)
● Farsi iniettare $compile e $rootScope
● Compilare l’HTML
● Modificare scope → verificare il DOM
● Modificare il DOM e lanciare gli eventi →
verificare lo scope

AngularJS
Advanced
17.07.2014
Gestione delle dipendenze
● AngularJS
● Direttive
● Testing (Unit)
● Q&A

AngularJS
Advanced
17.07.2014
Dipendenze - AngularJS’s way
Modulo - raggruppamento di “oggetti Angular”
angular.module('???', […])
.config(function(…){…})
.run(function(…){…})
var m = angular.module('???')
Angular non si occupa di caricare gli script!

AngularJS
Advanced
17.07.2014
Dipendenze - RequireJS
● Definisce le dipendenze fra file/moduli
● Carica file/moduli
● Garantisce l’ordine di caricamento
● Asincrono
● Usabile con librerie non-RequireJS
● Elimina variabili globali
● Include un tool per minimizzare e offuscare il
codice (r.js)

AngularJS
Advanced
17.07.2014
require.config({
baseUrl: '…',
paths: {
'nome': 'path/fuori/da/baseUrl', …
},
shim: {
'nome': { deps: […], exports: '…' }, …
}
});
require([…], function(){ });
//<script data-main="main.js" src="app/vendor/require.js">
main.js

AngularJS
Advanced
17.07.2014
● Definire nelle sezioni path e shim, la
posizione e le dipendeze delle librerie
angular
● Bootstrap manuale:
o No ng-app
o utilizzare plugin domReady
o utilizzare angular.bootstrap(…)
● Definire due main.js per test ed “esecuzione”

AngularJS
Advanced
17.07.2014
Ricordate!!!

AngularJS
Advanced
17.07.2014
Riferimenti
● AngularJS - https://angularjs.org/
● Jasmine -
http://jasmine.github.io/2.0/introduction.html
● RequireJS - http://requirejs.org/
● Build custom directives with AngularJS -
http://www.ng-
newsletter.com/posts/directives.html

AngularJS
Advanced
17.07.2014
Q&A
Domande?
(Sperando di sapervi rispondere :-D)
15 min

CommitUniversity AngularJSAdvanced Andrea Vallotti

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a CommitUniversity AngularJSAdvanced Andrea Vallotti

Semelhante a CommitUniversity AngularJSAdvanced Andrea Vallotti (20)

Mais de Commit University

Mais de Commit University (20)

CommitUniversity AngularJSAdvanced Andrea Vallotti

Notas do Editor