O Google, há algum tempo, lançou para nós, desenvolvedores front-end o Angular-Js, disponível em http://angularjs.org/.
Mas o que vem a ser o AngularJs. É um framework JavaScript super-heróico, como ele mesmo descreve, para realizar principalmente a iteração entre dados e UI sem o programador ter que ficar lidando com o DOM. Tá, ele faz muito mais que isto, mas comecemos pensando nele assim.
Então, vamos ao trabalho.
Primeiro vamos baixar a última versão do AngularJs acessando o site dele, de preferência a versão de descomprimida, para que alguns problemas possamos entender melhor acessando o debug JavaScript do navegador.
Para começar a nossa aplicação, precisamos dizer para o Angular, a partir de qual tag ele irá controlar, e para isto utilizamos o atributo ng-app. Eu tenho a preferência de colocar este atributo na tag body, afinal, deixo sempre ele controlar a minha aplicação inteira.
Se você necessita que a sua aplicação funcione no IE7, é necessário colocar o id da tag também como ng-app.
Exemplo:
<html>
<head>
...
</head>
<body ng-app id="ng-app">
...
</body>
</html> Após fazer o apontamento da aplicação, necessitamos criar pelo menos um controller e apontar o que este controles irá controlar.
E o controller, o que é? Pra que serve?
O controller é o responsável por interceptar as ações ocorridas na UI e fazer as interações necessárias, inclusive a comunicação com o back-end. Para criar um controller, basta criar uma função javascript que aceite como parâmetros os módulos que serão utilizados. O que são módulos será apresentado mais pra frente, por enquanto basta saber que adicionaremos 3 módulos:
- $scope
- Responsável por expor o escopo do controller que será utilizado na UI.
- $http
- Fornece funções para chamadas Ajax de forma facilitada.
- $window
- Uma variável que aponta para o objeto Window do DOM.
function meuLogin($scope, $http, $window){
}
Então vamos supor que eu possuo um div e dentro deste div estão os elementos de login e preciso controlar tudo o que acontece no login, posso então utilizar este div como base do meu controler colocando nele o atributo ng-controller e no valor, colocar o nome do controller que criamos.
Exemplo:
<html>
<head>
...
</head>
<body ng-app id="ng-app">
<div ng-controller="meuLogin" >
...
</div>
</body>
</html>
A partir de então podemos começar a definir o que a view (UI) terá.
Mas antes eu dou uma dica, o Angular tem inteligência para detectar o nome dos argumentos da função do controller e automaticamente injetar os módulos correspondentes, mas quando ocorre o processo de minificação, estes nomes são substituídos, então por padrão, eu sempre realizo a injeção dos módulos que seram utilizados e o Angular não terá problema com isto, alias, fazendo a injeção, eu posso utilizar o nome que eu quiser nos argumentos do controller.
Exemplo:
function meuLogin(ng, ajax, window){
}
meuLogin.$inject = ['$scope', '$http', '$window'];
Onde o ng é $scope, ajax é $http e window é $window.
Definindo a view no Html, para tal vamos colocar um input text, para o login, um input password para a senha e um button. Vou também especificar nos controles a relação com os objetos do $scope, inclusive a ação ao clicar no botão, e para isto são utilizados atributos específicos do angular, ou como são chamados no angular, diretivas, que no nosso caso serão ng-model e ng_click. Logo após, definirei os objetos e comportamentos no controller.
Exemplo:
HTML
<html>
<head>
...
</head>
<body ng-app id="ng-app">
<div ng-controller="meuLogin" >
Login:<br />
<input type=”text” ng-model="usuario.login" /><br />
Senha:<br />
<input type=”password” ng-model="usuario.senha" /><br />
<button type=”button” ng-click="logar();">Entrar</button><br/>
< </div>
</body>
</html>JavaScript
function meuLogin(ng, ajax, window){
function iniciar(){
ng.usuario = {"login":"", "senha":""};
}
iniciar();
ng.logar = function(){
alert("O usuário " + this.usuario.login + " está tentando entrar no sistema!");
};
}
meuLogin.$inject = ['$scope', '$http', '$window'];
