gumga-controller-ng

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>gumga-controller-ng</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link rel="stylesheet" href="https://gumga.github.io/components/style.css"> </head> <body > <nav class="navbar navbar-inverse" ng-controller="VersionController as ctrl"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">gumga-controller-ng</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ctrl.version}} <span class="caret"></span></a> <ul class="dropdown-menu"> <li ng-repeat="version in ctrl.versions"><a href="../{{version}}">{{version}}</a></li> </ul> </li> </ul> </div> </div> </nav> <div class="container" ng-controller="Ctrl as ctrl"> <div class="row"> <div class="col-xs-4"> <h2>Descrição</h2> <p>O componente GumgaController foi desenvolvido como um substituto ao componente $populate. Sentimos que os desenvolvedores, ao utilizar o $populate, não entenderam muito bem o porquê da utilização do mesmo. Demos um passo atrás e chegamos neste componente que faz o que o $populate faz, porém funcionando também fora do $scope do controller, podendo ser colocado dentro de qualquer objeto. Este componente pode ser utilizado para criar os métodos que fazem conexão com o service GumgaREST, que podem ser utilizados para fazer a comunicação com o BackEnd, respeitando o modelo MVC do Angular. Além disso, ele tem suporte a eventos próprios, não necessitando do $scope.</p> <p class="text-warning"> Obs: Novo método createQuery() com ele é possível fazer ordanazações, filtros e páginação em uma única chamada, onde você pode usar o aq ou o gQuery. </p> </div> <div class="col-xs-8"> <h3>Instalação</h3> <pre><code class="prettyprint">// npm npm i gumga-controller-ng --save // bower bower install gumga-controller-ng --save //Injeção do modulo angular.module('yourApp', ['gumga.controller']); <script src="node_modules/gumga-counter-ng/dist/gumga-controller.min.js"></script> <script src="bower_components/gumga-counter-ng/dist/gumga-controller.min.js"></script></code></pre> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Populando o controller</h3> </div> <div class="panel-body"> Quando você utiliza o gumga controller, ele cria seu escopo vários métodos que te ajudam na comunicação com o backend. <br> O controller depende de um serviço que seja um GumgaRest, sua documentação você encontra em <a href="https://gumga.github.io/gumga-rest-ng">https://gumga.github.io/gumga-rest-ng</a><br><br> No exemplo iremos conectar a um serviço de "cliente" para podermos fazer buscas, alterações, deleções etc... <br> Chame o método <b>createRestMethods</b> passando seu escopo, seu serviço e um nome na qual faremos a criação dos métodos. <pre><code class="prettyprint">angular.module('yourApp', ['gumga.controller']) .service('ClienteService', function(GumgaRest){ var service = new GumgaRest('http://www.minhaaplicacao.com.br/api/cliente'); return service; }) .controller('ctrl', function($scope, ClienteService, gumgaController){ gumgaController.createRestMethods($scope, ClienteService, 'cliente'); })</code></pre> Perceba que como ultimo parâmetro passamos o valor "cliente", o gumga controller criará uma variável com esse nome informado dentro do seu escopo.<br> Após fazer a chamada do <b>createRestMethods</b> você já pode chamar os métodos criados. <br> <br> Exemplo de uma chamada GET. <pre><code class="prettyprint">$scope.cliente.methods.get()</code></pre> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Filtrando, ordenando e páginando</h3> </div> <div class="panel-body"> <pre><code class="prettyprint">$scope.pessoa.methods.createQuery() //Cria um QueryObject .pageSize(10) //Quantidade de registros por página .page(1) //Página que será buscado os registros .sort('name', 'desc') //Ordenação dos registros .gQuery(new GQuery(new Criteria('name', ComparisonOperator.CONTAINS, 'ma'))) //Filtro usando GQuery. .send() //Faz a chamada ao backend. .then( resp => { console.log(resp); }, err => { console.log(err); } )</code></pre> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Métodos criados pelo controller</h3> </div> <table class="table table-striped"> <thead> <tr> <th>Método</th> <th>Descrição</th> <th>Retorno</th> </tr> </thead> <tbody> <tr> <td><strong>createQuery()</strong></td> <td>A função createQuery é a função que te ajuda a criar um QueryObject, objeto que o backend espera para filtros ordenações etc...</td> <td><code>[QueryObject]</code></td> </tr> <tr> <td><strong>createRestMethods(container, service, config/id)</strong></td> <td>A função createRestMethods é a função responsável pelo comportamento de criar os métodos do controlador. Ela cria um objeto que serve para agrupar os comportamentos. O objeto tem o seguinte formato</td> <td><code>[VOID]</code></td> </tr> <tr> <td><strong>post(value)</strong></td> <td>Função responsável por fazer o post de um novo registro.</td> <td><code>[EVENT]</code></td> </tr> <tr> <td><strong>put(value)</strong></td> <td>Função responsável por fazer o put de um registro.</td> <td><code>[EVENT]</code></td> </tr> <tr> <td><strong>get(params)</strong></td> <td>O método get aceita um parâmetro params e retorna uma promise de uma chamada HTTP do tipo GET.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>resetAndGet()</strong></td> <td>O método resetAndGet reseta a query atual e performa uma chamada HTTP do tipo GET.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getById(id)</strong></td> <td>O método getById aceita um parâmetro id e retorna uma promise de uma chamada HTTP do tipo GET.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getNew()</strong></td> <td>O método resetAndGet reseta a query atual e performa uma chamada HTTP do tipo GET.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>delete(data)</strong></td> <td>O método delete recebe como parâmetro um objeto que será deletado. O objeto deve ter um parâmetro ID, que será passado para a url da chamada.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>sort(field, way)</strong></td> <td>O método sort recebe dois parâmetros para fazer a ordenação: field e way, que determinarão qual campo será ordenado e se será 'asc' ou 'desc'.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>deleteCollection(array)</strong></td> <td>O método deleteCollection aceita um parâmetro array e retorna uma promise de uma série de chamadas http do tipo DELETE que serão resolvidas ao mesmo tempo.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>saveImage(attribute, data)</strong></td> <td>O método saveImage aceita dois parâmetros attribute e data e retorna uma promise de de uma chamada HTTP POST FORM-DATA.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>deleteImage(attribute, data)</strong></td> <td>O método deleteImage aceita dois parâmetros url e data e retorna uma promise de de uma chamada HTTP DELETE FORM-DATA.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getSearch(field, param)</strong></td> <td>O método getSearch aceita dois parâmetros field e param e retorna uma promise de uma chamada HTTP do tipo GET.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getAdvancedSearch(param)</strong></td> <td>O método getAdvancedSearch aceita um parâmetro param e retorna uma promise de uma chamada HTTP do tipo GET.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>redoSearch()</strong></td> <td>O método redoSearch é usado para resgatar o estado do último query. </td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>resetDefaultState()</strong></td> <td>O método resetDefaultState retorna o objeto de query ao seu estado padrão.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>saveQuery(query)</strong></td> <td>O método saveQuery aceita um parâmetro query e retorna uma promise de uma chamada HTTP do tipo POST.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getQuery(page)</strong></td> <td>O método getQuery aceita um parâmetro page e retorna uma promise de uma chamada HTTP do tipo GET. Este Parâmetro page é o valor de retorno do objeto location.hash disponível através do browser. É necessário este atributo para pegar apenas as queries relacionadas a página. As informações do usuário já são passadas através do token.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getSelectedTags(id)</strong></td> <td>O método getSelectedTags aceita um parâmetro id e retorna uma promise de uma chamada HTTP do tipo GET. Este Parâmetro id é o identificador da entidade que está sendo editada. Este atributo é necessário para buscar apenas as tags que estão ligadas aquele registro.</td> <td><code>[HttpPromise]</code></td> </tr> <tr> <td><strong>getAvailableTags()</strong></td> <td>O método getSelectedTags não necessita de parâmetros e retorna uma promise de uma chamada HTTP do tipo GET. </td> <td><code>[HttpPromise]</code></td> </tr> </tbody> </table> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.6.3/angular-locale_pt-br.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <script src="dist/gumga-controller.min.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="https://gumga.github.io/components/app.js"></script> </body> </html>