Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

angular-translate | Passo a Passo – (i18n) Como internacionalizar um App AngularJS – Parte 3 de 3


angular-translate | Passo a Passo – (i18n)  Como internacionalizar um WebApp com AngularJS – Parte 3 de 3

Olá a todos. Sejam bem vindos aos Canal e Blog SW9

Um dos grandes desafios de quem pretende criar um site ou WebApp e promovê-lo em outros países é permitir que seu site ou WebApp seja traduzido para mais de um idioma.
Não apenas a tradução, mas alguns aspectos de localização também devem ser levados em conta, como por exemplo formato da data, moeda e formato dos números que são característicos de cada país.

Chegou a vez do terceiro e último vídeo da série que explica passo a passo como internacionalizar um app AngularJS.

Neste terceiro vídeo vou falar sobre cache, salvar o idioma padrão em memória, exibir a bandeira do idioma selecionado e como trabalhar com números, moeda e data.

Cache

| O angular-translate possui um recurso disponível que é a possibilidade de usar cache para armazenar as tabelas de tradução, e com isso, otimizar o carregamento das páginas. Além de configurar o cache, você pode dar refresh no cache a qualquer momento.

LocalStorage

| Vou mostrar como salvar em memória o idioma selecionado pelo usuário, para que nos próximos acessos ao App, o mesmo idioma seja recuperado.  Existem várias formas de salvar a definição do idioma, dentre elas temos o cookie, sessão, banco de dados e localStorage.  O escolhido foi o componente LocalStorage.

Para instalar o Local Storage, basta digitar o comando [npm install –save-dev  local-storage] no prompt de comando.  Com o local storage você poderá salvar as definições de idioma e recuperá-las quando o app for carregado.

Localização

| Por último, vou mostrar como trabalhar com localização, para tratar de forma adequada os números, moeda e datas, dependendo do idioma escolhido.

Para instalar as bibliotecas de localização, você precisa executar o comando [npm install –save-dev angular-dynamic-locale angular-i18n] no prompt de comando.

Bom pessoal, é isso, chegamos ao final de mais uma série.

Como de costume, deixarei um link no final da descrição para baixarem o código fonte exemplo. O processo é bem simples, basta acessar o link, informar um e-mail válido e dentro de instantes receberá o link para acesso irrestrito em minha área de downloads.

O que estão esperando? Baixem agora mesmo o código fonte e bons estudos. :-)

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

Links úteis:

Código Fonte: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: youtube.com/+sw9brl

Link do vídeo: angular-translate – Parte 1

Link do vídeo 2: angular-translate – Parte 2

Link do vídeo 3: angular-translate – Parte 3

Playlist: playlist com os 3 vídeos da série

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?