Corso angular js base

AngularJS
Corso Base
AngularJS

Corso base AngularJS Beniamino Ferrari 2
Introduzione
● AngularJS è un framework lato client ideato per
applicazioni web che reinterpreta l’HTML.
● AngulaJS è un framework per scrivere applicazioni Single
Page (SPA). È solo uno dei molti framework JavaScript per lo
sviluppo di SPA, ma è ampiamente utilizzato, perché permette
un’architettura MVW (Model - View - Whatever).

Cos’è MVW?
● MVW vuol dire che il pattern architetturale può essere MVC o
MVVM
● MVC (Model - View - Controller) è ben noto da molto tempo ed
è il modello principale per lo sviluppo di codice lato server per
applicazioni web.
● MVVM è relativamente nuovo e si sta evolvendo con le
applicazioni per dispositivi mobili, ma è anche passato a SPA.

MVC con AngularJS (1)
● Per iniziare, il modello di progettazione MVC non è specifico di
AngularJS ma è usato in molti altri linguaggi di
programmazione.
● Tutto ciò che include il pattern di progettazione MVC sono:
– Model: non sono nient’altro che contenitori di dati
– View: sono la rappresentazione dei dati
– Controller: sono ciò che media i Model e View

<!DOCTYPE html>
<html ng-app>
<head>
<title>MVC</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="TextController">
<p>{{sampleText}}</p>
</body>
<script>
function TextController($scope) {
$scope.sampleText = 'This is a demo!';
}
</script>
</html>

● Nell’esempio precedente, il nostro testo è rappresentato dalla
variabile "sampleText".
● La variabile "sampleText" è il nostro Model
● Il controller, la funzione TextController, aggiorna la view
visualizzando i dati nella vista sostituendo "{{sampleText}}" con
il valore della variabile sampleText.
● Il controller gestisce la relazione tra il nostro model e la view
che corrisponde alla pagina l'HTML.

MVVM con AngularJS (1)
● In MVC se apportiamo modifiche nella vista non viene
aggiornato nel modello. Ma in AngularJS, abbiamo sentito
che esiste qualcosa chiamato binding a 2 vie e questo binding a
2 vie consente l’utlizzo del pattern MVVM.
● MVVM comprende fondamentalmente 3 cose:
– Model
– View
– View Model

● Il controller viene effettivamente sostituito dal View Model
nel modello di progettazione MVVM.
● View Model non è altro che una funzione che è responsabile del
mantenimento della relazione tra vista e modello, ma la
differenza è che, se aggiorniamo qualcosa in vista, viene
aggiornato anche nel modello, e se viene aggiornato il modello
viene aggiornata la vista, è ciò che viene chiamato 2-way
binding.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Number Divisor</title>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var app = angular.module('sampleApp', []);
app.controller("DivisionController",
function ($scope) {
$scope.data = { number: 0, divisor: 0, result: 0 };
$scope.divisionNeeded = function () {
$scope.data.result = $scope.data.number / $scope.data.divisor;
}
});
</script>
<form ng-app="sampleApp" ng-controller="DivisionController">
<label>Number :</label> <input name="number" ng-change="divisionNeeded()" ng-model="data.number">
<label>Number entered by User :</label> {{data.number}} <br>
<label>Divisor :</label> <input name="divisor" ng-change="divisionNeeded()" ng-model="data.divisor">
<label>Number entered by User :</label> {{data.divisor}} <br>
<label>Result :</label> {{data.result}}
</form>
</body>
</html>

● Il codice precedente contiene due input che prendono dividendo e
divisore. Il risultato della divisione viene visualizzato a lato
dell'etichetta "Result".
● Tutto ciò che viene inserito in questi due input viene visualizzato a
lato dell’input stesso.
● Ogni cambiamento degli input fa scattare una chiamata alla
funzione “divisionNeeded” dichiarata all’interno del controller.
● Questo codice mostra molto chiaramente il pattern di progettazione
MVVM in JavaScript.

