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!!!
Camilo,
Testando esse seu código com o angular 1.24, o mesmo apresentou um erro de [$injector:modulerr]. Inicialmente achei que tinha feito algo de errado, porém depois de conferir o código inteiro e percebi que o código estava igual ao seu. Joguei no google esse erro e encontrei a resposta. Estava faltando colocar e [‘ngRoute’] no angular.module(“myapp”,[]);
Seria interessante colocar essa observação nesse post.
Parabéns! Gostei muito!
very good