Top Posts

Testando Design Responsivo

Continue lendo

Archetype Maven AngularJS para Large Application

Posted by camilolopes | Posted in AngularJS | Posted on 19-01-2015

0

angularjslogoA

olá Pessoal,

Mais um archetype para projetos AngularJS com Java, que criamos aqui na ITS com base em uma necessidade de um novo projeto. A seguir explico a necessidade e quando você pode usá-lo em seus projetos.

lets go…
archetype-webapps-module-angularjs-webdev

No GitHub xxx do projeto veja como instalar e os frameworks que acompanham o archetype.

Por que e quando usar?

Aqui na ITSLabs surgiu um novo projeto bem diferente do que já tinhamos passado com AngularJS + Java. Precisamos ter:

– AngularJS com Java;
– Ter o yeoman;
O problema

Vamos começar pelo problema, tudo começa quando queremos usar o Yeoman em projetos JEE e queremos fazer o deploy do nosso front-end minificado e tirando o proveito de rodar um grunt build. Mas, nem tudo é tão simples assim, como sabemos o mundo JEE tem sua estrutura (webapps/) e o Yeoman gera uma uma estrutura onde tudo fica dentro de app/ .

Se vc tem webapp/app e quando fazer um grunt build o que acontece? Simplesmente seu arquivo para deploy do front vai ficar no mesmo lugar que está seu código fonte que será algo assim app/dist. Mas, para aplicação JEE pouco importa isso e sim o que está dentro de webapp apenas. Uma solução e como já mostrei exemplos aqui no blog com o Yeoman, é não fazer o grunt build e acaba não obtendo a vantagem dos recursos de minificação, mas consegue ter AngularJS + Java + Yeoman.Porém, em projeto bem pequenos isso pode ser um problema, mas se você está construindo uma aplicação grande, pode ser tornar um problema de produtividade, além de não desfrutar de todas as vantagens que temos hoje no mundo JS tais como grunt, bower etc.
Como resolver?

Pensamos em várias soluções, e a que nos atendeu foi a seguir:
Criamos o projeto em modulos:

– xx-parent: o modulo principal.

– xx-core: o modulo para o back-end. É aqui que vai entrar as APIs, framework para todo o código do back-end

– xx-web: o modulo do front-end. Aqui não teremos código AngularJS para desenvolvimento e sim o deploy e os Controllers.

– xx-webdev: esse sim, é o modulo que terá o código de desenvolvimento do front-end. É aqui que vamos ter os css, html, javascript, controllers do angular etc.
Mas, como funciona?

É bem simples, vc pode ter uma equipe de back-end trabalhando somente no modulo xx-core. E outra equipe trabalhando no xx-webdev. O modulo xx-web é usado para criação do Controller que no archetype vem com Sprint + Jersey (vc pode alterar).

Durante o desenvolvimento sua equipe xxx-webdev não precisa subir uma aplicação JEE para testar, basta apenas roda via console grunt server e automaticamente aplicação vai subir 127.0.0.1:9000 e com liveload hablitado. Ou seja, alterou um arquivo em webdev, o browser é reloaded automaticamente.

Para sua equipe de back-end, eles podem trabalhar tranquilamente nos modulos xxx-core e xxx-web e quando precisar subir aplicação pode ir no modulo parent e rodar:

mvn tomcat:run

E aplicação vai subir normalmente em:

http://localhost:8080/suapp

Na Prática

Vamos rodar os comandos Yeoman em webdev tais como :

 

Entre outros: https://github.com/yeoman/generator-angular
Fazendo Deploy

Para fazer um deploy é simples, quando o código do front-end estier pronto para ser deployed basta executar:

E aqui vem toda a vantagem, o código será minificado e copiado para o projeto xxx-web/webapp. Precisamos usar o –force pq os arquivos estão sendo copiados para uma outra pasta.

Agora que o código foi copiado para xx-web, podemos subir aplicação. Se vc ainda não fez nenhum deploy vai precisar rodar assim:

Agora temos todas as alterações do front-end desenvolvida em webdev na versão final da aplicação.

Observe que com isso não mudamos o mundo de quem trabalha com front-end.Para esses engenheiros tudo continua igual, executar o grunt, bowser, unit test etc. E quando eles terminarem o trabalho deles, apenas precisa fazer um grunt build mandando as mudanças que o time do back-end vai pegar automaticamente.

Vantagens

– mantivemos os beneficios que o Yeoman oferece;

