Olá, pessoal!
Neste post mostrarei como instanciar um controller para sua aplicação em AngularJS.
Se você ainda não sabe como iniciar com o AngularJS basta acessar AQUI.
Pois bem, vamos direto ao ponto, mas antes é preciso relembrar. Nosso documento html de exemplo era o seguinte:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aprendendo AngularJS</title>
<script type="text/javascript" src="[CAMINHO ATÉ O ARQUIVO]/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
</head>
<body ng-app="meuApp">
<h1>Primeira aplicação com AngularJS</h1>
</body>
</html>
Antes de começarmos a trabalhar no nosso Controller, precisamos definir onde ele atuará.
Sendo assim podemos criar um div qualquer (dentro da tag body, claro) e admitir que o Controller trabalhará dentro desta div. Vejamos:
<div ng-controller="meuController">
</div>
Agora vamos instanciar nosso Controller:
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('meuController', function(){
//do something
});
</script>
Perfeito! Nosso controller está criado e pronto para ser utilizado da forma mais mirabolante que queiramos.
Ok Ser Programador, mas e agora?
Vamos fazer um teste simples de funcionamento (escrever algo na página) para provar que o Framework realmente funciona.
Faça a injeção do escopo do AngularJS ($scope) através do parâmetro da função de callback da instância do seu controller, e logo após instancie uma variável para este escopo dentro da função do seu controller. Tudo da seguinte forma:
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('meuController', function($scope){
$scope.teste = 'Funcionou!! =)';
});
</script>
$scope é o objeto que trabalha os dados da sua aplicação. Ele trabalha diretamente com o "model".
É através do $scope que você sempre trabalhará suas variáveis dentro do Angular. Variáveis instanciadas fora do escopo simplesmente serão ignoradas pelos processos do Angular em si, porém você pode trabalhar variáveis javascript normalmente dentro do controller.
Falta apenas dizer para o Angular onde "printar" o que armazenamos na variável teste.
O comando de escrita do Angular é simples. Basta encapsular por chaves duplas o nome da variável instanciada no controller:
<div ng-controller="meuController">
{{teste}}
</div>
Vejamos como ficou o documento completo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Aprendendo AngularJS</title>
<script type="text/javascript" src="[CAMINHO ATÉ O ARQUIVO]/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('meuController', function($scope){
$scope.teste = 'Funcionou!! =)';
});
</script>
</head>
<body ng-app="meuApp">
<h1>Primeira aplicação com AngularJS</h1>
<div ng-controller="meuController">
{{teste}}
</div>
</body>
</html>
Se você fez tudo correto, seu documento deve apresentar algo parecido com isto:
