Latest web development tutorials

AngularJS Applicazioni

Ora è il momento di creare una vera e propria AngularJS applicazioni Web sola pagina (pagina singola applicazione web, SPA) a.

AngularJS esempi di applicazione

Hai imparato abbastanza conoscenza circa AngularJS, è ora possibile iniziare a creare la vostra prima applicazione AngularJS:

Le mie note



Rimanendo Conteggio parole:100


Spiegare l'applicazione

AngularJS esempi

<HTML ng-app = "myNoteApp ">
<Head>
<META charset = "utf-8 ">
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-controllore = "myNoteCtrl ">

<H2> i miei appunti </ h2>

<P> <ng-modello textarea = "messaggio" cols = righe "40" = "10"> </ textarea> </ p>

<P>
<Pulsante ng-clic = "save ()"> Salva </ button>
<Pulsante ng-clic = "clear ()"> Cancella </ button>
</ P>

<P> Numero di caratteri a sinistra: <span ng-bind = "left ()"> </ span> </ p>

</ Div>

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

</ Corpo>
</ Html>

Prova »

File di applicazione "myNoteApp.js":

var app = angular.module ( "myNoteApp", []);

File di controllo "myNoteCtrl.js":

app.controller ( "myNoteCtrl", la funzione ($ portata) {
$ Scope.message = "";
$ Scope.left = function () {return 100 - $ scope.message.length;};
$ Scope.clear = function () {$ scope.message = "";};
$ Scope.save = function () {alert ( "nota salvata");};
});

<Html> elemento è l'applicazione AngularJS: NG-app = contenitore "myNoteApp":

<HTML ng-app = "myNoteApp ">

pagine <div> HTML nel controller: NG-controllore = "myNoteCtrl" scope:

<Div ng-controllore = "myNoteCtrl ">

direttiva ng-modello bind <textarea> al messaggio variabile di controllo:

<ng-modello Textarea = "message " cols = righe "40" = "10"> </ textarea>

Due ng-click evento chiama la funzione di controllo chiaro () e save ():

<Pulsante ng-clic = "save ()"> Salva </ button>
<Pulsante ng-clic = "clear ()"> Cancella </ button>

comando ng-bind per associare la funzione di regolazione di sinistra () per <span>, viene utilizzato per visualizzare i caratteri rimanenti:

Numero di caratteri a sinistra: <span ng -bind = "left ()"> </ span>

Applicazioni file di libreria necessari per eseguire dopo AngularJs carico:

<Script src = "myNoteApp.js"> </ script>
<Script src = "myNoteCtrl.js"> </ script>

AngularJS Application Architecture

Esempi di quanto sopra è una sola pagina completi AngularJS applicazioni Web (applicazioni web singola pagina, SPA).

<Html> elemento contiene applicazione AngularJS (ng-app =).

<Div> elemento definisce il campo di applicazione (ng controller =) AngularJS controller.

Le applicazioni possono essere realizzati in molti controllori.

Il file di applicazione (il mio ... App.js) definisce l'applicazione del codice del modello.

Uno o più file di controllori (la mia ... Ctrl.js) definisce il codice di controllo.

Sommario - Come funziona?

direttiva ng-app nell'elemento principale dell'applicazione.

Per le applicazioni una sola pagina web (applicazioni web singola pagina, SPA), applicazioni di root di solito <html> elemento.

Uno o più direttiva ng-controllore definisce il controller dell'applicazione. Ogni controller è dotato di HTML :: elementi della sua stessa definizione ambito.

AngularJS avviare automaticamente in caso HTML DOMContentLoaded. Se si trova direttiva ng-app, AngularJS modulo di istruzioni di carico, e ng-app come la radice della domanda da compilare.

applicazione Root può essere una piccola parte dell'intera pagina o pagine, se è una piccola parte sarà più veloce compilazione e l'esecuzione.