AngularJS – Página: 4 – Blog do Camilo

Série AngularJS Resolvendo problemas com rotas AngularJS 1.2.x

Olá Pessoal,

O post de hoje é bem curto. A ideia aqui é mostrar o quanto é importante acompanharmos as releases do AngularJS a partir da versão 1.1.6. O angularjs team separou as rotas e agora temos um JS específico, então precisamos informar isso no head do nosso html, caso contrário vamos ter o problema a seguir:

O error: Fixing $injection:modulerr

E para resolver é simples, basta adicionar o trecho a seguir no head

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js”></script>

Pronto, resolvido. Uma forma legal que venho fazendo para acompanhar os updates do angularJS é ficar ligado nos posts no blog do framework. Tudo acontece lá: http://blog.angularjs.org/ . No meu caso é minha home page :).

Abracos, see ya!!

Série AngularJS Criando um dialog com AngularJS + AngularUI

Olá Pessoal,

Mais um post da série AngularJS e hoje vamos ver como criar um dialog. Eu lembro que uma vez tentei fazer isso em JavaScript puro e foi muito sofrimento, mas o angular-ui nos facilita muita coisa.

Lets go..

Starting…

Como sempre, vou considerar que você já vem acompanhando a série e entende a estrutura básica com o angular e rotas. O projeto que tem os exemplos da série está no meu GitHub

Requisitos

– angular-ui-bootstrap-modal.js
– angular-ui.js

Para o dialog, é desse cara que precisamos. Você pode baixá-lo no projeto pegando o arquivo no meu github.

Na página do angular-ui tem exemplos bacanas usando o modal http://angular-ui.github.io/bootstrap/

Vamos agora colocar a mão na massa

Development

Step 1

Antes de começar, a estrutura aqui é baseada no meu projeto que está no github. Se você tem o seu basta fazer a adaptação onde atualizar. (O que?)

Primeiro passo é atualizarmos a declaração do module no arquivo app.js deixando assim:

var app = angular.module(“myapp”, [ “ui”, “ui.directives”,”ui.bootstrap.modal” ]);

Adicionamos o “ui.bootstrap.modal” (o “ui.directives” não é requerido para esse exemplo).

Step 2

Agora vamos atualizar o index.html informando para carregar .js que tem a funcionalidade do dialog:

<head>

<script src=“js/lib/angular-ui-bootstrap-modal.js”></script>

<link rel=“stylesheet” href=“css/bootstrap.css”>

</head>

No meu caso esse é o caminho. Adicionei o css do bootstrap para ficar com layout agradável.

Step 3

Vamos criar o controller que vai cuidar do dialog. No meu arquivo recipeController.js adicionei o seguinte controller:

var MyCtrlDialog = function($scope) {

$scope.open = function() {

$scope.showModal = true;

};

$scope.ok = function() {

$scope.showModal = false;

};

$scope.cancel = function() {

$scope.showModal = false;

};

};

A leitura é bem simples: quando a função open for chamada ele deve mostrar o modal, quando a função ok ou cancel for chamada o modal deve ser fechado.

Step 4

Como estou usando rotas, vou adicionar uma para o dialog. Não é requerido que seja feito com rotas, desde que ao carregar o HTML os .js sejam carregados, tudo vai funcionar.

No arquivo app.js adicionei a rota:

when(“/dialog”, {

templateUrl : “dialog.html”,controller:MyCtrlDialog

}).

Step 5

Agora vamos criar o arquivo dialog.html para vermos o resultado:

<!– In this dialog is using angularui –>

<body>

<!– Criando um botão para abrir o modal –>

<button class=“btn” ng-click=“open()”>Open Dialog</button>

<!– My dialog Content –>

<div modal=“showModal” close=“cancel()”>

<div class=“modal-header”>

<h4>Modal Dialog</h4>

</div>

<div class=“modal-body”>

<p>Teste dialog. Are you sure?</p>

</div>

<div class=“modal-footer”>

<button class=“btn btn-success” ng-click=“ok()”>Ok</button>

<button class=“btn” ng-click=“cancel()”>Cancel</button>

</div>

</div>

</body>

Testando

Simples, não?

Abraços, see ya!!

Série AngularJS Usando o $watch

Olá Pessoal,

No post de hoje vamos ver como usar o $watch no angular. Mas pra que serve? Bem, se você já trabalhou com JSF ou JavaScript puro certamente algum dia teve que implementar em algum elemento alguma ação após alteração de um campo. Por exemplo, após digitar o usuário, digitar o email e senha habilitamos o botão login. É isso que vamos ver com o $watch, ele faz sync com um elemento.

Lets go…

Starting…

Para esse exemplo vamos usar o projeto recipeangularexample, que já estamos usando nos últimos posts, portanto vou considerar que você tem a estrutura do projeto conforme estamos evoluindo desde o último post. Se você baixar a versão do GitHub terá o projeto completo com tudo que veremos na série.

Development

A implementação é bem simples, vejamos:

Alterando recipeController.js

var recipeController = function ($scope){

       $scope.name=””;

       //é aqui que está mágica

       $scope.$watch(“name”,function(newValue,oldValue){

             if($scope.name.length > 0){

                    $scope.greeting = “Greeting ” + $scope.name;

             }

       });

};

Alterando o arquivo watch.html

<body>

<div>

<input type=“text” ng-model=“name”>

<p>{{greeting}}

</div>

</body>

Resultado:

Simples, não?

Abracos, see ya!!

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:

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.

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 Usando Filter

Olá Pessoal,

No post de hoje vamos ver como usar o recurso de filter que temos no angular. O projeto que usarei como exemplo é o recipeangularexample que usamos nos posts anteriores e está disponível no meu github.

Lets go…

Starting…

Lembra que no post anterior sobre Deep Linking criamos algumas páginas HTML vazias? A ideia é irmos colocando carne no esqueleto à medida que vamos evoluindo na nossa série.

Na documentação você encontra exemplos com Filter http://docs.angularjs.org/api/ng.filter:filter

Development

Para o nosso exemplo vamos ver o uppercase, portanto no upperfilter.html deixe assim:

<body> 

Enter your name:<input type="text" ng-model="name"></input> 

{{name | uppercase}} 

<br/> 

</body>

Suba a aplicação e acesse o teste:

Simples usar os filters no angular, não é? Aproveite e brinque um pouco com os demais.

Abraços, See ya!