AngularJS-Intro
6 likes2,116 views
Il documento offre un'introduzione ad AngularJS, descrivendo come questo framework JavaScript facilita la creazione di applicazioni web dinamiche attraverso il binding dei dati e la separazione della logica di business dalla presentazione. Viene spiegata l'architettura MVW (Model-View-Whatever) di AngularJS, evidenziando l'importanza di modelli, viste e controller, oltre a trattare concetti come le direttive e l'iniezione delle dipendenze. Inoltre, vengono forniti esempi pratici di codice per illustrare l'uso delle direttive e del routing in una single-page application.
![Dependency Injection
Annotation
// INFERRED
$injector.invoke(function(serviceA){});
// ANNOTATED
function explicit(serviceA) {};
explicit.$inject = ['serviceA'];
$injector.invoke(explicit);
// INLINE
$injector.invoke(['serviceA', function
(serviceA){}]);](https://image.slidesharecdn.com/angularjs-intro-140112151620-phpapp02/85/AngularJS-Intro-18-320.jpg)
![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](https://image.slidesharecdn.com/angularjs-intro-140112151620-phpapp02/85/AngularJS-Intro-21-320.jpg)
![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](https://image.slidesharecdn.com/angularjs-intro-140112151620-phpapp02/85/AngularJS-Intro-22-320.jpg)
AngularJS-Intro
- 1. HTML enhanced for web apps! Introduzione al mondo di AngularJS [email protected]
- 2. Cos’è Framework JavaScript pensato per semplificare e velocizzare la realizzazione di applicazioni web dinamiche.
- 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. 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. 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. 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. 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 è un’istantanea del modello al render della pagina
- 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. 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. 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. 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. 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 ● 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. 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 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. 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: [email protected] ● LinkedIn: http://www.linkedin.com/pub/vittorio-conte/30/29a/191 ● AngularJS Italia ○ LinkedIn: https://www.linkedin.com/groups/AngularJS-Italia-7442742 ○ Twitter: @AngularJSItalia