E aí pessoal, beleza?

Vamos falar um pouco sobre AngularJS?

Para quem não conhece ele é um framework JavaScript, com base no modelo de arquitetura Model View Whatever (MVW). Nasceu dentro do Google em meados de 2009, mais precisamente pelas mãos de Misko Hevery, ta aí o twitter dele @mhevery.

Quando comecei a estudá-lo, uma das features que me chamou bastante a atenção foi o Two-way Data BindingMas o que é esse tal de Two-way Data Binding? Ele é quem faz boa parte da mágica, já que é o responsável pela sincronização dos dados entre os controladores (Model) e os componentes de visão (View).

Mas agora chega de história e bora espiar como ele funciona, o exemplo abaixo pode ser visto rodando aqui:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html ng-app>
  <head>
   <meta charset="utf-8">	
  </head>

  <body>
    <input type="text" ng-model="nome" placeholder="Diz teu nome aí">
    <h1>Eita , olha o two-way data binding funcionando!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  </body>
</html>

Primeira coisa que precisamos informar para o angular é a diretiva ng-app, ela é usada para dizer qual o elemento raiz da aplicação, no nosso caso, a tag html.

O segundo detalhe é a diretiva ng-model, que tem a responsabilidade de fazer o binding _da _view com o model.

E por último, mas não menos importante, é o uso da expressão {{nome}}. Nesse caso ela irá imprimir o valor da variável nome, que foi definida na diretira ng-model

E aí, simples não é mesmo?

O site oficial tem uma documentação muito boa, o tutorial disponibilizado por eles não faz somente o feijão com arroz e permite um tour em muitas features para mostrar o poder que o framework tem. Agora que você tem uma ideia do que o angular é capaz, eu recomendo que dê uma espiada lá.

E para fechar, uma informação muito importante, há uma nova versão sendo desenvolvida, o Angular 2.0.

Abraços e até a próxima!