Corso angular js componenti

AngularJS
Componenti
AngularJS

Dependency injection (1)
● 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.
● Ad esempio, se in un controller abbiamo bisogno di accedere alle funzionalità offerte da
un servizio possiamo dichiararlo nel seguente modo:
angular.module("mioModulo")
.controller("mioController", function(mioServizio) {
// ...
});

● È questo il classico esempio con cui dichiariamo la dipendenza di
un controller dall’oggetto di sistema $scope o dal servizio $http per
effettuare chiamate Ajax:
.controller("mioController", function($scope, $http) {
//...
});

● Quasi sempre, in realtà, al posto del codice dell’esempio precedente
vediamo il seguente codice semanticamente equivalente:
.controller("mioController", ["$scope", "$http", function($scope, $http) {
// ...
}]);
● Questo semplice cambiamento farà in modo che la nostra applicazione
Angolare funzioni dopo la minificazione.

Corso base AngularJS Beniamino Ferrari 5
Componenti (1)
● Angular propone una strutturazione modulare composta da
componenti che hanno ciascuno una ben precisa funzione,
seguendo il principio della separazione delle competenze
● View : Rappresenta quello che l’utente vede, l’interfaccia
grafica generata a partire da un template HTML elaborato da
Angular.
● Controller : È un oggetto JavaScript che espone dati e
funzionalità ad una view.

Componenti (2)
● Filtro: È una funzione che formatta il valore di un’espressione per la
visualizzazione su una view, come ad esempio la formattazione di una
data o di un numero o la selezione di un sottoinsieme di elementi di un
array.
● Direttiva: È un componente che estende l’HTML con tag ed attributi
personalizzati; è l’unico componente autorizzato a manipolare il DOM
via JavaScript
● Servizio: È un oggetto che fornisce funzionalità indipendenti
dall’interfaccia grafica, come ad esempio l’accesso al server via HTTP.

Le view
● Una vista è un contenuto che viene mostrato all'utente.
● La combinazione di view e route aiuta a dividere
un'applicazione in viste logiche e a collegarle ai diversi
controller.
● Dividere l'applicazione in diverse viste e utilizzando un Routing
aiuta a dividere logicamente l'applicazione e renderla più
gestibile.

Organizzazione classica (1)
● Supponiamo di avere un'applicazione di ordinazione, in cui un
cliente può visualizzare gli ordini e posizionarne di nuovi.
MyApp/#show
MyApp/#new
View Ordini
View Nuovi Ordini
Controller
View Ordini
Controller
Nuovi Ordini

Organizzazione classica (2)
● In AngularJS, invece di avere due pagine Web diverse, una per
"Visualizza ordini" e un'altra per "Nuovi ordini" è possibile
creare due viste diverse denominate "Visualizza ordini" e "Nuovi
ordini" utilizzandole nella stessa pagina utilizzando ng-view.

Direttiva ng-view
● La "NgView” al cambiare il percorso corrente “URL”
modifica il contenuto della pagina dover passare a un’altra
pagina, ma , modificando solo il contento del tag associato ad
essa;
● Questo avviene in base alla configurazione del servizio $route;

Ng-view
● Nel nostro esempio, presenteremo due opzioni all'utente: uno è
quello di visualizzare un "evento" e l'altro è quello di
aggiungere un "evento".
● Quando l'utente fa clic sul collegamento aggiungi un evento,
verrà visualizzata la vista per "Aggiungi evento" e lo stesso vale
per "Visualizza evento".

Ng-view esempio (1)
Ad esempio i passaggi di utilizzo di routing usando ng-view sono i seguenti:
1 - Creare una pagina index.html all’interno di un web server e includere il file di
angular e angular route (l’ordine è importante!)
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
2 - Aggiungere tag href che rappresenteranno i collegamenti a "Aggiungi
evento" e "Visualizza evento”.
3 - Aggiungere un tag div con la direttiva ng-view che rappresenterà la vista.
Ciò consentirà l'iniezione della vista corrispondente ogni volta che l'utente fa clic
sul link "Aggiungi nuovo evento" o sul link "Visualizza eventi".

Ng-view esempio (2)
Stiamo usando angular 1.7.2
● <div class="container">
<ul>
<li><a href="#!NewEvent"> Aggiungi Evento</a></li>
<li><a href="#!DisplayEvent">Mostra Evento</a></li>
</ul>
<div ng-view></div>
</div>

Ng-view esempio (3)
- 3 Aggiungere la logica di routing
var app = angular.module('sampleApp',["ngRoute"]);
app.config(function($routeProvider){
$routeProvider.
//prima sezione
when("/NewEvent",{
templateUrl : "add_event.html",
controller: "AddEventController"
}).
//seconda sezione
when("/DisplayEvent", {
templateUrl: "show_event.html",
controller: "ShowDisplayController"
}).
//terza sezione
otherwise ({
redirectTo: '/DisplayEvent'
});
});

