Front End

25 fev, 2014

Série AngularJS – Usando Locale no AngularJS – Parte 04

100 visualizações
Publicidade

Olá, pessoal! No artigo de hoje vamos ver como dar suporte à formatação suportando o locale de um país. É muito simples fazer isso como AngularJS.

No GitHub do AngularJS  temos vários locales já disponíveis. Então, vamos dizer que precisamos formatar um valor para suportar a nossa moeda. Por default, o angularJS suporta o locale em_US. Para outras formatações é preciso adicionarmos .js específico 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 artigos, vou ignorar toda parte de setup básico do Angular.

1º passo

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>

2º passo

Crie um arquivo locale.html:

<body>
<input type="text" ng-model="valor"/> <p/>
Default currency {{valor | currency : "quot;}} <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.

3º passo

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"})
		
});

4º passo

Vamos agora testar a aplicação. Criei um projeto jee e vou subir usando o tomcat.

angularjslocaleresult

Simples, não?

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

Abraço!