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:

angularjsrecipeupper

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

Abraços, See ya!

Entendendo Maven archetypes AngularJS para Java Developers

+

Olá Pessoal,

O post de vou apresentar os archetypes maven que criei com angularJS. Espero que gostem e vejam a diferença de

cada um.

Lets go…

Entendendo os archetypes

Bom, além de responder ao leitor, resolvi fazer um post para explicar cada archetype que criei e a diferença entre eles. Cada um nasceu a partir da necessidade de projetos reais, quando tivemos que fazer só uma POC e não queríamos dar copy/paste em outro projeto, mas sim ter um esqueleto funcionando e com mínimo de trabalho possivel, pois há copy/paste que ter que fazer os ajustes é algo muito estressante. Vamos entender aqui cada um deles:

archetype-webApps-Module

Esse aqui nasceu com objetivo de deixar em aberto o que vai ser usado no front-end, mas o back-end, com o que é básico, já vem configurado. Por exemplo: Hibernate, Spring, Jersey (se for o caso), DBUnit, DAO Generic, Service Generic, etc, mas o front-end fica em aberto para você escolher. Esse archetype atende quando precisamos usar o recurso de módulos (module) do maven, e por default vem com webapps-core que é para back-end e webapps-web para front-end. O principal é conhecido como parent, e no pom.xml dele tem as libs em comum para os dois módulos.

Iai, vai criar um novo projeto e não sabe o que vai ser no front-end e quer usar a estrutura de modules?

Recomendo usar esse archetype.

https://github.com/camilolopes/archetype-webapps-module

archetype-webapps-module-angularjs

Esse aqui tem tudo o que tem no archetype anterior, a diferença é que vem com o angularJS configurado pelo Yeoman tools. Então, se vai começar um projeto com angularJS e separado por modules back/front-end, recomendo usar esse archetype. Claro, considerando que a estrutura do front-end vai seguir o que o Yeoman gera, e já vem com suporte ao twitter boostrap, mas você vai precisar que o bower baixe as dependências, portanto build seu projeto antes via grant.

https://github.com/camilolopes/archetype-webapps-module-angularjs

archetype-webapps-java-angularjs

https://github.com/camilolopes/archetype-webapps-java-angularjs

Esse aqui tem tudo o que os outros archetypes tem em termos de framework, exceto que esse não usam módulos do Maven. É um único projeto JEE, como estamos acostumados. Ele usa o angularjs 1.2.x. e segue uma estrutura simples de organização dos controllers, services e outros JS.

Quando usar?

Quando você precisa criar um projeto JEE com angularjs, mas que não precisa ser separado em módulos e não quer usar o Yeoman. Aqui é a estrutura é bem pura, ou seja, nada do front-end é gerado por ferramentas.

archetype-webapps-java-angularjs-yeoman

https://github.com/camilolopes/archetype-webapps-java-angularjs-yeoman

Tem tudo o que o archetype-webapps-java-angularjs tem, a diferença é que o front-end é gerado pelo yeoman com AngularJS 1.0

archetype-webapps-simple-angularjs-yeoman

https://github.com/camilolopes/archetype-webapps-simple-angularjs-yeoman

Esse aqui tem tudo que o anterior tem, exceto que não vem com os frameworks Java.

archetype-webapps-simple-angularjs

https://github.com/camilolopes/archetype-webapps-simple-angularjs

Esse aqui é o mais simples archetype. Ele não tem nada de framework java, apenas o AngularJS configurado e a estrutura dos packages para JS. Se você quer testar o angularJS da maneira mais simples, esse é o archetype ideal.

Pronto pessoal. Essa é a lista de archetypes que criei para facilitar a nossa vida com AngularJS. Espero que ajudem também no dia a dia de vocês.

Abracos. 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: Maven archetype com AngularJS e Yeoman

 

Olá Pessoal,

Iai vai desenvolver sua aplicação com AngularJS e Java, mas vai no archetype do maven e não tem nada? Já era, agora tem rs. Acabei de criarum archetype Maven com AngularJS + Yeoman

Lets…

Overview 


O motivo de criar esse archetype é que tenho trabalhado bastante nos últimos 4 meses com AngularJS e back-end Java e tem surgido novos projetos, alguns pequenos, outros médio porte, e ter que fazer setup toda hora é meio chato, heim? Então, para unir o útil ao agradável, resolvi um problema aqui no projeto para todos os projetos que vão trabalhar usando módulos no maven e o back-end será Java com front-end AngularJS, para evitar aquele tempo gasto em setup (mesmo que seja uma hora, já compensa). Eu já fiz outros archetypes e estão no meu github.

O que tem de legal nesse archetype?

