Latest web development tutorials

AngularJS Controller

AngularJS AngularJS applicazioni di controllo dei dati.

AngularJS controller è normale oggetto JavaScript.


AngularJS Controller

applicazione AngularJS è regolatore.

direttiva ng-controllore definisce il controller dell'applicazione.

Il controller è un oggetto JavaScript creata dal costruttore degli oggetti JavaScript standard.

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "myCtrl">

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 »

Analisi di applicazione:

AngularJS applicazioni definite dal ng-app. Le applicazioni in esecuzione in <div> all'interno.

ng-controllore = "myCtrl"? proprietà è un'istruzione AngularJS. Viene utilizzato per definire un controllore.

Funzione myCtrl è una funzione JavaScript.

AngularJS utilizzando oggetto $ scopo di chiamare il controllore.

Nei AngularJS, $ ambito è un'applicazione simile (variabili e funzioni appartenenti alla domanda).

Controllore $ portata (equivalente al campo di applicazione, la gamma di controllo) per salvare AngularJS modello (Model) oggetti.

nell'ambito del controllore ha creato due proprietà (firstName e lastName).

ng-modello campi di input direttiva si legano al controller di attributo (firstName e lastName).


metodo di controllo

L'esempio sopra illustra un oggetto controller e proprietà Nome Cognome, con i due.

Il controller può anche avere metodi (funzioni e variabili):

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "personCtrl">

Nome: <input type = "text" modello ng = "firstName"> <br>
Cognome: <input type = "text" modello ng = "Cognome"> <br>
<Br>
Nome: {{fullName ()}}

</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ portata) {
$ Scope.firstName = "John";
$ Scope.lastName = "Rossi";
$ Scope.fullName = function () {
return $ scope.firstName + "" + $ scope.lastName;
}
});
</ Script>

Prova »

regolatore di file esterno

In applicazioni di grandi dimensioni, il controller è di solito memorizzato in un file esterno.

In poche parole tag <script> Copiare il nome in codice personController.js file esterno può essere:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "personCtrl">

Nome: <input type = " text" modello ng = "firstName"> <br>
Cognome: <input type = " text" modello ng = "Cognome"> <br>
<Br>
Nome completo: {{firstName + " " + lastName}}

</ Div>

<Script src = "personController.js"> </ script>

Prova »

Altri esempi

L'esempio seguente crea un nuovo file di controllo:

angular.module ( 'myApp', []). controllore ( 'namesCtrl', function ($ portata) {
$ Scope.names = [
{Nome: 'Jani', Paese: 'la Norvegia'},
{Nome: 'Hege', Paese: 'Sweden'},
{Nome: 'Kai', Paese: 'Danimarca'}
];
});

Salvare il file come namesController.js :

Quindi, utilizzando il controller nel file dell'applicazione:

AngularJS esempi

<Div ng-app = "myApp " ng-controllore = "namesCtrl">

<Ul>
<Li ng-repeat = "x nei nomi">
{{X.name + ',' + x.country}}
</ Li>
</ Ul>

</ Div>

<Script src = "namesController.js"> </ script>

Prova »