Spring Boot e AngularJS

Uma onda de novas ferramentas, frameworks e arquiteturas vem surgindo no mundo do desenvolvimento web e a plataforma Java não poderia ficar de fora dessa. Hoje vou mostrar como iniciar rapidamente um projeto single page, orientado a REST com Spring Boot e AngularJS, um dos frameworks JS de maior destaque!

Um dos grandes problemas nas aplicações Java, sempre foi a quantidade de configurações xml necessárias para começar um projeto. Com o spring boot a gente consegue reduzir drasticamente essas configurações. Só pra vocês terem uma noção, não é necessário nem mesmo ter um web.xml. Porém, se você for utilizar maven, ai não da pra fugir do pom.xml! E é por ele que vamos começar.

Configurando o Maven e suas dependências

Para exemplificar, vamos criar uma app simples que cadastra e lista HQ’s (Histórias em Quadrinhos).

Crie uma aplicação Maven simples, pode ser utilizando comandline ou a sua IDE favorita.

Provavelmente ao terminar você terá um pom.xml parecido com esse.

 


    4.0.0

    com.bootcry.hqpower
    hqpower
    1.0-SNAPSHOT
	

O primeiro passo é adicionar o spring-boot-starter-parent no pom


    org.springframework.boot
    spring-boot-starter-parent
    1.1.6.RELEASE

Depois vamos adicionar três dependências:

  1. o drive postgresql – pois iremos utilizar o postgreSQL nesse exemplo.
  2. o spring-boot-starter-web – com ele já teremos toda a camada web preparada para utilizar no nosso projeto.
  3. o spring-boot-starter-data-jpa – para a parte de orm e spring data.

Veja como deve ficar:


    org.springframework.boot
    spring-boot-starter-web

 

    org.springframework.boot
    spring-boot-starter-data-jpa



    org.postgresql
    postgresql
    9.3-1102-jdbc41

Para finalizar vamos adicionar o plugin para rodar o projeto através do maven.


    
        
            org.springframework.boot
            spring-boot-maven-plugin
        
    

Configurando o Banco de Dados

Por convenção, o spring-boot procura por um arquivo chamado application.properties ou application.yml dentro do classpath e é nele que configuramos coisas destintas como o DB do projeto, a porta do servidor, entre outras configurações.

No nosso exemplo vamos criar esse arquivo dentro de:src/main/resources/config/application.properties.

Agora basta colocar as configurações do nosso data source:

spring.jpa.database=POSTGRESQL
spring.jpa.show-sql=false
spring.jpa.hibernate.ddl-auto=update

spring.datasource.driverClassName=org.postgresql.Driver
spring.datasource.url=jdbc:postgresql://localhost/hqpower
spring.datasource.username=hqpower
spring.datasource.password=hqpower123

 

Configurando o Spring na nossa Aplicação

Como o springboot roda com servidor embedded, precisamos de um método main com as instruções iniciais e com as configurações necessárias para o spring conseguir fazer as injeções de dependência e gerenciar nossos componentes. Em uma configuração convencional do spring, informamos atravéz da tag component-scan qual o base-package que o spring irá utilizar para realizar essas tarefas. Logo, se em uma configuração convencional vc fizer: <context:component-scan base-package=”com.mycompany.app” scoped-proxy=”targetClass” /> , com o spring-boot basta criar uma classe com o nome Application.java dentro do seu base-package, no nosso exemplo:src/main/java/com/bootcry/hqpower/Application.java

Essa classe deve ter o seguinte conteúdo:

@Configuration
@ComponentScan
@EnableAutoConfiguration
public class Application {

    public static void main(String[] args) {
        SpringApplication app = new SpringApplication(Application.class);
        app.setShowBanner(false);
        app.run(args);
    }
}

Criando nosso primeiro serviço REST

Enfim temos nosso projeto configurado, agora é só começar a codar. Como POC (Prova de conceito), vamos criar um serviço que cadastre e liste HQ’s. Vamos começar pela entidade:

@Entity
public class HQ implements Serializable {

    @Id
    @GeneratedValue(strategy = GenerationType.SEQUENCE)
    private Long id;

    private String titulo;

    private String autor;

    private Date dataPublicacao;

    
    //getters and setters
}

Agora vamos criar nossa interface HQRepository.java para utilizar com o spring-data:

public interface HQRepository extends CrudRepository{
}

Em seguida, vamos criar o Controller.

@RestController
@Transactional
public class HQCtrl {

    @Autowired
    private HQRepository repository;

    @ResponseBody
    @RequestMapping(value = "/hq/", method = RequestMethod.GET)
    public Iterable listar() {
        return repository.findAll();
    }

    @ResponseBody
    @RequestMapping(value = "/hq/salvar", method = RequestMethod.POST)
    public HQ salvar(@RequestBody final HQ hq) {
        return repository.save(hq);
    }
}

Para rodar nossa aplicação é só executar o comando do plugin do maven que adicionamos no projeto: mvn spring-boot:run e acessar nosso serviço na url localhost:8080/hq/

Utilizando o Angular para consumir o JSON

Agora que temos o serviço REST funcionando, vamos criar nosso web client com angular. Antes de tudo precisamos criar nosso index.html. Por convenção, o spring boot procura por um arquivo index.html dentro da pasta src/main/webapp/ ou src/main/webapp/public/ No nosso exemplo, vou criar na raiz do webapp/ mesmo.




    
    HQ POWER


HQ's

Título Autor Publicação

e por fim, mas não menos importante, vamos criar nosso app.js

angular.module('hqApp', [])
.factory('hqService', ['$http', function($http) {

    function listar(callback) {
        $http({
            method:'GET',
            url:'/hq/'
        }).success(function (data) {
            if (callback) callback(data)
        });
    }

    function salvar(hq, callback) {
        $http({
            method:'POST',
            url:'/hq/salvar',
            data:JSON.stringify(hq)
        }).success(function (data) {
            if (callback) callback(data)
        });
    }

    return {
        listar:listar,
        salvar:salvar
    };
}])
.controller('hqCtrl', ['$scope', 'hqService',function($scope, hqService) {

    hqService.listar(function(hqs) {
        $scope.hqs = hqs;
    });

    $scope.salvar = function(hq) {
        hqService.salvar(hq, function(hq) {
            $scope.hqs.push(hq);
        });
    }
}]);

Esse é um exemplo bem simples, mas a partir daqui você pode evoluir seu projeto como preferir.

O projeto final está no github: https://github.com/dvbeato/hq-power

Espero que tenham gostado. Críticas, dúvidas, sugestões são bem vindas!

THAT’s ALL FOLKS

Este post foi escrito primeiro em: diogobeato.com

Related Articles:

—————————————-­—————————————-­—-

Este Post é um oferecimento de Acelerato – Gestão de Projetos ágeis e Help Desk

Não perca tempo, acesse acelerato.com, cadastre-se gratuitamente e descubra como podemos ajudá-lo.

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

1 Comments

Leave a comment