– separamos em modulo e permitindo menos dependências no dia a dia, sendo que cada desenvolvedor pode trabalhar independente e a integração ao termino do trabalho não é impactante;

– Podemos desfrutar das técnicas de minificação, unit test etc;

– deploy especifico;
Outro ponto importante que criamos no archetype é o suporte a parte administrativa. Se você precisar ter suapp/admin sem usar as rotas do angularJS, o archetype já vem com essa configuração no arquivo indexadmin.html que usa um Servlet de redirecionamento. Assim quando o usuário digita suapp/admin vc pode redicionar para uma rota do angularJS.

Usando o archetype

Na página do archetype no github vc tem os passos para instalação. A seguir veja como criar um projeto usando o archetype:

1.Crie um novo projeto maven;

archetypewebdev

2. Agora vamos criar o projeto

archetypewebdevproject

3. E o resultado será

archetypewebdevprojectdone

4. Olhando o projeto principal podemos ver os filhos:

archetypewebdevparent

5. Agora precisamos importar o webdev, vá em File ==> Import e ecolha Maven Project e seguida vá onde está o projeto que acabamos de criar:

archetypewebdevimport

Pronto, temos o esqueleto do projeto para começar a programar.
Conclusão

Espero que tenham gostado do archetype.Se você passou por esse cenário e teve uma solução melhor, não deixe de comentar e compartilhar.

abracos, see ya !!

Série AngularJS: Validando Formulário

Posted by camilolopes | Posted in AngularJS | Posted on 09-11-2014

0

angularjslogoA

Olá Pessoal,

Hoje vamos ver como customizar mensagens de validação em um formulário com AngularJS. Será uma simples validação. Para algo mais específico precisamos criar diretivas. Por exemplo, validar se o username é unico. Tem que criar uma diretiva que faça essa validação para poder exibir uma mensagem no formulário. Não vamos entrar nesse cenário aqui, pois já seria um novo post.

Lets go…

Github

O exemplo vai estar no projeto receipeangularexample no meu github

https://github.com/camilolopes/workspaceAngularJs
Development

Vou assumir que você já tem a configuração básica do AngularJS. Para o exemplo usarei rotas/deep linking para acessar o conteúdo.

Step 1 – Configurando a rota

 

Step 2 – Criando uma função no Controller

Vamos criar uma função bem simples no controller

 

Step 3 – Criando o formulário

Agora vem o nosso formulário. Veja:

Entendendo o Código

Claro que precisamos entender o que o código faz. Focarei apenas no que é importante, ou seja, não preciso explicar o que um atributo required no campo input faz.

Primeiro ponto

Ter um nome para o formulário, sem um nome nada adianta entender o restante do código. É através dele que vamos acessar os campos.

No campo input temos que dar um name para o nosso campo e estamos dizendo que ele é required e qual mensagem deve ser exiba. Se não fizermos isso será a mensagem default HTML 5. Na linha span estamos dizendo: “exiba esta mensagem se o campo username for inválido”, ou seja, se não tiver nada digitado vai exibir essa mensagem por padrão, como vimos na imagem anterior.
bloco email

 

Fizemos a mesma coisa do campo nome, a diferença é que aqui temos um campo do tipo email que valida o formato do e-mail, se este for inválido exibe a mensagem que colocamos na validação

 

O objeto $error que estamos usando contém todas as validações para um específico formulário, que no nosso caso chama-se mainForm.

Lembrando que a estrutura é nomeDoForm.nomePropriedade.$error.attributo ou nomeDoForm.expression.

Para o bloco idade nada de diferente, então nem preciso explicar.

Bloco Site

Aqui estamos validando a url e para isso temos o type url ja no HTML 5.Mas, observe a diferença que a mensagem somente é exiba quando o campo é modificado, ela não aparece quando a página é carregada, como fizemos nos outros campos, isso devido a essa linha aqui:

 

Ela está dizendo: “se o campo usersite for modificado e inválido, exiba o conteudo desse bloco” que no nosso caso temos a mensagem “Url inválida.

$dirty retorna true se o campo foi modificado

Bloco botão submit

 

E para garantir que o usuario nao vai submeter o form, vamos desabilitar o botão submit se o formulário é invalido, ou seja, se todos os requisitos não são atendidos esse botão fica disabled

Testando

angularformvalidationempty

 
angularformvalidationinvalid
Por hoje é isso, vou ficando por aqui e espero que tenham gostado do post.

abracos, see ya!!