terça-feira, 26 de julho de 2016

Promise - AngularJS

    Trabalhar com WEB hoje é impensável sem usar AJAX, e quando fazemos requisições AJAX no Angular devemos trabalhar com as promises.

    Eu vou deixar o link da tradução de um artigo sobre promises e como usa-las, o material é simples e prático. Enjoy.
 
http://nomadev.com.br/angularjs-promises-promessas-o-guia-definitivo

segunda-feira, 25 de julho de 2016

SweetAlert com AngularJS


     O SweetAlert é uma biblioteca para exibir alertas mais estilizados para os usuários. Para usar é necessário baixar o arquivo CSS e JavaScript do endereço https://github.com/oitozero/ngSweetAlert.

     Criamos uma função para preparar as mensagens no arquivo do controller principal, podendo até colocar um time para que elas fechem automaticamente após um intervalo de tempo determinado.

/* Create the sweetAlert Service singleton */
function sweetAlertService() {
    this.success = function(message) {
        swal('', message, 'success');
    };
    this.warningT = function(message) {
        swal({
           title : ' ',
           text : message,
           type : "warning",
           timer : 3000
        });
    };
    this.successT = function(message) {
       swal({
          title : ' ',
          text : message,
          type : "success",
          timer : 3000
       });
    };
    this.error = function(message) {
       swal('', message, 'error');
    };
    this.warning = function(message) {
       swal('', message, 'warning');
    };
    this.info = function(message) {
       swal('', message, 'info');
    };
    this.custom = function(configObject) {
       swal(configObject);
    }
}

      Colocamos as dependências no modulo e no controller. No app coloca-se da seguinte forma:

/* Criar aplicação no angularjs. */
angular.module('meuApp',[]);

/* Criar o serviço do SweetAlert */
angular.module('meuApp').service('sweetAlertService', sweetAlertService);

     A injeção no controller fica assim:

(function() {

 angular.module('meuApp').controller('meuController', meuController);

     meuController.$inject = [ '$scope', 'sweetAlertService' ];
function meuController($scope, sweetAlertService) {
   ...
       var _self = this;
     //aqui de acordo com a minha lógica posso chamar a função e passar a mensagem que será exibida para o usuário com o SweetAlert.

   sweetAlertService.warning(“sua mensagem aqui”);
   sweetAlertService.success(“sua mensagem aqui”);

   //Como definimos as mensagens que tem o timer com T no final podemos chamá-las da mesma forma:
   sweetAlertService.warningT(“sua mensagem aqui”);
   sweetAlertService.successT(“sua mensagem aqui”);
       ...
     }
})();

É sempre bom dar uma olhada na documentação, mas o uso é bem simples. Abraços.

sexta-feira, 22 de julho de 2016

Chosen com AngularJS


      O Chosen, ou no nosso caso Angular-Chosen é uma biblioteca para a criação de SELECT's mais bonitos do que o padrão oferecido pelos navegadores. Para isso é necessário baixar os arquivos da biblioteca nos links, http://adityasharat.github.io/angular-chosen e https://github.com/leocaseiro/angular-chosen (Aconselho dar uma olhada nos dois links e escolher de onde vai baixar). Você precisa no final ter os arquivos chosen.css, angular-chosen.js e chosen-sprite.png, além dos arquivos do AngularJS é claro.
<select chosen search-threshold="10" option="controller.lstItens" data-style="btn-primary" ng-change="controller carregarResumo()" ng-model="controller .entidade.tipoItem" ng-options="item.name for item in controller .lstItens track by item.value">
</select>

ng-change: recebe o método que vai ser executado na mudança de valor do select.
ng-model: recebe a variável que vai guardar o valor escolhido do select.
ng-options: recebe item a item a lista de iten s que irá preencher as opções do select.
options: recebe a mesma lista, porém para uso do CHOSEN.
chosen: informa que o select vai usar o chosen.
search-threshold=”10”: vai habilitar um campo de busca se a lista passar de 10 itens.

      Acho que dispensa a apresentação do código do controller, uma vez que lá eu devo ter uma lista de itens chamada lstItens e esses objetos do tipo item precisam ter as propriedades name, tipoItem, e demais campos de um item.

     Porém vale lembrar de adicionar a dependência no app:

