Downloaded 41 times
![Controller
● Il controller in Angular è collegato a un
elemento del DOM (Document Object Model)
tramite una direttiva.
angular.module('cspApp', [])
.controller('MainCtrl', function ($scope) {
$scope.welcomeText = 'Benvenuto!';
}
---------
<body ng-controller=”MainCtrl”>](https://image.slidesharecdn.com/angularjs-160219191156/85/Angularjs-12-320.jpg)
![angular.module('cspApp', [])
.service("userService", function($http) {
return $http.get('http://restapi/utente');
})
angular.module('cspApp').controller('MainCtrl', function
($scope, userService) {
userService.then(function (nome) {
$scope.welcomeText = 'Benvenuto ' + nome + '!';
},
function () {
$scope.welcomeText = 'Non mi ricordo il tuo nome :(';
});
}
Dependency
Injection](https://image.slidesharecdn.com/angularjs-160219191156/85/Angularjs-17-320.jpg)
Uploaded byFrancesco Portus
Angularjs
AngularJS è un framework MVC sviluppato da Google per la creazione di applicazioni web single page, che caricano dinamicamente le risorse in una singola pagina HTML. Utilizza componenti come direttive e servizi per estendere le funzionalità del DOM e semplificare la gestione dei dati attraverso tecniche come il data binding e l'injection di dipendenze. Inoltre, può essere utilizzato con Apache Cordova e Ionic per sviluppare applicazioni mobili funzionanti su diverse piattaforme.
More Related Content
![Project-Based Learning (PBL) Proposal [UIIT assessment item one]](https://cdn.slidesharecdn.com/ss_thumbnails/uiitai1-120529132954-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Angularjs
- 2.
- 3. Cos'è AngularJS Angularjs èun framework MVC sviluppato da Google per sviluppare Web Application ● Per framework si intende: “una struttura che facilita lo sviluppo, sia in termini di velocità che in termini di ordine e mantenibilità del codice” Non è una libreria!
- 4. Full-featured SPA ● L'applicazioneSingle Page Application viene eseguita all’interno di una singola pagina HTML ● tutte le risorse necessarie alla sua esecuzione vengono caricate dinamicamente ed aggiunte al DOM della pagina corrente. ● All’interno di una singola pagina vengono caricate viste diverse in base all’interazione dell’utente con la pagina stessa. ● Questo approccio consente di creare applicazioni responsive che si avvicinano al funzionamento delle applicazioni desktop.
- 5.
- 6. ● Bower: èun package manager per il web, ovvero offre la possibilità di gestire le dipendenze Web di applicazioni esclusivamente front-end ● Grunt: è uno strumento di build task based: basato su operazioni concatenabili (stile Ant), attività come e minificazione e concatenazione ● Yeoman: tool per generare scaffolding di applicazioni, che utilizza Grunt per il processo di build e Bower per la gestione delle dipendenze
- 7. MVC Il Model-View-Controller (MVC,talvolta tradotto in italiano Modello-Vista-Controllo), in informatica, è un pattern architetturale molto diffuso nello sviluppo di sistemi software, in particolare nell'ambito della programmazione orientata agli oggetti, in grado di separare la logica di presentazione dei dati dalla logica di business.
- 9.
- 10. Direttive ● Le direttivesono la funzionalità predominante e potente disponibile solo in AngularJS. ● Permettono di creare componenti HTML personalizzati e riusabili, che possono essere utilizzati per nascondere la complessità della struttura DOM e permettono di "decorare" alcuni elementi con comportamente specifici. Vi consentono di estendere il vostro HTML permettendovi di inventare nuove sintassi HTML, e istruendo AngularJS per incorporare le loro funzionalità nella pagina. ● Hanno il prefisso "ng-", saranno inserite come attributi HTML e funzionano come elementi standalone.
- 11. View <!doctype html> <html ng-app=”cspApp”> <head> <metacharset="utf-8"> <title>Prima pagina con AngularJS</title> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </head> <body ng-controller=”MainCtrl”> <p> <strong>{{welcomeText}}<strong><br/> La somma di 12 e 13 è uguale a {{12+13}} </p> </body> </html> Direttiva Controller Modello
- 12. Controller ● Il controllerin Angular è collegato a un elemento del DOM (Document Object Model) tramite una direttiva. angular.module('cspApp', []) .controller('MainCtrl', function ($scope) { $scope.welcomeText = 'Benvenuto!'; } --------- <body ng-controller=”MainCtrl”>
- 13. Model: L’oggetto scope Nellaterminologia di AngularJS uno scope (spesso indicato nel codice con $scope) indica il contesto in cui vengono salvati i dati di un’applicazione (il model) ed in cui vengono valutate le espressioni utilizzate nella view. Lo $scope è il “collante” tra la vista e il controller
- 14. Data Binding ● E'il meccanismo di sincronizzazione automatica dei dati tra il modello e la view ● ogni modifica al modello dei dati si riflette automaticamente sulla view e ogni modifica alla view viene riportata sul modello dei dati ● È sufficiente associare il modello allo scope all’interno del controller ed utilizzare la direttiva ng-model nella view oppure usare le espressioni
- 15. Service ● consentono diimplementare la logica dell’applicazione, cioè le funzionalità che si occupano di elaborare e/o recuperare i dati da visualizzare sulle view tramite i controller. ● Utilizzate in AngularJS per consumare dati provenienti da un’API REST (ma non solo...)
- 16. Dependency Injection ● ladependency injection consente di combinare insieme componenti allo scopo di strutturare un’applicazione. ● Se all’interno di un componente Angular abbiamo bisogno delle funzionalità offerte da un altro componente non dobbiamo fare altro che dichiararne la dipendenza.
- 17. angular.module('cspApp', []) .service("userService", function($http){ return $http.get('http://restapi/utente'); }) angular.module('cspApp').controller('MainCtrl', function ($scope, userService) { userService.then(function (nome) { $scope.welcomeText = 'Benvenuto ' + nome + '!'; }, function () { $scope.welcomeText = 'Non mi ricordo il tuo nome :('; }); } Dependency Injection
- 18. Teoria delle “promesse” ●Sono oggetti che rappresentano il risultato di una chiamata di funzione asincrona ● rappresentano una promessa che un risultato verrà fornito non appena disponibile ● Il vantaggio dell’utilizzo delle promise consiste nel rendere il codice più leggibile $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // Chiamata asincrona // “response” contiene il risultato del Server }, function errorCallback(response) { // Chiamata asincrona in caso di errore // “response” contiene il risultato di errore del Server });
- 19.
- 20. Cos'è Cordova ● Sitratta di un Framework – una serie di strumenti di sviluppo – che consente agli sviluppatori di costruire applicazioni mobile utilizzando dei linguaggi specifici del Web: HTML, CSS e JavaScript. ● Il codice sorgente, quasi identico, permetterà di sviluppare applicazioni su differenti piattaforme. Attualmente, Cordova è, tra gli altri, compatibile con i sistemi: iOS, Android, Blackberry, WindowsPhone, PalmWebOS, Bada e Symbian. https://cordova.apache.org/
- 21. Cos’è Ionic ● Ionicmette semplicemente insieme Apache Cordova e AngularJS ● Essendo basato su Cordova, le app svilluppate con Ionic sono compatibili non solo con iOS e Android, ma anche con Windows Phone, Amazon Fire OS, Firefox OS. http://ionicframework.com/
- 22. Angular 2… Next Time! Orapassiamo al codice!