Olá, pessoal! Quem me acompanha no twitter tem visto meus posts nas últimas semanas falando do AngularJS e sabe que venho preparando uma série de artigos que já estão prontos para sair do forno, e daqui a pouco estão por aqui com a primeira temporada de série. Neste primeiro artigo queria compartilhar com vocês uma apresentação que fiz para um grupo de americanos sobre o framework, além de um hello world. A ideia é discutir e saber como está o framework da Google.
A apresentação eu disponibilizei no slideshare. Como não gosto de apresentação detalhada, ou seja, no modelo de um livro, há apenas tópicos e imagens. Mas a depender do quanto você está envolvido com o framework, vai ter uma noção do que discutimos.
No geral, essa apresentação foi para mostrar como o angularJS está dentro do mercado, já que é um framework novo, com apenas 2-3 anos de vida. A discussão foi muito boa e o framework apresentou ser, para médio e longo prazo, uma adoção bem natural para desenvolvimento web. Não quero adiantar esse assunto, pois é um dos artigos da série que vou publicar aqui, mas aqui vai uma parte:
- Curva de aprendizado: essa aqui é excelente. Com apenas alguns minutos você entende o que o framework faz e como usá-lo. É muito simples;
- Suporte a MVC: isso é sensacional. Se você implementar usando MVC percebe o ganho que tem ao ter isso do client-side. A manutenção é muito baixa – mas, de novo, isso não depende do angularJS e sim de quem está entre a cadeira e o computador.
- Boa documentação e comunidade ativa: isso é importante. Eu abri bugs, tirei dúvidas na thread de discussão do angularJS no github e, realmente, é uma comunidade bem ativa, e o team do angularJS, quando respondem, são bem claros e específicos. Gostei muito do envolvimento com eles.
- Suporte IE: Para as versões mais recentes do IE não teremos problema em usar o angularJS, mas versões antigas como IE8 ou inferior, alguns recursos não funcionam. Se você procurar, vai achar alguns “tricks” para fazer funcionar nessas versões bem antigas, mas a depender do que você está usando do angularJS, acaba não funcionando bem. Mas se você for na documentação do angularJS vai ver que eles não garantem suporte nas versões mais antigas do IE.
- Rápido desenvolvimento: É realmente produtivo desenvolver com angularJS. A facilidade e entendimento do código é algo sensacional, só programando para saber.
Atualmente estou trabalhando em um projeto e estamos usando o AngularJS e a experiência está sendo sensacional. Cada nova funcionalidade e integração que precisamos fazer é uma oportunidade de aprendizado. Quando comecei com o framework, senti falta de um grupo em português para discutir e ajudar outros desenvolvedores que estão querendo começar, mas se sentem perdido. É o AngularJS-Brazil Group. Além de postar assuntos técnicos aqui, estarei no grupo compartilhando links e “tricks” do dia a dia com os frameworks. Já comecei postando hotlinks para quem deseja começar e não sabe por onde. Em breve vou fazer um post sobre qual livro eu recomendo. Já li dois livros sobre o assunto e estou indo para o terceiro e nem tudo que reluz é ouro.
Mas, para hoje, vamos ficar com um Hello World. Vou deixar que o próprio exemplo prático fale pelo framework.
Hello World in few minutes
- Crie um simple project webapp pelo maven ou dynamic web Project;
- Em webapps crie um arquivo hello.html.
Escreva o seguinte código:
<!doctype html>
<!-- estamos dizendo ‘quero usar angularjs’ -->
<html ng-app>
<head>
<!-- definido a versão do angular que queremos -->
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!-- aqui criamos um js que terá as function -->
<script src="todo.js">
</script>
<title>Insert title here</title>
</head>
<body>
<!-- chamamos a funcao que está no .js -->
<div ng-controller="hello">
<!-- chamamos a variavel que declaramos no .js -->
Hello {{name}}
<hr />
<label>Name</label>
<input ng-model="typeName" placeHolder="type your name please" /> <br />
Hi {{typeName}}, <br />
<br/>
<br/>
<label>Quantity of product</label>
<input type="number" ng-model="qt" required="required" />
<label>Inform Price</label>
<input type="number" ng-model="price" required="required" />
Total {{qt *price | currency}}
</div>
</body>
</html>
Vamos entender um pouco melhor, apesar dos comentários. Quando fizermos ng-model, estamos declarando uma variável; e quando dizemos {{ expresion }}, estamos imprimindo o valor da variável. Se você já usou expression languague com JSF, por exemplo, é o mesmo conceito, porém com sintaxe diferente. Mas observe que quando fizemos Hello {{ name }} ele busca a variável que está na function hello() que criamos no .js. Veja:
function hello($scope){
$scope.name="world AngularJS \O/";
}
O .js você pode colocar na raiz de webapps, ou dentro de um subdiretório, desde que você informe no arquivo .html onde está o seu .js.
O resultado será algo assim:
Simples, né?!
Esse é o AngularJS. Esse artigo foi apenas uma pequena introdução prática sem entrar nos detalhes do framework. Para quem quiser estudar e se aprofundar, basta passar no http://angularjs.org/ e se divertir.
No meu Github há exemplos de projetos que tenho feito com angularJS: https://github.com/camilolopes/workspaceAngularJs
Bom, vou ficando por aqui e Welcome to AngularJS world! Vejo vocês na série do frameworks.
Abraços!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?