NgBind (1)
● L'attributo ngBind sostituisce il contenuto dell'elemento HTML su cui
agisce con il valore di una determinata espressione e di aggiornare il
contenuto del testo quando il valore di tale espressione cambia.
● In genere, non si utilizza direttamente ngBind, ma si utilizza invece il doppio
markup ricurvo come {{expression}} che è simile ma meno dettagliato.
● È preferibile utilizzare ngBind invece di {{espressione}} se un modello viene
momentaneamente visualizzato dal browser nel suo stato grezzo prima che
AngularJS lo compili. ngBind rende i binding invisibili all'utente mentre la
pagina si sta caricando.

NgBind (2)
● Utilizzo:
<ANY
ng-bind="expression">
...
</ANY>

NgBind (3)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="controllerName">
<label>Enter Text <input type="text" ng-model="name" /> </label>
<br />
<b>Binded data:</b> <span ng-bind="name">
</span>
</div>
<script>
var app = angular.module("app", []);
app.controller('controllerName', ['$scope', function ($scope) {
$scope.name = 'Example';
}]);
</script>
</body>
</html>

!important (1)
● la keyword !important serve ad impostare una regola CSS
rispetto alle altre con cui è eventualmente in concorrenza.
Si supponga, ad esempio, di definire per due volte il colore del
testo del medesimo elemento (ad esempio un paragrafo).
● Secondo le regole comuni dei CSS (in base alla logica della
cascata) una seconda definizione di stile per lo stesso elemento
prevale sulla prima.

