際際滷

際際滷Share a Scribd company logo

AngularJS-Intro

Vittorio Conte
Vittorio Conte

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

1 of 23
Downloaded 85 times
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 lHTML con elementi e attributi consentendo la modifica dinamica dei contenuti della view separando la logica di business da quella di presentazione
La potenza in Hello Word! 1. <html> 2. <head> 3. <script src=/VittorioConte/angularjsintro/"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
Lessenziale 1. <html> 2. <head> 3. <script src=/VittorioConte/angularjsintro/"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
Cosa succede LHTML 竪 un linguaggio di murkup per la creazione di ipertesti Il browser traduce LHTML nel DOM (Document Object Model), quindi scatena levento Ready() Angular cattura questo evento ed entra in gioco riscrivendo il DOM o parte di esso Quale? Quello nei confini di ng-app
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
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 竪 unistantanea del modello al render della pagina
Come avviene il binding Durante il bootstrap dellapplicazione angular: ricerca gli elementi e gli attributi aggiunti allHTML, le direttive crea dei listner per ognuno di questi elementi in modo da poter gestire la sincronizzazione tra esso e gli elementi del modello
Direttive Tutti quegli attributi e quelle notazioni che non sono parte dellHTML 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
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 linterazione tra il modello e la vista
Il pattern MVW AngularJS 竪 stato spesso accostato al pattern MVC Ultimamente 竪 stato accostato al pattern MVVM (loggetto $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".
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'; }; }
Model Lintera applicazione 竪 guidata dal modello Rispecchia lo stato dellapplicazione 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>
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'; }; }
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} }; } ?
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
Dependency Injection Annotation // INFERRED $injector.invoke(function(serviceA){}); // ANNOTATED function explicit(serviceA) {}; explicit.$inject = ['serviceA']; $injector.invoke(explicit); // INLINE $injector.invoke(['serviceA', function (serviceA){}]);
Dependency Injection Vantaggi: Favorisce la separazione delle responsabilit tra i componenti Promuove la testabilit Migliora la modularit
Single-page application Migliorare luser 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.
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
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
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

More Related Content

AngularJS-Intro

  • 1. HTML enhanced for web apps! Introduzione al mondo di AngularJS vitconte@gmail.com
  • 2. Cos竪 Framework JavaScript pensato per semplificare e velocizzare la realizzazione di applicazioni web dinamiche.
  • 3. Come arricchendo lHTML con elementi e attributi consentendo la modifica dinamica dei contenuti della view separando la logica di business da quella di presentazione
  • 4. La potenza in Hello Word! 1. <html> 2. <head> 3. <script src=/VittorioConte/angularjsintro/"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. Lessenziale 1. <html> 2. <head> 3. <script src=/VittorioConte/angularjsintro/"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. Cosa succede LHTML 竪 un linguaggio di murkup per la creazione di ipertesti Il browser traduce LHTML nel DOM (Document Object Model), quindi scatena levento Ready() Angular cattura questo evento ed entra in gioco riscrivendo il DOM o parte di esso Quale? Quello nei confini di ng-app
  • 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. 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 竪 unistantanea del modello al render della pagina
  • 9. Come avviene il binding Durante il bootstrap dellapplicazione angular: ricerca gli elementi e gli attributi aggiunti allHTML, 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. Direttive Tutti quegli attributi e quelle notazioni che non sono parte dellHTML 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. 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 linterazione tra il modello e la vista
  • 12. Il pattern MVW AngularJS 竪 stato spesso accostato al pattern MVC Ultimamente 竪 stato accostato al pattern MVVM (loggetto $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. 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. Model Lintera applicazione 竪 guidata dal modello Rispecchia lo stato dellapplicazione 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. 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. 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. 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. 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. Dependency Injection Vantaggi: Favorisce la separazione delle responsabilit tra i componenti Promuove la testabilit Migliora la modularit
  • 20. Single-page application Migliorare luser 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. 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. 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. 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