Angularjs

http://angularjs.org
Versione 1.x

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!

Full-featured SPA
● L'applicazione Single 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.

● 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

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.

Direttive
● Le direttive sono 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.

View
<!doctype html>
<html ng-app=”cspApp”>
<head>
<meta charset="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

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”>

Model: L’oggetto scope
Nella terminologia 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

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

Service
● consentono di implementare 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...)

Dependency Injection
● la dependency 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.

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

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
});

Cos'è Cordova
● Si tratta 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/

Cos’è Ionic
● Ionic mette 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/

Angular 2…
Next Time!
Ora passiamo al codice!

Angularjs

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Angularjs

Similaire à Angularjs (20)

Angularjs