framework js – Blog do Camilo

Série AngularJS Usando Filter

Olá Pessoal,

No post de hoje vamos ver como usar o recurso de filter que temos no angular. O projeto que usarei como exemplo é o recipeangularexample que usamos nos posts anteriores e está disponível no meu github.

Lets go…

Starting…

Lembra que no post anterior sobre Deep Linking criamos algumas páginas HTML vazias? A ideia é irmos colocando carne no esqueleto à medida que vamos evoluindo na nossa série.

Na documentação você encontra exemplos com Filter http://docs.angularjs.org/api/ng.filter:filter

Development

Para o nosso exemplo vamos ver o uppercase, portanto no upperfilter.html deixe assim:

<body> 

Enter your name:<input type="text" ng-model="name"></input> 

{{name | uppercase}} 

<br/> 

</body>

Suba a aplicação e acesse o teste:

Simples usar os filters no angular, não é? Aproveite e brinque um pouco com os demais.

Abraços, See ya!

Série AngularJS Usando Locale no AngularJS

Olá Pessoal,

No post de hoje vamos ver como dar suporte à formatação suportando o locale de um país. É muito simples fazer isso como AngularJS .

Lets go…

Starting…

No GitHub do AngularJS temos vários locale já disponíveis . Então vamos dizer que precisamos formatar um valor para suportar a nossa moeda. Por default o angularJS suporte o locale en_US. Para outras formatações é preciso adicionarmos .js especifico para o país. Baixe o .js https://github.com/angular/angular.js/tree/master/src/ngLocale referente ao país que deseja. Nesse caso vou usar o pt_br.js (angular-locale_pt-br.js). Baixe o arquivo no github do angular. Uma forma simples é copiar o código e criar um arquivo .js .

Desenvolvimento

Considerando que você já fez um Hello World com AngularJS e brincou com os outros posts aqui no blog, vou ignorar toda parte de setup básico do angular.

Step 1

Adicione o arquivo angular-locale_pt-br.js no seu arquivo index.html. Assim:

<head>

<meta charset=“UTF-8”>

<title>Insert title here</title>

<script src=“js/lib/angular.js”></script>

<script src=“js/app.js”></script>

<script src=“js/angular-locale_pt-br.js”></script>

</head>

<body>

<div ng-view>

</div>

</body>

Step 2

Crie um arquivo locale.html

<body>

<input type=“text” ng-model=“valor”/> <p/>

Default currency {{valor | currency : “$”}} <p/>

Real {{ valor | currency}}

</body>

Nada demais aqui, estamos apenas usando o recurso de filter sobre qual currency usar. Se não informamos nenhum, será usado a default do angularjs, mas se encontrar algum locale e for compatível com a do browser, será usado. Por exemplo, se tenho o browser em português e o js para o locale pt-Br, o default será no idioma português do Brasil.

Step 3

Usando rotas, vamos adicionar uma para locale. No meu arquivo app.js está assim:

var app = angular.module(“myapp”,[]);

//creating route

app.config(function($routeProvider,$httpProvider,$locationProvider){

       $routeProvider.

       when(“/”,{templateUrl:”home.html”}).

when(“/locale”,{templateUrl:”locale.html”})



});

Step 4

Vamos agora testar a aplicação.

Simples, não?

Vou ficando por aqui. Espero que tenham gostado dessa dica.

Abraços, see ya!!!

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

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.