CommitUniversity AngularJSAdvanced Andrea Vallotti

AngularJS

direttive, testing e

organizzazione

@AndreaVallotti

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

Riepilogo

● AngularJS

● Direttive

● Testing (Unit)

● Gestione delle dipendenze

● Mettiamo tutto insieme

● Q&A

AngularJS

Advanced

17

.0

7.2

01

4

AngularJS

● AngularJS

● Direttive

● Testing (Unit)



● Q&A

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

Direttive

● AngularJS

● Direttive

● Testing (Unit)



● Q&A

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4


● 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

.0

7.2

01

4


● 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

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

● 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 DOMo =[?][attr] - collegamento bidirezionale

o &[attr] - esecuzione di un espressione nello

scope contenitore

Direttive - scope isolati

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

Direttive - link

link: function (scope, iElement, iAttrs,

[controller], [transcludeFn]) { ... }

oppure:link: {

pre: function ( … ) { ... }

post: function ( … ) { ... }

}

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

Direttive - Q&A

Domande?

(Sperando di sapervi rispondere :-D)

5 min

AngularJS

Advanced

17

.0

7.2

01

4

Testing

● AngularJS

● Direttive

● Testing (Unit)



● Q&A

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

Testing - Jasmine - anatomia

describe('Test', function() {

var testFixture;

beforeEach(function() { … });

afterEach(function() { … });

it('should fail', function() {

expect(true).toBe(false);

});

});

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4

Gestione delle dipendenze

● AngularJS

● Direttive

● Testing (Unit)



● Q&A

AngularJS

Advanced

17

.0

7.2

01

4

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

.0

7.2

01

4

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

.0

7.2

01

4


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

.0

7.2

01

4


● Definire nelle sezioni path e shim, la

posizione e le dipendeze delle librerie

angular

● Bootstrap manuale:o No ng-app

o utilizzare plugin domReadyo utilizzare angular.bootstrap(…)

● Definire due main.js per test ed “esecuzione”

AngularJS

Advanced

17

.0

7.2

01

4

Ricordate!!!

AngularJS

Advanced

17

.0

7.2

01

4

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

https://angularjs.org/

http://jasmine.github.io/2.0/introduction.html

http://requirejs.org/

http://requirejs.org/

http://www.ng-newsletter.com/posts/directives.html

AngularJS

Advanced

17

.0

7.2

01

4

Q&A

Domande?

(Sperando di sapervi rispondere :-D)

15 min

Documents

CommitUniversity AngularJSAdvanced Andrea Vallotti