HTML enhanced for web apps! 
Introduzione al mondo di AngularJS 
vitconte@gmail.com
Cos’è 
Framework JavaScript pensato per semplificare 
e velocizzare la realizzazione di applicazioni 
web dinamiche.
Come 
● arricchendo l’HTML con elementi e attributi 
● consentendo la modifica dinamica dei contenuti della view 
● separa...
La potenza in Hello Word! 
1. <html> 
2. <head> 
3. <script src="https://ajax.googleapis.com/ajax/ 
4. libs/angularjs/1.2....
L’essenziale 
1. <html> 
2. <head> 
3. <script src="https://ajax.googleapis.com/ajax/ 
4. libs/angularjs/1.2.7/angular.min...
Cosa succede 
● L’HTML è un linguaggio di murkup per la creazione di ipertesti 
● Il browser traduce L’HTML nel DOM (Docum...
Il binding 
1. … 
2. <label>Name:</label> 
3. <input type="text" ng-model="yourName" 
placeholder="Enter a name here"> 
4....
Tipi di binding 
● Data binding unidirezionale {{}} o ng-bind 
○ è il modello a dettare legge 
● Data binding bidirezional...
Come avviene il binding 
Durante il bootstrap dell’applicazione angular: 
● ricerca gli elementi e gli attributi aggiunti ...
Direttive 
Tutti quegli attributi e quelle notazioni che non sono parte dell’HTML ma che vengono utilizzate da 
AngularJS ...
Architettura 
Sebbene si ha una certa flessibilità nello sviluppo di applicazioni con AngularJS 
si dovranno comunque defi...
Il pattern MVW 
● AngularJS è stato spesso accostato al pattern MVC 
● Ultimamente è stato accostato al pattern MVVM (l’og...
Architettura esempio 
1. <body ng-app> 
2. <div ng-controller="HelloController"> 
3. <label>Name:</label> 
4. <input type=...
Model 
● L’intera applicazione è guidata dal modello 
● Rispecchia lo stato dell’applicazione 
● Determina quali viste mos...
Controller 
● Simile al code behind di .net 
● Possono essercene diversi 
○ ognuno ha effetto entro i confini del 
suo ng-...
Template vs View 
... 
<ul> 
Template View 
<li ng-repeat="casa in elencoCase"> 
{{casa.nome}} 
</li> 
</ul> 
... 
... 
<u...
Dependency Injection 
Pattern Architetturale 
Coinvolge almeno tre elementi: 
● una componente dipendente, 
● la dichiaraz...
Dependency Injection 
Annotation 
// INFERRED 
$injector.invoke(function(serviceA){}); 
// ANNOTATED 
function explicit(se...
Dependency Injection 
Vantaggi: 
● Favorisce la separazione delle responsabilità tra i componenti 
● Promuove la testabili...
Single-page application 
Migliorare l’user experience rendendo fluida la navigazione nelle web application, limitando il r...
Route 
angular.module('myApp', []). 
config(['$routeProvider', function($routeProvider) { 
// Le regole di routing vanno d...
Route 
angular.module('myApp', []). 
config(['$routeProvider', function($routeProvider) { 
$routeProvider 
.when('/', { 
t...
Riferimenti 
● Email: vitconte@gmail.com 
● LinkedIn: http://www.linkedin.com/pub/vittorio-conte/30/29a/191 
● AngularJS I...
Upcoming SlideShare
Loading in …5
×

AngularJS-Intro

1,843 views

Published on

Concetti base e qualche esempio per mostrare le potenzialità del migliore Framework Javascript per lo sviluppo di applicazioni web.
AngulrJS by Google

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,843
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
76
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

AngularJS-Intro

  1. 1. HTML enhanced for web apps! Introduzione al mondo di AngularJS vitconte@gmail.com
  2. 2. Cos’è Framework JavaScript pensato per semplificare e velocizzare la realizzazione di applicazioni web dinamiche.
  3. 3. Come ● arricchendo l’HTML con elementi e attributi ● consentendo la modifica dinamica dei contenuti della view ● separando la logica di business da quella di presentazione
  4. 4. La potenza in Hello Word! 1. <html> 2. <head> 3. <script src="https://ajax.googleapis.com/ajax/ 4. libs/angularjs/1.2.7/angular.min.js"></script> 5. </head> 6. <body> 7. <div ng-app> 8. <label>Name:</label> 9. <input type="text" ng-model="yourName" placeholder="Enter a name here"> 10. <hr> 11. <h1>Hello {{yourName}}!</h1> 12. </div> 13. </body> 14. </html> Angular provvederà ad aggiornare il valore della proprietà yourName in tutti gli elementi della pagina che la richiamano
  5. 5. L’essenziale 1. <html> 2. <head> 3. <script src="https://ajax.googleapis.com/ajax/ 4. libs/angularjs/1.2.7/angular.min.js"></script> 5. </head> 6. <body> 7. <div ng-app> 8. ... 9. </div> 10. </body> 11. </html> angular.min.js: la libreria ng-app: confini di un’ applicazione angularjs
  6. 6. Cosa succede ● L’HTML è un linguaggio di murkup per la creazione di ipertesti ● Il browser traduce L’HTML nel DOM (Document Object Model), quindi scatena l’evento Ready() ● Angular cattura questo evento ed entra in gioco riscrivendo il DOM o parte di esso ● Quale? Quello nei confini di ng-app
  7. 7. Il binding 1. … 2. <label>Name:</label> 3. <input type="text" ng-model="yourName" placeholder="Enter a name here"> 4. <hr> 5. <h1>Hello {{yourName}}!</h1> 6. ... entrambi quest elementi sono legati alla stessa variabile del modello yourName Sarà Angular a mantenere aggiornati gli elementi del DOM rispetto le proprietà del Modello
  8. 8. Tipi di binding ● Data binding unidirezionale {{}} o ng-bind ○ è il modello a dettare legge ● Data binding bidirezionale ng-model ○ il modello e la view sono sincronizzati ● One-time binding {{::nomeProprietà}} ○ la view è un’istantanea del modello al render della pagina
  9. 9. Come avviene il binding Durante il bootstrap dell’applicazione angular: ● ricerca gli elementi e gli attributi aggiunti all’HTML, le direttive ● crea dei listner per ognuno di questi elementi in modo da poter gestire la sincronizzazione tra esso e gli elementi del modello
  10. 10. Direttive Tutti quegli attributi e quelle notazioni che non sono parte dell’HTML ma che vengono utilizzate da AngularJS per estendere lo stesso sono chiamate direttive 1. <body> 2. <div ng-app> 3. ... 4. </div> 5. </body> 1. <label>Name:</label> 2. <input type="text" ng-model="yourName" placeholder="Enter a name here"> 3. <hr> ... ng-bind ... ng-repeat
  11. 11. Architettura Sebbene si ha una certa flessibilità nello sviluppo di applicazioni con AngularJS si dovranno comunque definire un Modello, una View e un Controller: ● Un modello contenente dati che rappresentano lo stato corrente dell’ applicazione ● Una vista che visualizza questi dati ● Un controller che gestisce l’interazione tra il modello e la vista
  12. 12. Il pattern MVW ● AngularJS è stato spesso accostato al pattern MVC ● Ultimamente è stato accostato al pattern MVVM (l’oggetto $scope viene considerato come un ViewMode) ● In realtà secondo gli autori AngularJS adotta il pattern MVW (Model View Whatever), dove Whatever sta per qualsiasi cosa sia adatta al vostro caso. Having said, I'd rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for "whatever works for you".
  13. 13. Architettura esempio 1. <body ng-app> 2. <div ng-controller="HelloController"> 3. <label>Name:</label> 4. <input type="text" ng-model="yourName" placeholder="Enter a name here"> 5. <input type="button" value="Reset" ng-click="Reset()"> 6. <hr> 7. <h1>Hello {{yourName}}!</h1> 8. </div> 9. </body> function HelloController($scope) { $scope.yourName = 'No Name'; $scope.Reset = function() { $scope.yourName = 'No Name'; }; }
  14. 14. Model ● L’intera applicazione è guidata dal modello ● Rispecchia lo stato dell’applicazione ● Determina quali viste mostrare ● Cosa mostrare nelle viste ● Dove lo trovo? $scope function HelloController($scope) { $scope.yourName = 'No Name'; $scope.Reset = function() { $scope.yourName = 'No Name'; }; } <input type=”text” ng-model=“yourName” /> <h1>Hello {{yourName}}</h1>
  15. 15. Controller ● Simile al code behind di .net ● Possono essercene diversi ○ ognuno ha effetto entro i confini del suo ng-controller ● Definisce la logica di business ● Inizializza il modello ● Definisce le operazioni possibili sul modello 1. <div ng-controller=“HelloController”> 2. … 3. </div> function HelloController($scope) { $scope.yourName = 'No Name'; $scope.Reset = function() { $scope.yourName = 'No Name'; }; }
  16. 16. Template vs View ... <ul> Template View <li ng-repeat="casa in elencoCase"> {{casa.nome}} </li> </ul> ... ... <ul> <li>Milano</li> <li>Roma</li> <li>Palermo</li> </ul> ... function HelloController($scope) { $scope.elencoCase = { {name:'casa1', citta:’Milano’}, + = {name:'casa2', citta:’Roma’}, {name:'casa3', citta:’Palermo’} }; } ?
  17. 17. Dependency Injection Pattern Architetturale Coinvolge almeno tre elementi: ● una componente dipendente, ● la dichiarazione delle dipendenze del componente, definite come interface contracts, ● un injector (chiamato anche provider o container) che crea, a richiesta, le istanze delle classi che implementano delle dependency interfaces. function HelloController($scope) { $scope.yourName = 'No Name'; $scope.Reset = function() { $scope.yourName = 'No Name'; }; } Componente dipendente Dichiarazione delle dipendenze
  18. 18. Dependency Injection Annotation // INFERRED $injector.invoke(function(serviceA){}); // ANNOTATED function explicit(serviceA) {}; explicit.$inject = ['serviceA']; $injector.invoke(explicit); // INLINE $injector.invoke(['serviceA', function (serviceA){}]);
  19. 19. Dependency Injection Vantaggi: ● Favorisce la separazione delle responsabilità tra i componenti ● Promuove la testabilità ● Migliora la modularità
  20. 20. Single-page application Migliorare l’user experience rendendo fluida la navigazione nelle web application, limitando il ricaricamento solo di quelle parti della pagina interessate dalla richiesta (griglie, liste, …). Come gestire il cambio pagina di una single-page application con AngularJs? … <header> <h1>Header</h1> </header> <div class="content"> <div ng-view></div> </div> <footer> <h5>Footer</h5> </footer> … La direttiva ng-view può essere vista come un segnaposto per il modulo $route. E’ il posto dove le view verranno innestate.
  21. 21. Route angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { // Le regole di routing vanno definite qui }]); angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'HomeController' }); }]); Il route di moduli o app va definito nella funzione config Per aggiungere un route specifico dobbiamo usare il metodo when
  22. 22. Route angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', { templateUrl: 'views/home.html', controller: 'HomeController' }); .otherwise({redirectTo: '/'}); }]); Se nessuna regola è soddisfatta, viene chiamato il metodo otherwise
  23. 23. Riferimenti ● Email: vitconte@gmail.com ● LinkedIn: http://www.linkedin.com/pub/vittorio-conte/30/29a/191 ● AngularJS Italia ○ LinkedIn: https://www.linkedin.com/groups/AngularJS-Italia-7442742 ○ Twitter: @AngularJSItalia

×