Posted by Clayton Casteli On July - 22 - 2015 0 Comment

O framework AngularJS permite a criação de serviços de diferentes maneiras. Podemos criar usando factory forma mais comum, Service ou mesmo Provider. O Provider quando usado nos permite criar pontos de configuração no serviço, o que nos da maior flexibilidade.

No exemplo abaixo vamos usar factory para desenvolver o serviço simples de cálculo de idade, apenas para ilustrarmos a criação de um serviço e em um outro post vamos mostrar integração com RestFull.

Um post de introdução pode ser lido no link Introdução a AngularJS

Apenas como um forma de organizar o código vamos separar o código em app.js, controllers.js, services.js

//app.js
var pessoasServ = angular.module("appServ", []);

No controller é chamado o serviço "calcula(pessoa)", esse serviço recebe uma pessoa e internamente faz o calculo da idade com os dados fornecidos.

//controllers.js
pessoasServ.controller("ctrlPessoasServ", function($scope, servico) {

                $scope.calculaIdade = function (pessoa) {           

                               $scope.idadePessoa = servico.calcula(pessoa);

                };

});

Nosso serviço efeitivamente implementa a função "calcula(pessoa)". A função trabalha com as duas datas recebidas no formulário e executa uma operação de subtração entre os anos para retornar a idade na variavél idade.

//services.js
pessoasServ.factory("service", function(config) {

                var _calcula = function(pessoa) {                              

                               var _nascimento = pessoa.nascimento;
                               var _dataCorrente = pessoa.dataCorrente;

                              <!-- caso precise pode utilizar variaveis constantes em seu código-->
                               //_dataCorrente = config.datadefault;

                               var _idade = new Date(_dataCorrente).getFullYear() - new Date(_nascimento).getFullYear();

                               return {
                                       idade : _idade,

                               };

                };

                return {

                               calcula : _calcula

                };

});

Caso você precise mapear valores de constantes no seu serviço, pode utilizar um arquivo separado para esses valores e configurar esses valores separadamente e posteriormente utilizar no seu codigo. Existe maneiras de deixar esses valores configuráveis utilizando provider para implementar serviços.

//contants.js

pessoasServ.constant("config", {

                datadefault : new Date("12/12/2014"),

});

Por fim nosso código html que mostra um pequeno formulario com os dados de entrada e um botão de calcular que chama nosso serviço para calcular a idade.


<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="appServ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/constants.js"></script> 

<title>Teste Serviço AngularJS</title>

</head>
<body ng-controller="ctrlPessoasServ">
   <form name="form">
        <p>
Nome: <input type="text" name="nome" ng-model="pessoa.nome" placeholder="Nome" ng-required="true" />
<div ng-show="form.nome.$invalid">
    <span ng-show="form.nome.$error.required">Nome.</span>
    <span ng-show="form.nome.$error.text">Nome Inválido.</span>
</div>
</p>

<p>
E-mail: <input type="email" name="uEmail" ng-model="pessoa.email" placeholder="E-mail" ng-required="true" />
<div ng-show="form.uEmail.$invalid">
    <span ng-show="form.uEmail.$error.required">Email.</span>
    <span ng-show="form.uEmail.$error.email">Email invalido.</span>
</div>
</p>

<p><!-- data YYYY/MM/dd -->
Nascimento: <input type="date" name="dataNasc" ng-model="pessoa.nascimento" placehoder="digita data" ng-required="true" />
<div ng-show="form.dataNasc.$invalid">
 <span ng-show="form.dataNasc.$error.required">Data Nascimento.</span>
 <span ng-show="form.dataNasc.$error.date">Data Nascimento Invalida.</span>
</div>
</p>

<p><!-- data YYYY/MM/dd -->
Data Corrente: <input type="date" name="dataCorrente" ng-model="pessoa.dataCorrente" placehoder="digitar data" ng-required="true" />
<div ng-show="form.dataCorrente.$invalid">
 <span ng-show="form.dataCorrente.$error.required">Data Corrente.</span>
 <span ng-show="form.dataCorrente.$error.date">Data Corrente Invalida.</span>
</div><!-- form.$submitted  -->
</p>

<p>
<h3>Idade Calculada:</h3>
<h3 name="idade" ng-bind='idadePessoa.idade' ng-required="false"></h3>
<div ng-show="form.idade.$invalid">
<span ng-show="form.idade.$error.required">Idade.</span>
<span ng-show="form.idade.$error">Não e valida.</span>
</div>
</p>

<p>form.$valid = {{form.$valid}}</p><br/>
<button ng-click="calculaIdade(pessoa)" ng-disabled="form.$invalid">Calcular</button><br/>
</form>

</body>
</html>

O Formulário acima usa a função calculaIdade(pessoa) para fazer a execução do serviço e retornar o resultado em idadePessoa.idade.
Esse post mostra uma introdução da criação de serviços, porém vamos fazer um outro integrando RestFull.

About the author

Clayton Casteli

Atua com desenvolvimento de software, J2EE, C/C++, IBM BPM. É entusiasta de novas tecnologias, principalmente open source. Formado em Engenharia da Computação pela PUCCAMP-SP, Pós-Graduado pela UNICAMP em Engenharia de Software com enfase em SOA e Pós-Graduado em Business Intelligence pelo IBTA.

Be Sociable, Share!

Protected by WP Anti Spam