Latest web development tutorials

AngularJS Controllers

AngularJS AngularJS aplicações do controlador de dados.

AngularJS controlador é objeto normal de JavaScript.


AngularJS Controllers

aplicação AngularJS é controlador.

directiva ng-controlador define o controlador de aplicação.

O controlador é um objeto JavaScript criado pelo construtor dos objetos JavaScript padrão.

AngularJS exemplos

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

Nome: <input type = "text" ng-model = "firstName"> <br>
Apelido: <input type = "text" ng-model = "Sobrenome"> <br>
<br>
Nome: {{firstName + "" + lastName}}

</ Div>

<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ escopo) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>

tente »

Análise de aplicações:

AngularJS aplicações definidas pelo ng-app. Os aplicativos executados em <div> dentro.

ng-controller = "myCtrl"? propriedade é uma instrução AngularJS. Ele é utilizado para definir um controlador.

função myCtrl é uma função JavaScript.

AngularJS usando o objeto $ escopo para chamar o controlador.

Nos AngularJS, $ escopo é uma aplicação como (variáveis ​​e funções que pertencem à aplicação).

Controlador $ escopo (equivalente ao âmbito de aplicação, a gama de controle) para salvar AngularJS Modelo (Modelo) objetos.

escopo do controlador criou duas propriedades (firstName e lastName).

ng-modelo campos de entrada directiva ligação com o controle atributo (firstName e lastName).


método de controlador

O exemplo acima ilustra um objeto controlador e nome lastName imóvel com os dois.

O controlador também pode ter métodos (funções e variáveis):

AngularJS exemplos

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

Nome: <input type = "text" ng-model = "firstName"> <br>
Apelido: <input type = "text" ng-model = "Sobrenome"> <br>
<br>
Nome: {{fullName ()}}

</ Div>

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

tente »

controlador de arquivo externo

Em aplicações de grande porte, o controlador é normalmente armazenado em um arquivo externo.

Basta colocar tag <script> Copie o código chamado personController.js arquivo externo pode ser:

AngularJS exemplos

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

Primeiro nome: <input type = " text" ng-model = "firstName"> <br>
Apelido: <input type = " text" ng-model = "Sobrenome"> <br>
<br>
Nome Completo: {{firstName + " " + lastName}}

</ Div>

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

tente »

outros exemplos

O exemplo a seguir cria um novo arquivo de controlador:

angular.module ( 'myApp', []). controlador ( 'namesCtrl', function ($ escopo) {
$ Scope.names = [
{Name: "Jani", país: 'Norway'},
{Name: "Hege", país: «Suécia»},
{Nome: 'Kai', país: 'Dinamarca'}
];
});

Salve o arquivo como namesController.js :

Em seguida, usando o controlador do arquivo do aplicativo:

AngularJS exemplos

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

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

</ Div>

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

tente »