SérieAngularJS: Internacionalização com Angular-Translate

Olá Pessoal,

No post de hoje vou mostrar como suportar internacionalização para quem está usando AngularJS.

Lets go

O angularJS suporta internacionalização ?

Sim, mas com limitação, e muita até. Como, por exemplo, ele consegue suportar internacionalização para datas, números, mas não suporta internacionalização para o conteúdo da sua aplicação.

E o que faço?

Se você pesquisar na internet pode encontrar alguns frameworks  que ajudam na internacionalização. Eu pesquisei bastante e testei alguns, e o melhor foi esse aqui:

Angular-Translate

http://pascalprecht.github.io/angular-translate/#/guide

Github

https://github.com/PascalPrecht/angular-translate/wiki/Getting-Started#configuring-translateprovider

Pelo seguinte:

  • Fácil de usar;
  • Boa documentação;
  • Comunidade bem ativa;
  • Releases constantes;
  • Bug fixing curto;

O ponto negativo que adiciono é que o autor colocou o nome dele na declaração do uso da API. Acho isso ruim, ‘pascalprecht.translate’. Se a API vira e o Google adota, iai? Certamente eles vão tirar esse nome e deixar algo global. E a migração para o novo nome é fácil?

Outro ponto negativo é a forma de obter o arquivo .min.js É preciso instalar o bower e rodar

bower install angular-translate 

Por que não disponibilizar o .min.js on-line no próprio github?

Para quem usa JSF, por exemplo, está acostumado a ter um arquivo .properties que possui uma key:value  para tradução e o JSF se vira para saber o idioma do browser e faz o translate. Mas com AngularJS é um pouco diferente. Claro que não teremos um arquivo .properties, mas sim um arquivo .js que funciona da mesma forma key:value.

Na prática

Vou considerar que você já tem uma aplicação com Angular e agora quer apenas internacionalizar. Veja os steps:

Passo 1

O que achei ruim, apesar de ser rápido, é instalar o bower para obter o .min.js

Se você tiver o git bash, apenas digite

npm install -g bower 

Dúvida, veja aqui: https://github.com/bower/bower

Passo 2

Após ter instalado o bower vamos gerar o min.js do angular-translate  no git bash

bower install angular-translate

Aguarde terminar a instalação e veja onde está o .min.js Será algo assim:

Xxx\bower_components\angular-translate

Passo 3

Copie o arquivo angular-translate.min.js para o seu projeto. No meu caso eu tenho uma pasta lib somente para js, veja:

angularjsangulartranslatelib

Passo 4

Crie um arquivo que terá a internacionalização, ou seja, que terá o que você gostaria que fosse traduzido (eu chamei de inter.js). O conteúdo é bem simples, veja:

$app.config([‘$translateProvider’, function ($translateProvider) {

  $translateProvider.translations(‘en’, {

    ‘label.question.movie’: ‘What is your favorite movie?’,

    ‘label.title’: ‘Vote in Movie?’,   

  });

  $translateProvider.translations(‘pt’, {

    ‘label.question.movie’: ‘Qual filme você gosta mais?’,

    ‘label.title’: ‘Vote no Filme’   

  });

  $translateProvider.preferredLanguage(‘en’); //temos que dizer qual é a default.

}]);

Passo 5

Após ter criado o arquivo que contém as mensagens de tradução, precisamos dizer ao angular que vamos usar esse cara para isso. No arquivo js que você cria o module, vamos adicionar o translate (no meu caso é o arquivo application.js)

var $app = angular.module(‘app’,[‘ngResource’,’pascalprecht.translate’]);

Passo 6

No meu arquivo index.html preciso carregar o .js do angular-translate. Veja:

<body>

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

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

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

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

Outros codigos omitidos aqui

</body>

 Passo 7

Agora vamos chamar as keys que criamos no inter.js  no nosso arquivo .html . Temos várias opções, veja:

Usando Diretivas

<H2 translate=“label.title”></H2>

Usando expression

{{movie.name}}

Passo 8

Salve as alterações, build o projeto e suba.

angularjsvotenomovieapp

Um ponto importante: a tradução não vai ocorrer com base no idioma definido no browser e sim o que você setou como preferido. Infelizmente ainda não tem essa feature. Daí, para que o usuário queira ver aplicação no idioma dele, você terá que colocar algo como a bandeira do país na aplicação, e ao clicar o valor do preferred é alterado.  Na documentação tem um exemplo.

GitHub

https://github.com/camilolopes/workspaceAngularJs

Vou ficando por aqui. Caso queiram ver aplicação movie-vote usando API basta ir ao meu github e fazer clone ou download e executar

