AngularJS è un framework JavaScript. Si può essere aggiunto a una pagina HTML con un tag <script>.
AngularJS estende attributi HTML con le direttive, e si lega i dati in HTML con le espressioni.
AngularJS è un framework JavaScript
AngularJS è un framework JavaScript. Si tratta di una libreria scritta in JavaScript.
AngularJS viene distribuito come un file JavaScript, e può essere aggiunto a una pagina web con un tag script:
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>AngularJS estende HTML
AngularJS estende HTML con NG-direttive.
La direttiva ng-app definisce un'applicazione AngularJS.
La direttiva ng modello associa il valore di controlli HTML (input, selezionare, textarea) per i dati delle applicazioni.
La direttiva ng-bind lega dati delle applicazioni alla visualizzazione HTML.
AngularJS Esempio
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Prova tu stesso " Esempio spiegato:
AngularJS si avvia automaticamente quando la pagina web è stata caricata.
La direttiva ng-app dice AngularJS che il <div> elemento è il "proprietario" di una applicazione AngularJS.
La direttiva ng modello associa il valore del campo di input per il nome della variabile dell'applicazione.
La direttiva ng-bind lega il innerHTML dell'elemento <p> per il nome della variabile dell'applicazione.
AngularJS direttive
Come si è già visto, AngularJS direttive sono attributi HTML con un prefisso ng.
La direttiva ng-init inizializza variabili di applicazione AngularJS.
AngularJS Esempio
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Prova tu stesso " In alternativa con HTML valido:
AngularJS Esempio
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Prova tu stesso "  | È possibile utilizzare i dati-ng-, invece di ng-, se si desidera rendere valida la vostra pagina HTML. |
|---|
Si impara molto di più su direttive più avanti in questo tutorial.
AngularJS Espressioni
AngularJS espressioni sono scritti all'interno di parentesi graffe doppie: {{espressione}}.
AngularJS saranno dati "uscita" esattamente dove l'espressione è scritto:
AngularJS Esempio
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Prova tu stesso " AngularJS espressioni legano i dati AngularJS in HTML allo stesso modo la direttiva ng-bind.
AngularJS Esempio
<!DOCTYPE html>
<html>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Prova tu stesso " Si impara di più sulle espressioni più avanti in questo tutorial.
AngularJS Applicazioni
AngularJS moduli definiscono applicazioni AngularJS.
AngularJS controllori controllano le applicazioni AngularJS.
La direttiva ng-app definisce l'applicazione, la direttiva ng-controllore definisce il controller.
AngularJS Esempio
<div ng-app=" myApp " ng-controller=" myCtrl ">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module(' myApp ', []);
app.controller(' myCtrl ',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
Prova tu stesso " AngularJS moduli definiscono applicazioni:
AngularJS Module
var app = angular.module('myApp', []);
AngularJS applicazioni di controllo controller:
AngularJS controller
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Si impara di più sui moduli e controller più avanti in questo tutorial.