Ng-view esempio (4)
● La prima sezione di codice indica che quando l'utente fa click sul
tag href "NewEvent" inserirà il codice di add_event.html nella
vista. Per quanto riguarda l'elaborazione della business logic utilizzerà
"AddEventController".
● La prima sezione indica che quando l'utente fa clic sul tag href
"DisplayEvent" inserirà il codice di web show_event.html nella
vista. Per quanto riguarda l'elaborazione della business logic utilizzerà
"ShowDisplayController".
● La terza sezione di codice indica che la vista predefinita mostrata
all'utente è la vista DisplayEvent

Ng-view esempio (4)
4 - Aggiungere controller per elaborare la logica di business sia per
le funzionalità "DisplayEvent" che per "AddEvent".
app.controller("AddEventController", function($scope) {
$scope.message = "This is to Add a new Event";
});
app.controller("ShowDisplayController",function($scope){
$scope.message = "This is display an Event";
});

Ng-view esempio (5)
- 5 Crea pagine chiamate add_event.html e show_event.html.
add_event.html
<div ng-controller="ShowDisplayController">
<h2>Show event</h2>
{{message}}
</div>
show_event.html
<div ng-controller="AddEventController">
<h2>Add New Event</h2>
{{message}}
</div>

Filtri (1)
● I filtri sono componenti con il compito di formattare o
comunque applicare una elaborazione al risultato di una
espressione. Il loro utilizzo all’interno di una view è abbastanza
semplice ed è basato sull’uso dell’operatore pipe (|), come nel
seguente esempio:
<p>{{"Hello Angular" | uppercase }}</p>
<p>{{"Hello Angular" | uppercase | lowercase }}</p>

Filtri (2)
● I filtri possono avere dei parametri che seguono la seguente
forma:
{{espressione | filtro:par1:par2:par3 }}

Filtri (3)
● Angularjs ha una serie di filtri predefiniti
– Lowercase Trasforma una stringa in caratteri minuscoli
– Upprecase Trasforma una stringa in caratteri maiuscoli
– Number Formatta un numero
– Currency Formatta un numero come valuta
– Date Formatta una data
– OrderBy Ordina gli elementi di un array
– LimitTo Estrae i primi n elementi di un insieme (stringa, array)
– Filter Estrae gli elementi di un array che soddisfano un determinato criterio

Filtri Personalizzati
● Se i filtri predefiniti non sono sufficienti per le nostre esigenze, possiamo costruirci un nostro filtro personalizzato:
angular.module("myApp")
.filter("capitalize",
function(){
return function(text) {
var result = text;
if (text && isNaN(text)) {
result = text.charAt(0).toUpperCase() + text.substr(1);
}
return result;
}
});
● <p>{{"questo è un test" | capitalize}}</p> che risulta <p>Questo è un test</p>

Oggetti Javascript
● Un oggetto è un contenitore di valori eterogenei, messi insieme
a formare una struttura dati.
● Un oggetto è composto da:
– Dati: detti proprietà e rappresentati da coppie di nome-valore
– Funzionalità: sono dette metodi e rappresentate da funzioni.

Oggetti Javascript - Proprietà
var oggettoVuoto = {};
var persona = { "nome": "Mario", "cognome": "Rossi"};
var persona = {
nome: "Mario",
cognome: "Rossi",
indirizzo: {
via: "Via Garibaldi",
numero: 15,
CAP: "00100",
citta: "Roma"
}
};

Accesso alle proprietà
● Il primo approccio è la cosiddetta dot-notation
var nome = persona.nome;
● L’approccio alternativo è quello in cui specifichiamo la proprietà
di un oggetto indicando il suo nome sotto forma di stringa
tra parentesi quadre:
var nome = persona["nome"];

Metodi
● metodi rappresentano attività che un oggetto può compiere
● definizione
function visualizzaNomeCognome() { return "Mario Rossi"; }
persona.nomeCognome = visualizzaNomeCognome;
● chiamata
var nomeCognome = persona.nomeCognome();

Promise (1)
● Gli oggetti Promise Standard built-in objects usati per computazioni in differita e asincrone. Una
Promise rappresenta un'operazione che non è ancora completata, ma lo sarà in futuro.
● new Promise(function(resolve, reject) { ... });
Executor è una funzione che ha due argomenti: resolve e reject. Tale funzione viene chiamata
immediatamente dall'implementazione della Promise, passando i due argomenti resolve e reject, che sono
due funzioni. Le due funzioni resolve e reject, quando chiamate, risolvono o rigettano la promise.
L'esecutore inizia del lavoro (solitamente asincrono), e, una volta completato, chiama resolve per
risolvere la promise, o reject se c'è stato qualche errore. Se un errore viene sollevato nella funzione di
esecuzione (executor) la promise viene rigettata.