!important (2)
● p { color: #FF0000; }
p { color: #000000; }
la seconda regola prevale sulla prima, paragrafo nero
● p { color: #FF0000 !important; }
p { color: #000000; }
la prima prima prevale sulla seconda, paragrafo rosso

NgHide (1)
● La direttiva ngHide mostra o nasconde l'elemento HTML
dato in base all'espressione impostata.
● L'elemento è mostrato o nascosto rimuovendo o aggiungendo
la classe CSS ng-hide sull'elemento. La classe CSS .ng-hide è
predefinita in AngularJS e imposta lo stile di visualizzazione su
none (utilizzando un flag !important)

NgHide (2)

<div ng-hide="myValue" class="ng-hide"></div>

<div ng-hide="myValue"></div>

NgHide (3)
● Quando l'espressione ngHide restituisce un valore di verità, la
classe CSS di .ng-hide viene aggiunta all'attributo di classe
sull'elemento che lo fa diventare nascosto. Quando è falsa, la
classe CSS di .ng-hide viene rimossa dall'elemento che fa sì
che l'elemento non appaia nascosto.

NgHide(4)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="Demo">
<div class="row" ng-controller="myController">
<span class="col-md-3">
<span>Hide/Show</span> <input type="checkbox" ng-model="isChecked" />
</span>
<div class="col-md-9" ng-show="isChecked">
<input type="text" style="width:300px;" class="form-control" />
</div>
</div>
<script type="text/javascript">
var demo = angular.module("Demo", []);
demo.controller("myController", function ($scope) {
$scope.isChecked = true;
});
</script>
</body>
</html>

NgHide(5)
● Da default, la classe .ng-hide class è definita come:
display: none !important
● L’Overriding .ng-hide è possibile ridefinendo la classe css .ng-
hide

NgHide(6)
.ng-hide:not(.ng-hide-animate) {
/* Questo è un modo alternativo per nascondere un elemento*/
display: block!important;
position: absolute;
top: -9999px;
left: -9999px;
}

Ng-Show (1)
● La direttiva ngShow mostra o nasconde l'elemento HTML dato
in base all'espressione fornita all'attributo ngShow.
● L'elemento è mostrato o nascosto rimuovendo o aggiungendo
la classe CSS .ng-hide sull'elemento.

Ng-Show (2)

<div ng-show="myValue"></div>

<div ng-show="myValue" class="ng-hide"></div>

Ng-If (1)
●
La direttiva ng-if consente di visualizzare porzioni dell’interfaccia utente in base
ad una condizione booleana
<div ng-controller="userController">
<p>Nome: <input type="text" ng-model="utente.nome"></p>
<p>Cognome: <input type="text" ng-model="utente.cognome"></p>
<p ng-if="utente.nome || utente.cognome">{{saluta()}}</p>
</div>
il messaggio di saluto viene mostrato quando almeno il nome o il cognome è stato
inserito nella casella di testo.

ng-switch
● La direttiva ng-switch seleziona la porzione di interfaccia da visualizzare in base al confronto tra una
espressione di controllo ed un elenco di possibili valori
<p>Colore: <input type="text" ng-model="colore"></p>
<div ng-switch="colore">
<span ng-switch-when="rosso" style="color:red">{{colore}}</span>
<span ng-switch-when="verde" style="color:green">{{colore}}</span>
<span ng-switch-when="blu" style="color:blue">{{colore}}</span>
<span ng-switch-default style="color:black">{{colore}}</span>
</div>
Il codice definisce una casella di testo in cui è possibile inserire il nome di un colore. In base al valore inserito
dall’utente, il nome del colore viene visualizzato nel colore indicato, se questo è rosso, verde o blu, altrimenti
viene visualizzato in nero.

Ng-include (1)
● La direttiva ng-include in AngularJS consente di includere, nella
vista corrente, del codice HTML esterno cioè codice che si trova
in un altro file
● <div ng-include="'dati/documento.html'"></div>
● Il contenuto del file documento.html sarà caricato, interpretato
da Angular e iniettato nel <div>.

Ng-include (2)
● Nota: È importante sottolineare che il codice contenuto nel file
esterno viene interpretato da Angular prima di effettuare il rendering
sulla pagina. Questo vuol dire che il file esterno può a sua volta
contenere direttive Angular.
● Un’altro aspetto a cui prestare attenzione è la modalità con cui viene
indicato l’URL del file da caricare: il valore associato alla direttiva è
una stringa e deve essere racchiusa tra virgolette e tra apici. Cioè,
oltre alle virgolette che delimitano il valore dell’attributo ("...") vanno
specificati gli apici che indicano che si tratta di una stringa JavaScript
('...').

Ng-include (3)
● Come per qualsiasi direttiva, il valore associato può essere una qualsiasi
espressione. Possiamo ad esempio specificare il caricamento
condizionale di contenuti esterni tramite un’espressione come la seguente:
<p>Età: <input type="text" ng-model="utente.eta"></p>
<div ng-include="utente.eta >= 18? 'dati/docMaggiorenni.html' :
'dati/docMinorenni.html'"></div>
● Usando l’operatore ternario (?:) di JavaScript carichiamo dinamicamente il
documento opportuno in base all’età specificata dall’utente.

Ng-include (4)
● Possiamo anche indicare una funzione che restituisce la stringa
che rappresenta il documento da caricare:
<p>Età: <input type="text" ng-model="utente.eta"></p>
<div ng-include="caricaDocumento(utente.eta)"> </div>
● Naturalmente alla direttiva si applica la same origin policy, cioè
la restrizione per cui è possibile caricare soltanto documenti
esterni provenienti dallo stesso dominio dell’applicazione
corrente.

Ng-class (1)
● La direttiva ngClass consente di impostare dinamicamente le classi CSS su un elemento
HTML usando ad esso un'espressione.
● La direttiva opera in tre modi diversi, a seconda di quale dei tre tipi l'espressione valuta:
– Tipo1 Se l'espressione restituisce una stringa, la stringa deve essere uno o più nomi di classi
delimitati da spazio.
– Tipo2 Se l'espressione restituisce un oggetto, per ogni coppia chiave-valore, per ogni oggetto con
un valore true verrà utilizzata la chiave corrispondente come nome di classe.
– Tipo3 Se l'espressione valuta un array, ogni elemento dell'array deve essere una stringa come nel
tipo 1 o un oggetto come nel tipo 2. Ciò significa che è possibile combinare stringhe e oggetti in un
array per avere un maggiore controllo su cosa Appaiono le classi CSS. Vedere il codice qui sotto
per un esempio di questo.

Ng-class (2)
● Come attributo
<ANY
ng-class="expression">
...
</ANY>
● Come classe css
<ANY class="ng-class: expression;"> ... </ANY>

Ng-class (3)
<!DOCTYPE html>
<html>
<style>
.sky {
color:white;
background-color:lightblue;
padding:20px;
font-family:"Courier New";
}
.tomato {
background-color:coral;
padding:40px;
font-family:Verdana;
}
</style>
<body ng-app="">
<p>Choose a class:</p>
<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>
<div ng-class="home">
<h1>Welcome Home!</h1>
<p>I like it!</p>
</div>
</body>
</html>

Ng-Repeat (1)
● Una delle direttive più interessanti messe a disposizione da Angular è ng-
repeat. Questa direttiva consente di generare un elenco di elementi HTML a
partire da una collezione di dati. Supponiamo ad esempio di avere un array di
nomi:
$scope.elencoNomi = ["Gianni", "Beppe", "Carlo", "Luigi"];
● Possiamo visualizzare l’elenco dei nomi in una lista non ordinata sfruttando ng-
repeat nel seguente modo:
<ul>
<li ng-repeat="nome in elencoNomi">{{nome}}</li>
</ul>

Ng-Repeat (2)
● L’espressione associata alla direttiva fa riferimento all’elenco da
cui prelevare i valori da visualizzare (elencoNomi) e definisce
una variabile (nome) che rappresenta l’elemento corrente
dell’array.Il risultato è l’elenco dei nomi contenuti nell’array:
● Gianni
● Beppe
● Carlo
● Luigi

Ng-Repeat (3)
● Ng-Repeat è utilizzabile anche con array di oggetti:
$scope.persone = [
{ nome: "Andrea", cognome: "Rossi", citta: "Roma" },
{ nome: "Marco", cognome: "Verdi", citta: "Milano" },
{ nome: "Giovanni", cognome: "Neri", citta: "Napoli" },
{ nome: "Roberto", cognome: "Gialli", citta: "Palermo" }
];
E visualizzare le proprietà desiderate:
<ul>
<li ng-repeat="persona in persone">
{{persona.nome}} {{persona.cognome}}
</li>
</ul>

Ng-Repeat (4)
● La direttiva ng-repeat definisce per ciascun elemento generato una variabile di
scope $index che rappresenta l’indice corrente. Questa variabile può risultare utile
in determinate situazioni. Ad esempio, se vogliamo visualizzare un contatore a
fianco ai dati visualizzati possiamo procedere nel seguente modo:
<ul>
<li ng-repeat="persona in persone">
N. {{$index}} - {{persona.nome}} {{persona.cognome}}
</li>
</ul>
● L’indice parte naturalmente da zero.

Ng-Repeat (5)
● ng-repeat si presta bene per la creazione di tabelle anche complesse. Il seguente esempio mostra
come visualizzare l’elenco delle persone in forma tabellare:
<table>
<tr><th>Indice</th><th>Nome</th><th>Cognome</th><th>Città</th></tr>
<tr ng-repeat="persona in persone">
<td>{{$index}}</td>
<td>{{persona.nome}}</td>
<td>{{persona.cognome}}</td>
<td>{{persona.citta}}</td>
</tr>
</table>

Ng-Repeat (6)
●
Una sintassi speciale può essere utilizzata per iterare sulle proprietà di un oggetto. Ad
esempio, se vogliamo visualizzare proprietà e valore di un oggetto persona scriveremo
il seguente codice:
● $scope.persona = { nome: "Mario", cognome: "Rossi", citta: "Roma"};
<ul>
<li ng-repeat="(key, value) in persona">
Proprietà: {{key}}<br/>
Valore: {{value}}
</li>
</ul>

Ng-Options (1)
● L'attributo ngOptions può essere utilizzato per generare dinamicamente un
elenco di elementi <option> per l'elemento <select> utilizzando l'array o
l'oggetto ottenuto valutando l'espressione di ngOptions.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Ng-Options (2)
● In molti casi, ngRepeat può essere utilizzato sugli elementi
<option> invece di ngOptions per ottenere un risultato simile.
Tuttavia, ngOptions offre alcuni vantaggi:
– maggiore flessibilità nel modo in cui il modello <select> viene
assegnato tramite la selezione come parte dell'espressione di
comprensione
– consumo di memoria ridotto non creando un nuovo ambito per ogni
istanza ripetuta
– maggiore velocità di rendering creando le opzioni in un documento
Frammento anziché singolarmente

Ng-Options (3)
● Quando viene selezionato un elemento nel menu <select>,
l'elemento dell'array o la proprietà dell'oggetto rappresentata
dall'opzione selezionata sarà associata al modello identificato
dalla direttiva ngModel.
$scope.elencoCitta = ["Roma", "Milano", "Napoli", "Palermo"];
<select ng-model="selectedItem">
<option ng-repeat="citta in elencoCitta"
value="{{citta}}">{{citta}}</option>
</select>

Ng-Options (4)
●
In questo caso possiamo utilizzare un array di oggetti come mostrato di seguito:
$scope.elencoCitta = [
{codice: "RM", nome: "Roma"},
{codice: "MI", nome: "Milano"},
{codice: "NA", nome: "Napoli"},
{codice: "PA", nome:"Palermo"}
];
<select ng-model="selectedItem">
<option ng-repeat="citta in elencoCitta" value="{{citta.codice}}">{{citta.nome}}</option>
</select>
<p ng-if="selectedItem">Hai selezionato {{selectedItem}}!</p>
Può essere scritto molto più semplicemente con ng-option
<select ng-model="selectedItem"
ng-options="citta.nome for citta in elencoCitta">
</select>

Ng-Options (5)
● Un’altra interessante variante consente di raggruppare le voci della select. Per fare un esempio, supponiamo di avere il seguente array:
$scope.elencoCitta = [
{codice: "RM", nome: "Roma", regione: "Lazio"},
{codice: "LT", nome: "Latina", regione: "Lazio"},
{codice: "MI", nome: "Milano" regione: "Lombardia"},
{codice: "NA", nome: "Napoli" regione: "Campania"},
{codice: "CO", nome: "Como" regione: "Lombardia"},
{codice: "PA", nome:"Palermo", regione: "Sicilia"},
{codice: "CA", nome: "Caserta" regione: "Campania"},
{codice: "AV", nome: "Avellino" regione: "Campania"},
{codice: "TP", nome:"Trapani", regione: "Sicilia"},
{codice: "AG", nome:"Agrigento", regione: "Sicilia"}
];
ng-options="citta.nome group by citta.regione for citta in elencoCitta">
</select>

Ng-Options (6)

Ng-Options (7)
● ng-options abbiamo la possibilità di iterare sulle proprietà di un
oggetto. Pertanto, se abbiamo il seguente oggetto:
$scope.citta = {codice: "RM", nome: "Roma", regione: "Lazio"};
ng-options="value for (key, value) in citta">
</select>

Direttive di evento
●
AngularJS prevede una serie di direttive per gestire gli eventi di interazione dell’utente con l’interfaccia grafica.
Tra le più usate
– ng-click
– ng-dbl-click
– ng-mousedown
– ng-mouseup
– ng-mouseenter
– ng-mouseleave
– ng-mousemove
– ng-mouseover
– ng-keydown
– ng-keyup
– ng-keypress
– ng-change

ng-click
<div>
<input type="number" ng-model="numero1"/>
+
<input type="number" ng-model="numero2"/>
=
<input type="number" ng-model="risultato"/>
</div>
<button ng-click="risultato = numero1 + numero2">Somma</button>
In maniera equivalente
<button ng-click="somma()">Somma</button>
$scope.somma = function() {
$scope.risultato = $scope.numero1 + $scope.numero2;
}

ng-cloak
● la direttiva ng-cloak viene utilizzata per impedire che il model
venga visualizzato dal browser nel suo formato non formattato
(non compilato) al moento del caricamento.
● Questa direttiva viene utilizzata evitare l'effetto sfarfallio
indesiderato causato dalla visualizzazione del template html.

Corso angular js base

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (14)

Similar a Corso angular js base

Similar a Corso angular js base (20)

Más de Beniamino Ferrari

Más de Beniamino Ferrari (11)

Corso angular js base