SlideShare a Scribd company logo
AngularJS
A superheroic MVW framework
@emidio_croci
Un framework?
Ma non c’è Jquery?
Lato client?
- scarsa manutenibilità codice
- no Separation of Concern
- testabilità ridotta
Ci sarebbe ma….
MVW?
Un altro pattern :-(
No dai….
Model View
WHATEVER
Services
Directives
Controllers
Views
Filters
AngularJS
Factories
View Controller
Factories
$scope
Filters
Directives Services
$scope
“Scope is the glue between application
controller and the view”
ovvero
Il contesto di esecuzione delle nostre
espressioni
espressioni
codice javascript-like utilizzato per
binding tra view e modello
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
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
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

More Related Content

What's hot (20)

Workshop Ideare e creare Web Applications, Introduzione ad AngularJS
Workshop Ideare e creare Web Applications, Introduzione ad AngularJSWorkshop Ideare e creare Web Applications, Introduzione ad AngularJS
Workshop Ideare e creare Web Applications, Introduzione ad AngularJS
Giovanni Buffa
 
Angular framework
Angular frameworkAngular framework
Angular framework
Luca Modica
 
Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015
Codemotion
 
AngularJS: server communication
AngularJS: server communicationAngularJS: server communication
AngularJS: server communication
Vittorio Conte
 
Migliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.jsMigliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.js
Andrea Dottor
 
Zend Framework Workshop Parte1
Zend Framework Workshop Parte1Zend Framework Workshop Parte1
Zend Framework Workshop Parte1
massimiliano.wosz
 
Zend Framework Workshop Parte2
Zend Framework Workshop Parte2Zend Framework Workshop Parte2
Zend Framework Workshop Parte2
massimiliano.wosz
 
Corso angular js base
Corso angular js baseCorso angular js base
Corso angular js base
Beniamino Ferrari
 
Acadevmy - Angular Overview
Acadevmy - Angular OverviewAcadevmy - Angular Overview
Acadevmy - Angular Overview
Francesco Sciuti
 
Fe04 angular js-101
Fe04   angular js-101Fe04   angular js-101
Fe04 angular js-101
DotNetCampus
 
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMRealizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Codemotion
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un framework
Giovanni Buffa
 
Alla scoperta di Zend Framework 1.8
Alla scoperta di Zend Framework 1.8Alla scoperta di Zend Framework 1.8
Alla scoperta di Zend Framework 1.8
massimiliano.wosz
 
Require js
Require jsRequire js
Require js
Rajashekar Bhagavatula
 
Angular - DI tricks
Angular - DI tricksAngular - DI tricks
Angular - DI tricks
Michele Stieven
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
Andrea Agnoletto
 
Cosa c'è di nuovo in asp.net core 2 0
Cosa c'è di nuovo in asp.net core 2 0Cosa c'è di nuovo in asp.net core 2 0
Cosa c'è di nuovo in asp.net core 2 0
Andrea Dottor
 
Sviluppo web con Ruby on Rails
Sviluppo web con Ruby on RailsSviluppo web con Ruby on Rails
Sviluppo web con Ruby on Rails
jekil
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
Giuneco S.r.l
 
Workshop Ideare e creare Web Applications, Introduzione ad AngularJS
Workshop Ideare e creare Web Applications, Introduzione ad AngularJSWorkshop Ideare e creare Web Applications, Introduzione ad AngularJS
Workshop Ideare e creare Web Applications, Introduzione ad AngularJS
Giovanni Buffa
 
Angular framework
Angular frameworkAngular framework
Angular framework
Luca Modica
 
Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015Slide typescript - xe dotnet - Codemotion Rome 2015
Slide typescript - xe dotnet - Codemotion Rome 2015
Codemotion
 
AngularJS: server communication
AngularJS: server communicationAngularJS: server communication
AngularJS: server communication
Vittorio Conte
 
Migliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.jsMigliora il tuo codice con knockout.js
Migliora il tuo codice con knockout.js
Andrea Dottor
 
Zend Framework Workshop Parte1
Zend Framework Workshop Parte1Zend Framework Workshop Parte1
Zend Framework Workshop Parte1
massimiliano.wosz
 
Zend Framework Workshop Parte2
Zend Framework Workshop Parte2Zend Framework Workshop Parte2
Zend Framework Workshop Parte2
massimiliano.wosz
 
Acadevmy - Angular Overview
Acadevmy - Angular OverviewAcadevmy - Angular Overview
Acadevmy - Angular Overview
Francesco Sciuti
 
Fe04 angular js-101
Fe04   angular js-101Fe04   angular js-101
Fe04 angular js-101
DotNetCampus
 
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVMRealizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Realizzare applicazioni cross-platform con Xamarin e il pattern MVVM
Codemotion
 
Angular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un frameworkAngular js o React? Spunti e idee per la scelta di un framework
Angular js o React? Spunti e idee per la scelta di un framework
Giovanni Buffa
 
Alla scoperta di Zend Framework 1.8
Alla scoperta di Zend Framework 1.8Alla scoperta di Zend Framework 1.8
Alla scoperta di Zend Framework 1.8
massimiliano.wosz
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
Andrea Agnoletto
 
Cosa c'è di nuovo in asp.net core 2 0
Cosa c'è di nuovo in asp.net core 2 0Cosa c'è di nuovo in asp.net core 2 0
Cosa c'è di nuovo in asp.net core 2 0
Andrea Dottor
 
Sviluppo web con Ruby on Rails
Sviluppo web con Ruby on RailsSviluppo web con Ruby on Rails
Sviluppo web con Ruby on Rails
jekil
 
Blazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo GrecoBlazor with .net 5 - di Gerardo Greco
Blazor with .net 5 - di Gerardo Greco
Giuneco S.r.l
 

Similar to Workshop angular (20)

Architetttura Della Soluzione
Architetttura Della SoluzioneArchitetttura Della Soluzione
Architetttura Della Soluzione
Luca Milan
 
MVC and Struts 1
MVC and Struts 1MVC and Struts 1
MVC and Struts 1
Tarin Gamberini
 
Idiomatic Domain Driven Design
Idiomatic Domain Driven DesignIdiomatic Domain Driven Design
Idiomatic Domain Driven Design
Andrea Saltarello
 
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...
Codemotion
 
Model View Controller - Semplificare Il Codice E Minimizzare I Tempi
Model View Controller - Semplificare Il Codice E Minimizzare I TempiModel View Controller - Semplificare Il Codice E Minimizzare I Tempi
Model View Controller - Semplificare Il Codice E Minimizzare I Tempi
Marco Parenzan
 
Spring Framework
Spring FrameworkSpring Framework
Spring Framework
NaLUG
 
Niccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWTNiccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWT
firenze-gtug
 
Knockout.js
Knockout.jsKnockout.js
Knockout.js
Manuel Scapolan
 
Corso angular js componenti
Corso angular js componentiCorso angular js componenti
Corso angular js componenti
Beniamino Ferrari
 
Alessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVCAlessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVC
Alessandro Forte
 
Spring 2.5
Spring 2.5Spring 2.5
Spring 2.5
Pasquale Paola
 
ASP.NET MVC: Full Throttle
ASP.NET MVC: Full ThrottleASP.NET MVC: Full Throttle
ASP.NET MVC: Full Throttle
Andrea Saltarello
 
Angular in produzione: Best Practices e Performance Improvements
Angular in produzione:Best Practices e Performance ImprovementsAngular in produzione:Best Practices e Performance Improvements
Angular in produzione: Best Practices e Performance Improvements
Michele Aponte
 
Spring Intro
Spring IntroSpring Intro
Spring Intro
guestfb22d3
 
Presentazione tirocinio
Presentazione tirocinio Presentazione tirocinio
Presentazione tirocinio
Claudio Mignanti
 
Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6
Michele Aponte
 
Data binding libera tutti!
Data binding libera tutti!Data binding libera tutti!
Data binding libera tutti!
Appsterdam Milan
 
Data binding libera tutti!
Data binding libera tutti!Data binding libera tutti!
Data binding libera tutti!
Salvatore Laisa
 
Rich client application: MVC4 + MVVM = Knockout.js
Rich client application: MVC4 + MVVM = Knockout.jsRich client application: MVC4 + MVVM = Knockout.js
Rich client application: MVC4 + MVVM = Knockout.js
Giorgio Di Nardo
 
Architetttura Della Soluzione
Architetttura Della SoluzioneArchitetttura Della Soluzione
Architetttura Della Soluzione
Luca Milan
 
Idiomatic Domain Driven Design
Idiomatic Domain Driven DesignIdiomatic Domain Driven Design
Idiomatic Domain Driven Design
Andrea Saltarello
 
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...
Tech Webinar: Advanced AngularJS, tecniche avanzate per padroneggiare il fram...
Codemotion
 
Model View Controller - Semplificare Il Codice E Minimizzare I Tempi
Model View Controller - Semplificare Il Codice E Minimizzare I TempiModel View Controller - Semplificare Il Codice E Minimizzare I Tempi
Model View Controller - Semplificare Il Codice E Minimizzare I Tempi
Marco Parenzan
 
Spring Framework
Spring FrameworkSpring Framework
Spring Framework
NaLUG
 
Niccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWTNiccolò Becchi: Introduzione a GWT
Niccolò Becchi: Introduzione a GWT
firenze-gtug
 
Alessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVCAlessandro Forte - MVP vs MVC
Alessandro Forte - MVP vs MVC
Alessandro Forte
 
Angular in produzione: Best Practices e Performance Improvements
Angular in produzione:Best Practices e Performance ImprovementsAngular in produzione:Best Practices e Performance Improvements
Angular in produzione: Best Practices e Performance Improvements
Michele Aponte
 
Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6Applicazioni web con Asp.Net MVC 6
Applicazioni web con Asp.Net MVC 6
Michele Aponte
 
Data binding libera tutti!
Data binding libera tutti!Data binding libera tutti!
Data binding libera tutti!
Appsterdam Milan
 
Data binding libera tutti!
Data binding libera tutti!Data binding libera tutti!
Data binding libera tutti!
Salvatore Laisa
 
Rich client application: MVC4 + MVVM = Knockout.js
Rich client application: MVC4 + MVVM = Knockout.jsRich client application: MVC4 + MVVM = Knockout.js
Rich client application: MVC4 + MVVM = Knockout.js
Giorgio Di Nardo
 

Workshop angular