Top Posts

Emprego em T.I sem Experiência?

Continue lendo

Série AngularJS: Maven archetype com AngularJS e Yeoman

Posted by camilolopes | Posted in Java, Series | Posted on 20-11-2013

4

 

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.

Related Posts with Thumbnails

Comments (4)

Excelente Camilo, já é uma grande ajuda!
o link pro github está quebrado
Abraço

opa Gabriel,

valeu!! Arrumei o link!

Camilo…
O link ainda está quebrado

Muito bom mesmo. Ajudou novamente.

Write a comment