angular.module('imeuApp', [ 'angular.chosen' ]);

     É isso.
  

quarta-feira, 20 de julho de 2016

Datepicker com AngularJS


     O Datepicker é um calendário que pode ser popup ou inline que pode ser bastante customizado, porém pode dar um trabalhinho para ficar como queremos. Vou deixar o código de um simples que eu fiz e uma dica: O que você não conseguir customizar através do objeto no JavaScript, tente fazer passando como propriedade na TAG html do input. Apesar de ter uma propriedade que recebe um objeto de configurações, pelo menos até a data que eu testei, não são todas as propriedades do objeto que ele reconhece para configurar o datepicker, por exemplo: se deve ser popup ou inline, o formato da data, esconder os botões que vem por padrão na parte inferior, etc... tendo que estas serem configuradas no input.
    
      Baixe o CSS e o JavaScript do link: https://angular-ui.github.io/bootstrap

<p class="input-group">
     <label class="fg-label" for="txtInicio">Início</label>
     <input type="text" name="dataIni" class="form-control" ng-model="controller .parametros.dataInicio" show-button-bar="false" uib-datepicker-popup="dd/MM/yyyy" is-open="controller.openDatIni" datepicker-options="controller .options" alt-input-formats="!d/!M/yyyy" maxlength="10" onkeyup="formatDate(this);">
     </input>
     <span class="input-group-btn">
         <button type="button" class="btn btn-default" ng-click="controller .opened('dataIni')" uib-tooltip="Abrir Calendário" style="margin-top: 25px;">
             <i class="glyphicon glyphicon-calendar"></i>
         </button>
     </span>
</p>

      No Controller o que fiz foi configurar uma variável para saber se o datepicker está aberto ou fechado e o objeto passado como parâmetro no input.

. . .

_self = this;
_self.parametros = {};
_self.openDatIni = false;

/**
* método que verifica se o datepicker está aberto.
*/
_self.opened = function(datepicker) {
    if (datepicker == 'dataIni') {
        _self.openDatIni = true;
    }
};

/**
* propriedades passadas para os datepicker's
*/
_self.options = {
    showWeeks : false,
    showButtonBar : false,
    autoclose : true,
    language : "pt-BR",
};

. . .


Também fiz uma função para a mascara da data:

. . .
 
/**
* Máscara para data, sem validar, apenas formata.
*
* @param component
*/
function formatDate(component) {
     var v = component.value;
     if (v.match(/^\d{2}$/) !== null) {
         component.value = v + '/';
     } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
         component.value = v + '/';
     }
};

. . .
     Dessa forma, o datepicker está pronto para ser usado... mas existe uma série de configurações adicionais que vale a pena dar uma estudada como trabalhar com feriados, etc... 
    
        Até a próxima...

segunda-feira, 18 de julho de 2016

Modal Angular-UI


    O Modal é uma forma de abrir um frame e carregar algum conteúdo como imagem, formulário, aviso, vídeo, etc. Vou mostrar como usei o modal para criar um form. É possível passar um objeto para o modal e também receber um objeto no fechamento desse modal como no foi feito nesse caso.

     Na aplicação existe o HTML principal e o Controller dessa página principal que é onde defini-se a aplicação (angular.module) e o controller principal.
Baixe as bibliotecas do projeto em https://angular-ui.github.io/bootstrap e coloque no seu projeto.

     Vamos primeiro ao controller. Nele eu criei uma função chamada openPopup(item) a qual eu irei invocar do meu HTML passando passando um item que é um objeto criado e preenchido pelo angular no HTML. (Não vou entrar em detalhes de como trabalhar com objetos no JavaScript e Angular, basta dizer que quando chamar essa função ele já existe e está preenchido).

     Criação do app:

