10.3 Aplicação Web com VRaptor 4 – Começando com o Angular: Criando nossos Services

Bora começar o dia hoje com mais um post? Hoje vamos criar 2 Services para acessar os endpoints que fizemos com VRaptor, o TelefoneService e o ContatoService. Então chega de papo e vamos nessa e você verá como é simples.

Mas antes de começarmos, vamos aos recadinhos e patrocinadores. Já estamos trabalhando no nosso projeto, caso tenha caído neste tutorial acidentalmente, pode ver a lista dos episódios anteriores na introdução que fiz para estes posts. E lembre-se, você pode e deve acompanhar os códigos pelo meu github, segue o link ai em baixo:

https://github.com/pedro-hos/aprendendo-vraptor

Vamos montar um service que fará o contato com os endpoint que criamos no VRaptor certo? Para isso vamos usar o $resource, ele não vem por default no angular, então tivemos que inserir ele, mas, já fizemos isso lembra? Quando rodamos o bower e inserimos angular-resource#1.3. E também já colocamos a referência no nosso app.js. Agora que sabemos que está tudo configurado, vamos criar os services.

Bom, o $resource já tem uma série de chamadas pré-definidas, e são elas que mostro a seguir. Para estas chamadas, não precisamos criar nada, já vem por padrão.

{ 'get':    {method:'GET'},
  'save':   {method:'POST'},
  'query':  {method:'GET', isArray:true},
  'remove': {method:'DELETE'},
  'delete': {method:'DELETE'} };

Para outras chamas, temos que criar manualmente certo? E veremos como fazer isso em breve. Acredito que as chamadas acima são auto explicativas, mas se não forem você pode ver na própria página do angular cada uma delas.

Agora vamos ser mais pragmáticos, criaremos o arquivo contatoService.js dentro do diretório public/js/services. O conteúdo do arquivo será o seguinte:

angular.module('meus-contatos')
    .factory('contatoService', ['$resource', function ($resource) {

        return $resource($SERVICES_CONTEXT + 'contato/:params', {}, {
            update: {
                method: "PUT"
            },

            tipos: {
                method: 'GET',
                params: {params: 'tipo'},
                isArray: true
            }
            
        });

    }]);
  • .factory(‘contatoService’): Criamos uma factory e demos uma nome a ela, esse mesmo nome deve ser injetado no controller para usarmos os métodos daqui;
  • [‘$resource’]: Injetamos o $resource;
  • $SERVICES_CONTEXT + ‘contato/:params’: Retornamos o $resource e passamos o contexto que criamos no app.js, que é a URL comum dos nossos endpoints. O :params são os parâmetros que podemos passar para a URL, como, id e tipo para pegarmos os tipos de contatos;
  • Por fim criamos dois métodos a mais:

O próximo service que iremos criar é o telefoneService, para isso vamos criar o arquivo telefoneService, no mesmo diretório do contatoService, e vamos colocar o seguinte trecho de código:

angular.module('meus-contatos')
    .factory('telefoneService', ['$resource', function ($resource) {

        return $resource($SERVICES_CONTEXT + 'telefone/:params', {}, {

            tipos: {
                method: 'GET',
                params: {params: 'tipo'},
                isArray: true
            }
            
        });

    }]);

O código é bem parecido com o anterior. Agora precisamos declarar esses dois services no index.html e por fim injetá-los no mainController.

Primeiro insira os arquivos service dentro do index.html, junto com as outras declarações.

<script src="public/js/services/contatoService.js"></script>
<script src="public/js/services/telefoneService.js"></script>

Agora, vamos injetar os nossos novos services no Controller. Para isso abra o arquivo main.js, e insira os services ao lado de $scope, como parâmetro da function.

angular.module('meus-contatos')
    .controller('MainController', function ($scope, contatoService, telefoneService) { 

//aqui codigão 

});

Pronto, os próximos passos serão listar os contratos, cria-los, edita-los e deleta-los. Até mais então, e qualquer dúvida, pode mandar que tentamos resolver juntos.

Aquele abraço!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s