AngularJS – Página: 6 – Blog do Camilo

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.

Simples, não?

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

Abraços, 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:

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!!

Série AngularJS: Hello World in few minutes

Olá Pessoal,

O post de hoje é para quem está querendo começar a brincar com AngularJS e aqui vai um simples “Hello World” e vou deixar que o próprio exemplo prático fale pelo framework.

Lets go…

Na prática

Crie um simple project webapp pelo maven ou dynamic web Project (não é requerido, mas considerando que você seja um desenvolvedor Java);
Em webapps crie um arquivo hello.html.

Escreva o seguinte código:

<!doctype html>

<!– estamos dizendo ‘quero usar angularjs’ –>

<html ng-app>

<head>

<!– definido a versão do angular que queremos –>

<script

        src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>

        <!– aqui criamos um js que terá as function –>

<script src=“todo.js”>

</script>

<title>Insert title here</title>

</head>

<body>

<!– chamamos a funcao que está no .js –>

        <div ng-controller=“hello”>

        <!– chamamos a variavel que declaramos no .js –>

                Hello {{name}}

                <hr />

                <label>Name</label>

<input ng-model=“typeName” placeHolder=“type your name please” /> <br />

                        Hi {{typeName}}, <br />

                        <br/>

                <br/>

                <label>Quantity of product</label>

                <input type=“number”   ng-model=“qt” required=“required” />

                        <label>Inform Price</label>

                        <input type=“number” ng-model=“price” required=“required” />

                        Total {{qt *price | currency}}

        </div>

</body>

</html>

Vamos entender um pouco melhor, apesar dos comentários. Quando fizermos ng-model estamos declarando uma variável, e quando dizemos {{ expresion }} estamos imprimindo o valor da variável. Se você já usou expression languague com JSF, por exemplo, é o mesmo conceito, porém com sintaxe diferente. Mas observe que quando fizemos Hello {{ name }} ele busca a variável que está na function hello() que criamos no .js. Veja:

function hello($scope){

$scope.name=”world AngularJS \O/”;

}

O .js você pode colocar na raiz de webapps, ou dentro de um subdiretório, desde que você informe no arquivo .html onde está o seu .js.

O resultado será algo assim:

Simples? Show, né?

Esse é o AngularJS. Esse post foi apenas uma pequena introdução prática sem entrar nos detalhes do framework. Para quem quiser estudar e se aprofundar basta passar no http://angularjs.org/ e se divertir.

No meu Github há exemplos de projetos que tenho feito com angularJS: https://github.com/camilolopes

Abraços.

AngularJS – Presentation

Olá Pessoal,

Quem me acompanha no twitter tem visto meus posts nas últimas semanas falando do AngularJS e sabe que venho preparando uma série de posts que já estão prontos para sair do forno, e daqui a pouco estão por aqui com a primeira temporada de série. Neste primeiro post queria compartilhar com vocês uma apresentação que fiz a cerca de algumas semanas para um grupo de americanos sobre o framework. A ideia é discutir e saber como está o framework da Google.

Lets go…

Starting…

A apresentação disponibilizei no meu slideshare. Como não gosto de apresentação detalhada, ou seja, no modelo de quase um livro, há apenas tópicos e imagens. Mas a depender do quanto você está envolvido com o framework, vai ter uma noção do que discutimos.

No geral, essa apresentação foi para mostrar como o AngularJS está dentro do mercado, já que é um framework novo, com apenas 2-3 anos de vida. A discussão foi muito boa e o framework apresentou ser, para médio e longo prazo, uma adoção bem natural para desenvolvimento web.

Não quero adiantar esse assunto, pois é um dos posts da série que vou publicar aqui, mas aqui vai uma parte:

– Curva de aprendizado: essa aqui é excelente. Com apenas alguns minutos você entende o que o framework faz e como usá-lo. É muito simples;
– Suporte a MVC: isso é sensacional. Se você implementar usando MVC percebe o ganho que tem ao ter isso do client-side. A manutenção é muito baixa. Mas, de novo, isso não depende do angularJS e sim quem está entre a cadeira e o computador.
– Boa documentação e comunidade ativa: isso é importante. Eu abri bugs, tirei dúvidas na thread de discussão do angularJS no github e realmente é uma comunidade bem ativa, e o team do AngularJS, quando respondem, são bem claros e específicos. Gostei muito do envolvimento com eles.
– Suporte IE: Para as versões mais recentes do IE não teremos problema em usar o angularJS, mas versões antigas como IE8 ou inferior, alguns recursos não funcionam. Se você procurar vai achar alguns “tricks” para fazer funcionar nessas versões bem antigas, mas a depender do que você está usando do angularJS, acaba não funcionando bem. Mas se você for na documentação do AngularJS vai ver que eles não garantem suporte nas versões mais antigas do IE.
– Rápido desenvolvimento: É realmente produtivo desenvolver com AngularJS. A facilidade e entendimento do código é algo sensacional, só programando para saber.

Atualmente estou trabalhando em um projeto e estamos usando o AngularJS(desde julho/2013) e a experiência está sendo sensacional. Cada nova funcionalidade e integração que precisamos fazer é uma oportunidade de aprendizado. Quando comecei com o framework, senti falta de um grupo em português para discutir e ajudar outros desenvolvedores que estão querendo começar e resolvi criar o AngularJS-Brazil Group. Além de postar assuntos técnicos aqui no blog, estarei no grupo compartilhando links, “tricks” do dia a dia com os framework. Já comecei postando hotlinks para quem deseja começar e não sabe por onde. Em breve vou fazer um post sobre qual livro eu recomendo. Já li 2 livros sobre o assunto e estou indo para o terceiro e nem tudo que reluz é ouro. Vou fazer um post falando mais sobre os livros.

Bom, vou ficando por aqui, e Welcome to AngularJS world. Vejo vocês na série AngularJS e lá no AngularJS-Brazil Group. 🙂

Abraços, see ya!!!!

Configurando o Jboss 7 no maven

Olá Pessoal,

O post de hoje vamos ver como configurar o JBoss AS 7 no maven sem precisar ter o Jboss Application Server instalado na máquina.

Lets go…

Starting…

1. Crie um maven project

2. Escolha o tipo de projeto: jboss-javaee6-webappp

3. Informe as configurações do seu projeto na próxima tela.

4. O arquivo pom.xml vai ficar reclamando de algumas dependências. Apague todas as dependências de Hibernate, porque não vamos usar aqui.

5. Vá no pom e altere jboss-as-maven-plugin para versão 7.3.Final, ficando assim:

<plugin>

            <groupId>org.jboss.as.plugins</groupId>

            <artifactId>jboss-as-maven-plugin</artifactId>

            <version>7.3.Final</version>

         </plugin>

6. Run >> run configuration >> Maven

7. E clique em run

Aguarde o server subir e fazer o deploy da sua aplicação:

Resultado:

Pronto! já temos o jboss AS 7 rodando agora é só fazer dpeloy da app, e em segundos já temos aplicação no ar. Simples e fácil não?

vou ficando por aqui e espero que tenham gostado do post.

abracos, see ya!!!