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. 

angularjslocaleresult

Simples, não?

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

Abraços, see ya!!!

3 comentários em “Série AngularJS Usando Locale no AngularJS”

  1. 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.

Deixe um comentário

O seu endereço de e-mail não será publicado.