Olá Pessoal,
O post de hoje é para quem está querendo começar a brincar com AngularJS e aqui vai um simples “Hello World” e vou deixar que o próprio exemplo prático fale pelo framework.
Lets go…
Na prática
- Crie um simple project webapp pelo maven ou dynamic web Project (não é requerido, mas considerando que você seja um desenvolvedor Java);
- 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? Show, né?
Esse é o AngularJS. Esse post 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
Abraços.