Le direttive più usate in AngularJS illustrate in dettaglio.
ng-href
AngularJS dispone di una direttiva specifica per impedire che gli URL dinamici generino un errore 404.
La direttiva è ng-href:
<div ng-controller="TestCtrl">
<a ng-href="{{myURL}}">Link</a>
</div>
Il codice JavaScript:
var app = angular.module('MyApp', []);
app.controller('TestCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$timeout(function() {
$scope.myURL = 'http://site.test/';
}, 2000);
}]);
ng-bind
AngularJS dispone di una direttiva specifica per associare e quindi inserire un valore in un elemento.
Rispetto all'interpolazione, la direttiva ng-bind impedisce che i browser mostrino per un istante il valore nella sua forma non interpolata:
<div ng-controller="TestCtrl">
<p ng-bind="value"></p>
</div>
Il codice JavaScript:
var app = angular.module('MyApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
$scope.value = 'Test';
}]);
ng-if
AngularJS dispone di una direttiva specifica per inserire o meno elementi nel DOM.
La direttiva ng-if inserisce o meno un elemento nel DOM in base al risultato dell'espressione booleana passata:
<div ng-if="2 + 2 === 5">
Non viene inserito
</div>
<div ng-if="2 + 2 === 4">
Viene inserito
</div>
ng-class
AngularJS dispone di una direttiva specifica per associare dinamicamente le classi CSS ad un elemento.
La direttiva ng-class assegna una classe CSS in base al risultato dell'espressione booleana usata:
<div ng-controller="TestCtrl">
<div ng-class="{success: value > 5}" ng-if="value > 5">
You won!
</div>
<p><button type="button" ng-click="calculate()">Play</button></p>
<p>Number is: {{ value }}</p>
</div>
Il codice JavaScript:
var app = angular.module('MyApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
$scope.value = 0;
$scope.calculate = function() {
$scope.value = 0;
$scope.value = Math.floor((Math.random()*10)+1);
};
}]);
ng-src
AngularJS dispone di una direttiva specifica per evitare problemi durante il caricamento delle immagini dinamiche.
La direttiva ng-src non fa altro che elaborare il valore dinamico passato all'attributo src:
<div ng-controller="TestCtrl">
<img ng-src="{{imgSrc}}" alt="" />
</div>
Il codice JavaScript:
var app = angular.module('MyApp', []);
app.controller('TestCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$timeout(function() {
$scope.imgSrc = 'http://site.test/image.jpg';
}, 2000);
}]);
ng-submit
AngularJS dispone di una direttiva specifica per gestire l'invio dei form.
La direttiva ng-submit associa un metodo del controller all'evento submit:
<form ng-submit="submit()" ng-controller="FormCtrl">
<input type="text" ng-model="person.name" name="person.name" />
<input type="submit" name="person.name" value="Submit" />
<code>people={{people}}</code>
<ul ng-repeat="(index, object) in people">
<li>{{ object.name }}</li>
</ul>
</form>
Il codice JavaScript:
var app = angular.module('MyApp', []);
app.controller('FormCtrl', ['$scope', function($scope) {
$scope.person = {
name: null
};
$scope.people = [];
$scope.submit = function() {
if ($scope.person.name) {
$scope.people.push({name: $scope.person.name});
$scope.person.name = '';
}
};
}]);
ng-readonly
AngularJS dispone di una direttiva specifica per impostare in sola lettura i campi dei form.
La direttiva ng-readonly imposta l'attributo readonly dei campi dei form in base all'espressione booleana passata:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="angular.js"></script>
</head>
<body>
Read-only: <input type="checkbox" ng-model="readOnly"><br/>
<input type="text" ng-readonly="readOnly" value="Some text here"/>
<script>
angular.module('MyApp', []);
</script>
</body>
</html>
ng-selected
AngularJS dispone di una direttiva specifica per gestire le opzioni selezionate in una select box.
La direttiva ng-selected imposta l'attributo selected di un elemento option in base all'espressione booleana passata:
<!DOCTYCPE html>
<html ng-app="MyApp">
<head>
<script src="angular.js"></script>
</head>
<body>
<label>Select Two:</label>
<input type="checkbox"
ng-model="isTwo"><br/>
<select>
<option>One</option>
<option ng-selected="isTwo">Two</option>
</select>
<script>
angular.module('MyApp', []);
</script>
</body>
</html>
ng-switch
Come suggerisce il suo nome, questa direttiva di AngularJS implementa un costrutto comune a molti linguaggi di programmazione.
Per prima cosa implementiamo un controller con le nostre opzioni:
var app = angular.module('MyApp', []);
app.controller('ChoiceCtrl', ['$scope', function($scope) {
$scope.chosenLanguage = '';
$scope.languages = ['JavaScript', 'PHP'];
}]);
Quindi usiamo ng-switch:
<body ng-app="MyApp">
<div ng-controller="ChoiceCtrl">
<p>
<select name="choice" class="form-control" ng-model="chosenLanguage" ng-options="language for language in languages">
<option value="">Choose a language</option>
</select>
</p>
<div class="switch-container" ng-switch on="chosenLanguage">
<p ng-switch-when="JavaScript">AngularJS, jQuery</p>
<p ng-switch-when="PHP">Zend Framework, Symphony</p>
<p ng-switch-default>Choose a language</p>
</div>
</div>
</body>
Quando l'utente seleziona un linguaggio viene mostrato l'elemento con il testo corrispondente. Usando un approccio tradizionale avremmo avuto:
var select = document.querySelector( "select[name=choice]" );
var container = document.querySelector( ".switch-container" );
select.addEventListener( "change", function() {
var value = this.value;
var msg = "";
switch( value ) {
case "JavaScript":
msg = "AngularJS, jQuery";
break;
case "PHP":
msg = "Zend Framework, Symphony";
break;
default:
msg = "Choose a language";
break;
}
container.innerHTML = "<p>" + msg + "</p>";
}, false);
ng-show
Questa direttiva condizionale serve a mostrare un elemento delle view in base alla valutazione di un'espressione booleana.
Consideriamo questo controller:
var app = angular.module('MyApp', []);
app.controller('FormCtrl', ['$scope', function($scope) {
$scope.sentSuccess = false;
$scope.send = function() {
$scope.sentSuccess = false;
if($scope.sendForm.$valid) {
$scope.sentSuccess = true;
}
};
}]);
E questa view:
<body ng-app="MyApp">
<form name="sendForm" ng-submit="send()" novalidate>
<div class="bg-success text-success" ng-show="sentSuccess">Success!</div>
<!--...-->
</form>
</body>
In questo caso il messaggio viene mostrato se e solo se sentSuccess è true.
ng-pattern
AngularJS dispone di una direttiva specifica per gli elementi input che permette l'uso delle espressioni regolari sui valori dei form.
ng-pattern accetta come valore un'espressione regolare che verificherà la validità dei valori inseriti. Se ad esempio volessimo validare un form per l'inserimento della partita IVA e del codice fiscale:
<body ng-app="MyApp">
<form name="myForm" novalidate method="post" id="form" ng-controller="FormCtrl" ng-submit="send()">
<p class="bg-danger text-danger" ng-show="error">Dati non validi</p>
<p class="bg-success text-success" ng-show="success">Dati validi</p>
<p>
<input type="text" name="vat-number" class="form-control" placeholder="Partita IVA" ng-pattern="/^\d{11}$/" ng-model="formData.vatNumber" required />
</p>
<p>
<input type="text" name="tax-code" class="form-control" placeholder="Codice Fiscale" ng-pattern="/^[A-Z0-9]{16}$/" ng-model="formData.taxCode" required />
</p>
<p>
<input type="submit" class="btn btn-primary" value="Invia" />
</p>
</form>
</body>
Il primo pattern verifica che il valore sia lungo 11 caratteri e composto solo da numeri, mentre il secondo pattern verifica che il valore contenga almeno 16 caratteri e che contenga lettere maiuscole e numeri. Il codice JavaScript è il seguente:
var app = angular.module('MyApp', []);
app.controller('FormCtrl', ['$scope', function($scope) {
$scope.success = false;
$scope.error = false;
$scope.formData = {};
$scope.send = function() {
$scope.success = false;
$scope.error = false;
if($scope.myForm.$valid) {
$scope.success = true;
} else {
$scope.error = true;
}
};
}]);