Front-end
Hello World em Angular JS
9 de maio de 2014.Hoje, começo a escrever uma série de artigos sobre o Angular JS. O popular framework Javascript open-source, mantido pelo Google, que auxilia na execução de single-page applications. O framework adapta e estende o HTML tradicional para uma melhor experiência com conteúdo dinâmico, com a ligação direta e bidirecional dos dados (two-way data-binding) que permite sincronização automática de models e views. Como resultado, AngularJS abstrai a manipulação do DOM e melhora os testes.
Principais interesses do Angular JS:
- Abstrair a manipulação do DOM da lógica do aplicativo. Isto melhora os testes do código.
- Considera os testes do aplicativo tão importantes quanto seu desenvolvimento. A dificuldade do teste é diretamente afetada pela maneira como o código é estruturado.
- Abstrai o acoplamento entre o lado cliente e o lado servidor da aplicação. Isto permite que o desenvolvimento do aplicativo evolua em ambos os lados, de forma paralela, e permite o reuso de código.
- Guiar os desenvolvedores através da construção de todo o aplicativo: desde o Design de Interface, passando pela escrita das regras de negócio, até chegar aos testes da aplicação.
- Angular JS segue o padrão MVC da engenharia de Software e encoraja o baixo acoplamento entre apresentação, dados e componentes lógicos. Usando injeção de dependência, Angular trás serviços comumente designados ao lado servidor da aplicação, como controllers para os componentes visuais, para o lado cliente da aplicação. Consequentemente, o peso do backend é radicalmente reduzido, levando à aplicações muito mais leves.
Agora, vamos implementar nosso Hello World para ver seu funcionamento do Angular JS na prática:
<html ng-app>
<head>
<title>Hello World com Angular JS</title>
<script src="js/libs/angular-1.0.1.min.js"></script>
</head>
<body>
<!-- O model "nome" está definido no campo texto
abaixo com o atributo "ng-model" -->
<input type="text" ng-model="nome" placeholder="Digite seu nome">
<!-- Para imprimir o valor do model "nome" basta
fazer a referencia com {{ nome }} no HTML -->
<p>Olá {{ nome }} !</p>
</body>
<html>Para executar o código acima basta ter a versão do Angular JS no path indicado na linha 04 e a declarativa de Angular Application ng-app na tag HTML. Veja este código em funcionamento no JSFiddle.
No próximo post faremos uma aplicação com CRUD em Angular JS, até lá.