Uma aplicação AngularJS utiliza controllers para controlar o fluxo de dados na aplicação. Um controller é definido utilizando a diretiva ng-controller. Um controller é um objeto JavaScript que contém atributos / propriedades e funções. Cada controller aceita $scope como um parâmetro que se refere à aplicação / módulo que é gerenciada pelo controller.
<div ng-app = "" ng-controller = "alunoController">...</div>
Aqui temos declarado um controller de alunoController usando a diretiva ng-controller. Como próximo passo, vamos definir o alunoController da seguinte forma:
<script>function alunoController($scope) {$scope.aluno = {nome: "Jack",sobrenome: "Bauer",nomeCompleto: function() {var alunoObject;alunoObject = $scope.aluno;return alunoObject.nome + " " + alunoObject.sobrenome;}};}</script>
- O alunoController é definido como um objeto JavaScript passando $scope como argumento.
- $scope liga a view ao alunoController.
- Nome e sobrenome são duas propriedades do objeto $scope.aluno. Nós passamos os valores padrão para eles.
- O nomeCompleto é a função do objeto $scope.aluno cuja tarefa é devolver o nome concatenado.
Agora podemos utilizar a propriedade aluno alunoController usando ng-model ou usar expressions como no exemplo a seguir:
Insira o nome: <input type = "text" ng-model = "aluno.nome"><br> Insira o sobrenome: <input type = "text" ng-model = "aluno.sobrenome"><br> <br> Inserindo: {{aluno.nomeCompleto()}}
Estamos pegando aluno.nome e aluno.sobrenome pelas input boxes.
Depois passamos aluno.nomeCompleto() para o HTML.
Agora, sempre que você digitar qualquer coisa no nome e no sobrenome, você pode ver o nome completo sendo atualizado automaticamente.
Exemplo:
Arquivo: test_angularjs.htm
<html> <head> <title>Angular JS Controller</title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h2>Exemplo Controller</h2> <div ng-app = "mainApp" ng-controller = "alunoController"> Insira o nome: <input type = "text" ng-model = "aluno.nome"><br><br> Insira o sobrenome: <input type = "text" ng-model = "aluno.sobrenome"><br> <br> Você está inserindo: {{aluno.nomeCompleto()}} </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('alunoController', function($scope) { $scope.aluno = { nome: "Jack", sobrenome: "Bauer", nomeCompleto: function() { var alunoObject; alunoObject = $scope.aluno; return alunoObject.nome + " " + alunoObject.sobrenome; } }; }); </script> </body> </html>
Saída:
Nenhum comentário:
Postar um comentário