Bem, o que tem de legal é o seguinte:

  • Hibernate 4.x já vem configurado com o Spring;
  • Spring Core 3.x;
  • MySql 5.x
  • DBUnit (configurado e pronto pra sair usando);
  • DAO Generic e Service Generic;
  • Jersey 1.x
  • AngularJS 1.0.x
  • Yeoman Tools
  • Twitter Bootstrap
  • Flyway (para db migration – opcional a configuração)

Só isso que vem de legal, rs. No AngularJs eu optei pela versão estável ao invés da Release candidate.

Como usar?

Simples. Para não repetir aqui no blog o que já escrevi no readme.md do projeto, siga os passos da instalação do archetype no seu repositório maven local.

Instalado. E agora?

Vamos criar um projeto e fazer uns ajustes como com qualquer template que vem com informações default e precisam ser ajustadas para atender ao nosso projeto.

Passo 1

Crie um novo projeto maven e escolha a opção All Catalogs e em seguida digite br. para filtrar e aparecer o archetype que acabou de instalar.

archetypeangularjscatalog

Passo 2

Escolha o archetype e preencha com as informações do seu projeto.

Passo 3

Clique em finish.

Passo 4

Seu projeto vai estar quebrado, conforme a imagem a seguir

archetypeangularjsprojectfailure

Passo 5

Abra o pom.xml do projeto webapps-web e remova a dependência webapps-core que tem configurações default do archetype

archetypewebappscoreangularjsremoved

Passo 6

Adicione a dependência do seu projeto

archetypeangularjswebappscore

Passo 7

Seu projeto deve estar assim agora:

archetypeangularjsprojectresult

Dentro de webapps-web/webapps temos a pasta apps e toda a estrutura gerada pelo Yeoman.

Passo 8

Vá na raiz do projeto e execute:

mvn tomcat:run

Aplicação deve subir agora acesse: http://localhost:8080/webapps-web/

Pronto, agora é só usar.

Claro que você vai precisar especificar as informações de banco de dados, estrutura do seu packages, etc. Vou assumir que você já conhece os frameworks(spring, hibernate, jersey etc) que o archetype aborda e sabe alterar, afinal de contas você não vai criar um projeto com Spring se não sabe mexer com o framework, concorda? Para facilitar, deixei comentários nos arquivos .xml, onde você deve alterar.

Download Archetype Maven AngularJS 

https://github.com/camilolopes/archetype-webapps-module-angularjs

Em breve stou subindo outros archetypes para projetos pequenos, aguardem mais alguns dias :D.  Se quiser ser avisado assim que publicar pode me acompanhar no github ou assinar o blog. 

Abracos. Vou ficando por aqui.

Série AngularJS: AngularJS com Jersey

 

Olá Pessoal,

No post de hoje veremos como mandar os dados do front-end para o back-end usando o Jersey, mas há outras opções como Spring MVC.

Lets go..

Introdução

A ideia aqui é como mandar o que está na tela para o back-end. O AngularJS não depende do seu back-end, mas de alguma forma vamos precisar que ele converse com o server-side. Como fazer isso? Simples, via objeto JSON usando RESTful. Essa é a forma que podemos mandar os dados que estão na tela para o nosso back-end. Não vou entrar em detalhes do que é um objeto JSON e toda teoria. Basta dar uma “googlada” que há vários posts e artigos sobre o assunto.

Jersey

Vamos usar o Jersey no nosso Controller, que terá como responsabilidade receber um objeto JSON e retornar um objeto JSON para camada de view. Ou seja, é por aqui que o AngularJS vai conversar com nosso back-end e deixar transparente qual linguagem estamos usando (poderia ser Java, PHP, Ruby etc).

Poderíamos usar o Spring MVC retornando um objeto JSON. Pouco importa para o Angular o que teríamos aqui, desde que o objeto retornado fosse JSON.

Na Prática

Vamos deixar de teoria e colocar a mão na massa. Para o Jersey, você precisa ter lido este post. Não vou focar no código do Jersey, pois esse já foi abordado em outro post, portanto considero que você entenda ou já tenha as chamadas dos paths correto no seu controller e o método retornando JSON. A seguir, o método que vamos usar nesse exemplo:

@GET

       @Path(“/client”)

       @Produces(MediaType.APPLICATION_JSON)

       public List<Client> getCliente() {

             Client client = new Client();

             client.setId(1);

             client.setName(“Hello World Camilo”);

             ArrayList<Client> list = new ArrayList<Client>();

             list.add(client);

             return list;

                     }