Promise (2)
/* ES5 */
var isMomHappy = false;
// definizione della sPromise
var willIGetNewPhone = new Promise(
function (resolve, reject) {
if (isMomHappy) {
var phone = {
brand: 'Samsung',
color: 'black'
};
resolve(phone); // fulfilled
} else {
var reason = new Error('mom is not happy');
reject(reason); // reject
}
}
);

Promise (3)
// chiamata alla promise
var askMom = function () {
willIGetNewPhone
.then(function (fulfilled) {
// Abbiamo un nuovo cellulare
console.log(fulfilled);
// output: { brand: 'Samsung', color: 'black' }
})
.catch(function (error) {
// la mamma non l’ha comprato
console.log(error.message);
});
};
askMom();

$q (1)
● ES6, ormai riconosciuto come ECMAScript 2015, è la nuova
versione dello standard a cui si rifà il linguaggio Javascript
● La promise semplificata dello stile ES6 consiste essenzialmente
nell'usare $q come costruttore che utilizza come primo
argomento una funzione resolver.

$q (2)
function salutoAsync(name) {
// esegue operazioni asincrone, che risolvono o rigettano la promise.
return $q(function(resolve, reject) {
setTimeout(function() {
if (salutoOk(name)) {
resolve('Ciao, ' + name + '!');
} else {
reject('Salutare ' + name + ' non è permesso.');
}
}, 1000);
});
}

$q (2)
var promise = salutoAsync(‘Batman');
promise.then(function(greeting) {
alert('Successo: ' + greeting);
}, function(reason) {
alert('Fallito: ' + reason);
});

$http
● $http consente di effettuare chiamate Ajax al server e di gestire le risposte
in maniera molto semplice. Esso mette a disposizione un oggetto che fornisce i
metodi per invocare i corrispondenti metodi HTTP:
$http.get(url, [config]), $http.post(url, dati, [config]), $http.put(url, dati)
$http.delete(url, [config]) e $http.head(url, [config])
● I metodi del servizio $http restituiscono delle promise, cioè degli oggetti che
consentono di gestire in maniera strutturata l’esito di chiamate asincrone.

$http – login.html
<html>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<div ng-app="App" ng-controller="LoginController">
<form name="myform">
<input name="identity" id="identity" type="email" placeholder="Email" ng-model="container.identity" required />
<input name="password" id="password" placeholder="Password" ng-model="container.password" required />
<div class="field">
<p class="control">
<button id="loginButton" ng-click="sendData()">
Accedi
</button>
</p>
</div>
</form>
</div>
</body>
</html>

$http - login.js (1)
var App = angular.module('App',[]);
App.factory('LoginService', ['$http', function ($http) {
var LoginService = {};
LoginService.login = function (postObject) {
return $http.post("http://myserver/api/login", postObject );
};
return LoginService;
}]);

//Inizializzo il controller includendo il servizio di login
App.controller('LoginController', function ($scope, LoginService) {
// Inizializzo lo scope cioè le credenziali di login
$scope.container = {
identity: "",
password: "”
};
...

$http -login.js (3)
//Validazione della login
$scope.sendData = function () {
if (!$scope.myform.$valid) {
$scope.myform.$submitted = true;
alert("form invalid");
return;
}
….

//Chiamata del serivzio di login e gestione dell promise
LoginService.login($scope.container).then(function (response) {
if (response === null) {
alert('login failed');
return;
}
else {
if (response.status == 200) {
if (response.data.Status == 'success') {
alert('Login ok');
return;
}
alert(response.data.Message);
return;
}
}
}, function (error) {
});
} // Fine send data
}); // Fine controller

$http - Server C# (1)
public class LoginController : ApiController
{
// POST: api/Default
public HttpResponseMessage Post([FromBody]LoginRequest loginRequest)
{
LoginReponse loginReponse = new LoginReponse();
loginReponse.Status = "Failed";
loginReponse.Message = "User not found";
const string username = "b.ferrari@gmail.com";
const string password = "123456";
if (loginRequest.Identity.Equals(username) && loginRequest.Password.Equals(password) )
{
loginReponse.Status = "Success";
loginReponse.Message = "OK";
}
return ToJson(loginReponse);
}
protected HttpResponseMessage ToJson(dynamic obj)
{
var response = Request.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(JsonConvert.SerializeObject(obj), Encoding.UTF8, "application/json");
return response;
}
}

$http - Server C# (2)
public class LoginReponse
{
public string Status { get; set; }
public string Message { get; set; }
}
public class LoginRequest
{
public string Identity { get; set; }
public string Password { get; set; }
}

Corso angular js componenti

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Ähnlich wie Corso angular js componenti

Ähnlich wie Corso angular js componenti (20)

Mehr von Beniamino Ferrari

Mehr von Beniamino Ferrari (12)

Corso angular js componenti