AngularJS Introduzione
AngularJS è un framework JavaScript. Può essere aggiunto alle pagine HTML tramite tag <script>.
AngularJS di direttiva estende l'HTML, e attraverso le espressioni dei dati si legano in formato HTML.
AngularJS è un framework JavaScript
AngularJS è un framework JavaScript. Si tratta di una libreria scritta in JavaScript.
file di AngularJS JavaScript è una forma di rilascio può essere aggiunto il tag script alla pagina:
 | Proponiamo script sul fondo dell'elemento <body>. Questo aumenterà la velocità di caricamento pagina HTML perché non è soggetta a caricare script per caricare. |
|---|
Ogni versione angular.js scaricare: https://github.com/angular/angular.js/releases
AngularJS estende HTML
AngularJS da NG direttive estese HTML.
direttiva ng-app definisce un'applicazione AngularJS.
ng-modello di comando i valori degli elementi (come il valore del campo di ingresso) legati all'applicazione.
comando ng-bind per associare i dati delle applicazioni di visualizzazione HTML.
AngularJS esempi
<HTML>
<Head>
<META charset = "utf-8 ">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>
<Div ng-app = "" >
<P> Nome: <input type = "text" modello ng = "nome"> </ p>
<H1> Ciao {{nome} } </ h1>
</ Div>
</ Corpo>
</ Html>
Prova »
Esempi di spiegare:
Quando la pagina viene caricata, AngularJS automaticamente.
direttiva ng-app dice AngularJS, <div> elemento è l'applicazione AngularJS del "proprietario".
direttiva ng-modello associa il valore del campo di input per il nome della variabile dell'applicazione.
comando ng-bind ad un nome di variabile di applicazione è legato a un paragrafo innerHTML.
| Se si rimuove la direttiva ng-app, HTML verrà visualizzato direttamente alla espressione, non per valutare l'espressione dei risultati. |
|---|
Che cosa è AngularJS?
AngularJS rende lo sviluppo della moderna applicazione di una singola pagina (ZPS: singola pagina applicazioni) più facile.
- AngularJS dati delle applicazioni si legano agli elementi HTML.
- AngularJS elementi HTML possono essere clonati e ripetere.
- AngularJS possono nascondere e mostrare elementi HTML.
- AngularJS possono aggiungere il codice per l'elemento HTML "dietro".
- AngularJS supportano convalida dell'input.
AngularJS direttive
Come si può vedere, AngularJS istruzione è prefisso attributi HTML ng.
comando ng-init per inizializzare le variabili di applicazione AngularJS.
AngularJS esempi
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
Prova »
| HTML5 consente di estendere la (fatta in casa) di proprietà di data- inizio. AngularJS proprietà inizio ng- a, ma è possibile utilizzare i dati-ng- per rendere le pagine web per HTML5 valido. |
|---|
Con HTML5 validi:
AngularJS esempi
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
Prova »
AngularJS espressione
AngularJS espressioni scritte tra parentesi graffe: {{espressione}}.
AngularJS espressione di associare i dati in formato HTML, che il comando ng-bind ha lo stesso scopo.
AngularJS espressione nei dati di posizione scritta "Uscita".
AngularJS espressioni come espressioni JavaScript: possono contenere testo, operatori, e le variabili.
Esempi 5 + 5 {{}} o {{firstName + "" + lastName}}
AngularJS esempi
<HTML>
<Head>
<META charset = "utf-8">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>
<Div ng-app = "">
<P> La mia prima espressione: {{5 + 5}} </ p>
</ Div>
</ Corpo>
</ Html>
Prova »
AngularJS Applicazioni
AngularJS modulo (Module) definisce le applicazioni AngularJS.
AngularJS Controllers (Controller) per il controllo delle applicazioni AngularJS.
direttiva ng-app definisce l'applicazione, ng-controllore definisce il controller.
AngularJS esempi
Nome: <input type = "text" modello ng = "firstName"> <br>
Cognome: <input type = "text" modello ng = "Cognome"> <br>
<br>
Nome: {{firstName + "" + lastName}}
</ Div>
<Script>
var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ portata) {
$ Scope.firstName = "John";
$ Scope.lastName = "Rossi";
});
</ Script>
Prova »
AngularJS definizione modulo applicativo:
AngularJS modulo
AngularJS applicazioni del controller:
AngularJS Controller
$ Scope.firstName = "John";
$ Scope.lastName = "Rossi";
});
Nel prossimo tutorial imparerete più moduli di conoscenza e applicazione.