Download - Workshop angular
![Page 1: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/1.jpg)
AngularJSA superheroic MVW framework
@emidio_croci
![Page 2: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/2.jpg)
Un framework?
Ma non c’è Jquery?
Lato client?
![Page 3: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/3.jpg)
- scarsa manutenibilità codice - no Separation of Concern - testabilità ridotta
Ci sarebbe ma….
![Page 4: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/4.jpg)
MVW?
Un altro pattern :-( No dai….
![Page 5: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/5.jpg)
Model View WHATEVER
![Page 6: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/6.jpg)
Services
Directives
Controllers
Views
Filters
AngularJS
Factories
![Page 7: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/7.jpg)
View Controller
Factories
$scope
Filters
Directives Services
![Page 8: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/8.jpg)
$scope
“Scope is the glue between application controller and the view”
ovvero
Il contesto di esecuzione delle nostre espressioni
![Page 9: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/9.jpg)
espressioni
codice javascript-like utilizzato per binding tra view e modello
![Page 10: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/10.jpg)
Recap
1. Dichiariamo i moduli utilizzando la sintassi angular.module(‘module’, [‘p’, function()])
2. $scope eredita da $rootScope 3. $apply permette di eseguire operazioni esterne
all’interno del contesto di angular 4. Non esageriamo con i $watch! 5. ng-repeat non ama i duplicati
![Page 11: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/11.jpg)
Direttive
Semplicemente, tag attributi o classi
A cosa servono?
Indicano ad angular che l’elemento relativo a delle funzionalità particolari
definite dall’utente e permettono la manipolazione del DOM
![Page 12: Workshop angular](https://reader033.vdocuments.site/reader033/viewer/2022051323/5484d0fd5806b5bd588b46ab/html5/thumbnails/12.jpg)
Recap
Non usare i controller per la manipolazione del DOM!
usare il controller per la comunicazione tra direttive
usare funzione link per aggiungere funzionalità alla direttiva