angular.module('liberacaoApp', [ 'ui.bootstrap']

     Criação do Controller principal:

angular.module('liberacaoApp').controller('LiberacaoController', LiberacaoController);

    Injeção das dependências no controlle:

LiberacaoController.$inject = [ '$scope', '$uibModal'];

    Criação da função controller com a função que abre o modal:

function LiberacaoController($scope, $uibModal){

    var _self = this;
    . . .

    /**
     * Abrir a popup para aprovar, negar ou detalhar um liberação.
    */
    _self.openPopup = function(item) {
        var modalInstance = $uibModal.open({
             animation : true,
             //Defino o HTML que vou carregar no modal
             templateUrl : 'popupAprovacao.html',
             //Defino o Controller que vai ser responsável pelo HTML
             controller : 'PopupAprovacaoController',
             //Defino um alias para o controller
             controllerAs : 'popAprCtrl',
             //posso também definir um tamanho entre sm(small), md(middle) ou lg(large).
             size: 'md',
             //Passo o item para o controller do Modal
             resolve : {
                  pendencia : function() {
                      return item;
                  }
             }
        });
        // Pego o OBJETO retornado do Modal e uso no controller principal e consecutivamente no HTML principal.
        modalInstance.result.then(function(retorno) {
             _self.carregarResumo(retorno);
             _consultarDetalhes(retorno);
        });
    } 

    //Restante do meu controller principal...
    . . .
}

     Na instância do modal quando passei a seguinte propriedade: templateUrl : 'popupAprovacao.html' estava dizendo qual arquivo HTML queria que o modal carregasse. Esse arquivo está na mesma hierarquia do HTML pricipal. Segue um exemplo de parte desse HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- build:css -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/material-icons.css" rel="stylesheet" />
<link href="css/sb-admin-2.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
<link href="css/morris.css" rel="stylesheet" />
<link href="css/liberacao.css" rel="stylesheet" />
<!-- endbuild -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
    <div style="padding-bottom:10px;padding-top:10px;">
         <form>
             <div class="form-group col-lg-6 col-md-6">
                 <label class="labelDetalhe" for="apNumOS">Número OS</label>
                 <input class="form-control" value="{{::popAprCtrl.pendencia.itaSeqItemAtendimento}}" id="apNumOS" type="text" readonly="readonly" />
             </div>
             <div class="form-group col-lg-6 col-md-6">
                 <label class="labelDetalhe" for="apStatus">Status Real</label>
                 <input class="form-control" value="{{::popAprCtrl.pendencia.enumStatus}}" id="apStatus" type="text" readonly="readonly" />
             </div>
             <!--Restante do formulário-->
             . . .
             </div>
         </form>
         <!--Botões-->
         <div class="direita" id="botoesAprovacao" style="padding-right:10px;">
             <button ng-click="popAprCtrl.voltar()" class="btn btn-default"><i class="fa fa-reply-all"></i></button>
             <button ng-click="popAprCtrl.negar()" class="btn btn-danger">Negar</button>
             <button ng-click="popAprCtrl.aprovar()" class="btn btn-success">Aprovar</button>
         </div>
    </div>
</body>
</html>

     Note que o arquivo HTML é escrito como qualquer outro, inclusive foi preciso setar os includes dos arquivos .CSS. Já os arquivos JavaScript não houve necessidade da importação, o que foi feito apenas no HTML pricipal.
     Os botões fazem chamadas a funções do controller PopupAprovacaoController pelo alias popAprCtrl passado na hora da criação da instancia do popup. Abaixo segue o código do popupaprovacao.controller.js.

angular.module('liberacaoApp').controller('PopupAprovacaoController', PopupAprovacaoController);

PopupAprovacaoController.$inject = [ '$uibModalInstance', 'pendencia'];

function PopupAprovacaoController($uibModalInstance, pendencia) {
      var _self = this;
      _self.pendencia = pendencia;
/**
* Aprovar a liberação.
*/
     _self.aprovar = function() {
         //executa outras coisas
         . . .
         //fecha o modal passando um objeto para o controller principal
         $uibModalInstance.close("DEFERIDA");

     };
/**
* Negar a liberação.
*/
     _self.negar = function() {
         //executa outras coisas
         . . .
         //fecha o modal passando um objeto para o controller principal
         $uibModalInstance.close("INDEFERIDA");
     };
/**
* Fechar a tela de aprovação sem aprovar ou negar.
*/
     _self.voltar = function() {
          $uibModalInstance.close();
     };
}

     Espero ter ajudado.