Abraços, see ya!!

Série AngularJS: Conheça Yeoman

olá Pessoal,

O post de hoje é bem rápido, o objetivo é mais apresentar um ferramenta muito bacana para desenvolvimento de web apps com JS. E mais especifico com AngularJS.

Lets go…

Yeoman

É uma ferramenta que permite criarmos projetos para web apps de maneira organizada, fácil e rápido. Para entender a utilidade do Yoeman é preciso tentar responder a pergunta: como você gera seu projeto angularJS hoje?

Sabemos que não há segredo em sair usando o angular, mas pense em desenvolver uma aplicação web que tende a ter vários arquivos, pastas etc. Se não temos uma estrutura bem organizada do projeto, certamente vamos ter problemas quando precisar encontrar alguma coisa ou até explicar para um novo desenvolvedor que acabou de chegar. O Yoeman tenta resolver isso. Claro que tem muitas outras features como estrutura de unit test, build etc. No Java seria algo como o maven. Tem um vídeo que acho fantástico e prático que compartilhei a seguir. Assitam e tirem suas próprias conclusões:

Em resumo o Yoeman juntou Bower + grunt

O bower (criado pelo Twitter): resolve problemas de dependências

grunt: é usado para build, preview e testar o projeto.

Apresentação sobre o Yoeman Confira aqui
Particularmente estou experimentando a ferramenta e tenho gostado.

Aproveitando, queria sua ajuda para responder uma simples pesquisa de 10 segundos. Qual curso você gostaria de ver no meu imasters pro em 2014? Responda aqui .  Obrigado pelo help. 🙂

Abracos. See ya!!

Série AngularJS: Aprendendo usar Deep Linking ou Rotas

Olá Pessoal,

No post de hoje vamos conhecer o recurso de deep linking do Angular, conhecido também como Rotas.

Lets go…

 

Deep Linking ou Rotas

É uma funcionalidade que temos no Angular e é muito útil durante o dia a dia. Na prática funciona assim:

O que acontece quando chamar /create? Quero que carregue o arquivo createform.html e o controller createController.js . Pronto, é isso que fazemos com as Rotas. E qual a vantagem disso?

  • Fácil Manutenção;
  • Tudo em uma página.

Na Prática

Vamos ver metendo mão na massa o que é melhor. Vou usar um projeto que está no meu GitHub chamado de recipeangularjsexample. Não há nada de Java nesse projeto. Considerando que você já sabe como configurar um projeto com AngularJS, então vou pular a parte de setup. Caso tenha dúvida, veja os posts iniciais da série.

Criando arquivo app.js

No arquivo app.js que deixei na raiz do projeto deixe assim:

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

//creating route

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

       $routeProvider.

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

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

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

       when(“/watch”,{templateUrl:”watch.html”,controller:recipeController});      

});

É muito simples a leitura:

“quando chamar upper, carregue o conteúdo do arquivo upperfilter.html. Mas quando chamar watch, carregue o conteúdo watch.html e o controller recipeController”

Note: No exemplo acima não necessariamente os arquivos de outras rotas precise existir, meu objetivo foi mostrar como funciona e para que você entenda melhor o conceito é bem simples.

Observe que não somos obrigados a ter o controller para cada link e o que informamos é o nome do controller e não o nome do arquivo .js. Quem está começando pode se confundir e querer informar o nome do arquivo js. Ao fazer isso e chamar alguma função teremos erro no console Java script.

Crie os arquivos HTML acima e por enquanto deixe-os vazios.

Criando o recipeController.js

Crie o arquivo conforme a imagem a seguir:

angularjsrecipecontrollerjs

Criando o arquivo index.html

O arquivo index.html é que vai carregar os arquivos javascript, portanto deixe assim:

<html ng-app=“myapp”>

<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/recipeController.js”></script>

</head>

<body> 

<div ng-view> 

</div>

</body>

</html>

 

Não se esqueça do ng-app e ng-view.  O ng-view é onde o conteúdo das páginas serão renderizados. Por isso que falei no inicio do post: uma única página para renderizar o conteúdo. É como um include.

Altere o conteúdo da página watch.html e acesse no browser:

http://localhost:8080/receipeangularexample/#/watch

Veja que vai aparecer o conteúdo que temos dentro de watch.html.

Se você tentar http://localhost:8080/receipeangularexample/watch vai receber 404? Por quê? Porque para ser um deep linking precisamos colocar # para que o response seja interceptado e tratado como rota e não um serviço da aplicação.

No meu Github há um repositorio com alguns exemplos usando AngularJS

Por hoje é isso. Simples, não?

Abraços, see ya!!