Académique Documents
Professionnel Documents
Culture Documents
Ver texto
Explicao
(Reportar problema na explicao)
Download
Segue o link do projeto utilizado nessa aula: Introduo AngularJS
Introduo ao AngularJS
Quando desenvolvemos no server-side, organizamos nosso cdigo em
camadas para facilitar a manuteno, o reaproveitamento e a
legibilidade de nosso cdigo. Inclusive tornamos nosso cdigo
testvel atravs de testes automatizados.
Cdigo no client-side
Muitas vezes o mesmo desenvolvedor que segue essa srie de
prticas acaba deixando-as de lado quando codifica no client-side.
Mesmo aqueles que procuram organizar melhor seu cdigo acabam
criando solues caseiras que nem sempre so bem documentadas.
Baixando o AngularJS
possvel baixar um arquivo ZIP com todos os mdulos do Angular
em seu prprio site (http://www.angularjs.org). Usaremos alguns deles
durante o treinamento.
<script src="js/angular.min.js"></script>
</body>
</html>
Definio de Model
Vamos encarar a varivel da nossa Angular Expression como
nosso model. O Angular no rgido a esse aspecto, e qualquer tipo
do JavaScript pode ser o modelo. Se estamos trabalhando com MVC,
quem o responsvel em disponibilizar o model para view?
O controller!
function HelloController() {
}
O objeto $scope
Quando a pgina for carregada, Angular se encarregar de instanciar
nosso controller sem termos que nos preocupar com isso. S no
podemos esquecer de import-lo em nosso pgina:
<script src="js/HelloController.js"></script>
function HelloController($scope) {
}
function HelloController($scope) {
$scope.total = 0;
}
A diretiva ng-click
Falta implementar nosso boto. Queremos chamar a funo que
incrementar a varivel total toda vez que nosso boto for clicado.
Para isso existe a diretiva ng-click:
<button ng-click="incrementar()">Clicar</button>
function HelloController($scope) {
$scope.total = 0;
$scope.incrementar = function() {
$scope.total++;
};
}
Visualizando mais uma vez, percebemos que cada clique altera nosso
model. E o mais fantstico: nossa view atualizada sem nossa
interveno.
Angular sabe quando o model modificado e atualiza a view com
base nesse novo valor. Podemos resumir este processo utilizando o
termo data binding, a associao entre a view e o model.
algo muito diferente de quando trabalhamos manipulando o DOM
com jQuery, no qual, alm de atualizar nosso model, somos os
responsveis ao sincroniz-lo com a view.
Nossa view completa:
<!-- hello/index.html -->
<!doctype html>
<html lang="pt" ng-app>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body ng-controller="HelloController">
<button ng-click="incrementar()">Clicar</button>
<label>Voc clicou: {{total}} veze(s)</label>
<script src="js/angular.min.js"></script>
<script src="js/HelloController.js"></script>
</body>
</html>