Caso não tenha no Controller, adicione. Se você fez o exemplo do post sobre Jersey aqui no blog, basta alterar o método existente conforme acima.

  1. Crie o arquivo app.js que terá a configuração da nossa aplicação. Esse arquivo deve ficar na raiz, ou seja, em webapp. Claro que você poderia colocar em qualquer outro local, mas vamos manter tudo simples aqui. Veja como ele se parece:

/*

 * Nesse arquivo estamos configurando variáveis e métodos GLOBAIS

 */

SERVER_URL=”http://localhost:8080/hellojersey/rest”; 

//criando o module para toda app 

       $app = angular.module(‘app’,[]);      

//criando a routes

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

                           //definindo as rotas

             $routeProvider.

             when(‘/’,{templateUrl:’view/customers.html’,controller:customerController}).

             when(‘/clientes’,{templateUrl:’view/hello.html’,controller:customerController}).

              otherwise({redirectTo:’/’});    

       $httpProvider.responseInterceptors.push(function($q,$rootScope){

             return function(promise){

                    return promise.then(function(response){

                           return (response);

                    },function(response){

                           $data = response.data;

                           $error = $data.error;

//                  coloquei os alerts para me certificar que a função foi chamada

                           if($error && $error.text)

                                  alert(“ERROR: ” + $error.text);

                           else{

                                  if(response.status=404)

                                  alert(“Page not found”);

                           }

                           return $q.reject(response);

                    });

             };

       });

});

        $app.run(function($rootScope){

                $rootScope.server=function(url){

                        alert(SERVER_URL + url);

                        return SERVER_URL + url;                      

                };

        }       

);

                   

SERVER_URL é uma variável global que criamos e que tem o caminho do nosso serviço REST. Observe que criamos uma variável Server que vai concatenar com o valor passado, por exemplo. Para chamar um serviço GET disponível diretamente, a url é assim:

http://localhost:8080/hellojersey/rest/hello/client

Mas, a ideia é fazer que isso aconteça via AngularJS de maneira transparente.  No código anterior, quando criamos as routers, falamos que quando chamar raiz “/”, o conteúdo do arquivo view/customers.html deve ser exibido na mesma página. E quando chamar /clientes deve ser o conteúdo do arquivo hello.html. 

Criando o customerController.js

Vamos criar o nosso controller

function customerController($scope,$http,$routeParams,$location){

       $scope.rows=null;

       $scope.row=null; 

$scope.loadAll = function(){

/*     esse é o cara que chama o service rest

 * Observe que ele concatena o valor com o que foi definido na variável SERVER

 */

       $http.get($scope.server(“/hello/client”)).success(function(data){

             $scope.rows=data;

             alert(“loadALL”);

       }).error(function(data){

             alert(“Error…”);

             console.log(data);

       });

}; 

}

É aqui que acontece a magia. Observe que passo o caminho do meu serviço,

$http.get($scope.server(“/hello/client”)).success(function(data)

O resto será concatenado com a variável global SERVER_URL.

Criando as páginas HTML

Vamos criar três arquivos HTML

  • index.html: teremos um link que ao ser clicado vai exibir todos os clientes, ou seja, por baixo ele chama o nosso serviço rest que retorna todos os clientes;
  • customers.html: tem uma tabela que exibe os clientes cadastrados;
  • hello.html é apenas mais um arquivo para teste.

index.html

<html ng-app=“app”>

<head>

<meta charset=“UTF-8”>

<script src=“http://code.angularjs.org/1.0.6/angular.min.js”></script>

<script src=“app.js”></script>

<script src=“customerController.js”></script>

</head>

<body>

<li><a href=“#/clientes”>Clientes</a></li>

<div ng-view></div>

</body>

</html>

 customers.html

<h2>AngularJS Customers</h2>

<div ng-init=“loadAll()”>

<table id=“tableData”>

<thead>

<tr>

<th>ID</th>

<td>Nome</td>

</tr>

</thead>

<tbody>

<tr ng-repeat=“row in rows”>

<td>{{row.id}}</td>

<td>{{row.name}}

</tr>

</tbody>

</table>

</div>

Hello.html

<body>

hello, incluiu o conteudo de hllo.htm

</body>

Veja a estrutura do projeto:

hellojerseyangularjsproject

Testando

Execute mvn tomcat:run  via linha comando ou Eclipse

http://localhost:8080/hellojerseyangularjs/

hellojerseyangulartestraiz

Vai aparecer os alerts que inserimos

hellojerseyangularjsresult

Veja o resultado, e melhor: sem sair da página.  Click no link clientes e veja o resultado

 

hellojerseyangularjsresultclickclient

Pronto, assim terminamos de fazer AngularJS conversar com o nosso back-end de maneira simples, fácil e transparente.

GitHub

https://github.com/camilolopes/workspaceAngularJs

 Abraços, see ya!!!