Série AngularJS: Hello World in few minutes

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

  1. Crie um simple project webapp pelo maven ou dynamic web Project (não é requerido, mas considerando que você seja um desenvolvedor Java);
  2. 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:

angularhelloresult

 

angularhelloresultdone

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.