6

Estou trabalhando com uma aplicação onde em uma view eu possuo o cadastro de produtos de uma empresa, ou de seus clientes, fornecedores, etc.. Cada view atende uma área específica, porém cada view trabalha com diversos dados e fluxo de dados, como adicionar novos itens, deletar e atualizar.

O problema que tenho notado é que, quando a view possui muitos itens, ao executar uma adição, onde é necessário fazer um reload da lista, para poder inserir o novo dado com o seu respectivo id do banco, existe uma "duplicada" de toda a lista por um breve momento. A grosso modo falando, eu insiro um novo cliente, ele faz o reload da lista, aplica toda a lista ao fim da lista que já está na view para só depois remover a lista antiga.

O código que estou utilizando não tem segredo, possui $http simples de POST e GET (meu backend é controlado por PHP) como no exemplo:

ctrl.js

//Chamada automática
    function getProduto() {
        factProdutos.getProdutos().then(function (res) {
            vm.produtos = res;
        }); 
    };

//Chamada da view
    vm.addProduto   = addProduto;

//Function - Produtos
    function addProduto(id) {
        var data = {id_empresa:id};
        $http.post('php/mainFile.php?action=addProduto', data).then(
            function(res) { getProduto(); },
            function(err) { alert(feedbackError); }
        );
    };

factory.js

function _getProdutos() {
    return $http.get("php/getFile.php?action=getProduto").then(
        function(res) { return res.data;},
        function(err) {alert(feedbackError);}
    );  
};

Para fazer a exclusão ou update não há problema, pois eu faço o processo no Banco de Dados sem necessidade de recarregar as informações, o AngularJs se encarrega de fazer isso na view. O mesmo ocorre para remover um produto da lista, apenas utilizo o $filter e excluo o elemento da array.

O problema ocorre mesmo ao fazer uma nova inserção, pois necessito do id para efetuar os processos futuros. Já li a respeito de utilizar a mesma lógica do $filter para a exclusão, porém, ao invés de remover, adicionar o novo dado.

Mas como identificar qual é o novo dado? Ou comparar a nova lista carregada com a lista que está atualmente na minha view? Ou ainda, este é o melhor modo de fazer essa otimização, ou existe um método melhor?

Não se trata bem de um erro, mas sim de uma otimização do fluxo de dados.

8
  • A sua action addProduto (no servidor) não pode devolver o ID?
    – bfavaretto
    Commented 25/11/2015 às 1:05
  • Pode sim, mas em alguns casos ele devolve alguns campos a mais. Por exemplo, o produto tem referência com uma empresa e uma seção, então ele virá com mais alguns argumentos. Commented 25/11/2015 às 1:08
  • Em situações similares eu mantenho a coleção de itens em um serviço especializado (empresasService, ClientesService) e coordeno o merge do objeto retornado com a coleção já presente na memória. Minhas views recebem apenas referências para a coleção.
    – OnoSendai
    Commented 25/11/2015 às 1:11
  • Alguma sugestão de como mesclar isso ao meu fluxo de dados @OnoSendai? Sugestões são bem vindas. Prezo pela praticidade/agilidade do código à manter um padrão pré-estabelecido por mim. Commented 25/11/2015 às 1:13
  • Depende muito do seu modelo, @CelsomTrindade - eu, por exemplo, guardo a referência do objeto sendo manipulado no momento, e no retorno do método apropriado (PUT, DELETE, etc.) eu decido a ação a ser tomada. Exponho a coleção a partir do serviço, como uma propriedade, e a mapeio diretamente no Controller.
    – OnoSendai
    Commented 25/11/2015 às 1:23

1 Resposta 1

4

Uma das maneiras possíveis para evitar este artefato (duplicação de conteúdo) é utilizar um serviço para gerenciar suas coleções, e utilizar um observer pattern para receber notificações de atualização.

(Essa demo gera conteúdo no console; no Chrome, use F12 para abrir as ferramentas de desenvolvimento e acompanhar o conteúdo.)

Os passos seriam os seguintes:

  • Implemente Factories para acessar os endpoints REST da sua aplicação (um para coleção, outro para itens individuais).
  • Implemente um serviço que consuma os dois Factories mencionados acima, armazene o resultado das operações e coordene as operações CRUD;
  • Permita que consumidores se subscrevam para receber atualizações.

No exemplo a seguir, a biblioteca NyanJS gera automaticamente as coleções userCollectionFactory e userItemFactory, e as consome no serviço userDataService.

Os controllers SampleController e SampleController2, por sua vez, recebem injeção do serviço userDataService e se subscrevem para atualizações via método register. Um permite a exclusão de objetos com id par, e outro de objetos com id ímpar. O serviço coordena as operações e anuncia mudanças de conteúdo.

Se você precisar gerar mais entradas de teste, utilize a seguinte URL: http://www.mockapi.io/#/mocks/565515f70c4bde110041bff0

var app = angular.module('NyanNG', ['ngNyanStack']);

app
    .config([
        'nyanStackProvider', '$httpProvider',
        function ( nyanStackProvider, $httpProvider) {

            nyanStackProvider
                .setup({
                    RestPrefix: 'http://565515f70c4bde110041bfef.mockapi.io/data',
                    Authenticate: false,
                    PluralDescriptor: '{ScopeDescriptor}',
                })
                .module('user', {
                    RootPrefix: "data",
                    collectionName: 'User',
                    useLookupQuery: true,
                    useLocatorQuery: true,

                });

            $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }
    ]).run([
        'nyanStack', function (nyanStack) {
            nyanStack.start();
        }
    ]);
angular.module('ngNyanStack')
    .controller('SampleController', function ($scope, userDataService) {

        $scope.svc = userDataService;

        var localUpdate = function () {
            $scope.data = userDataService.data;
        };

        userDataService.register(localUpdate);

    })
    .controller('SampleController2', function ($scope, userDataService) {

        $scope.svc = userDataService;

        var localUpdate = function () {
            $scope.data = userDataService.data;
        };

        userDataService.register(localUpdate);

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="https://rawgit.com/bucknellu/Nyan/ffb7f828938ebeac31ea47f433064bd44552227c/Samples/REST/ng/res/nyan.js"></script>

<table ng-app="NyanNG">
  <tr>
    <td>
      <div ng-controller="SampleController">
        Controller 1

        <p ng-repeat="i in data">
          {{i.id}} - {{i.name}} <button ng-if="!(i.id % 2)" ng-click="svc.remove(i.id);">Delete</button>
        </p>


      </div>
    </td>
    <td>
      Controller 2
      
      <div ng-controller="SampleController2">

        <p ng-repeat="i in data">
          {{i.id}} - {{i.name}} <button ng-if="(i.id % 2)" ng-click="svc.remove(i.id);">Delete</button>
        </p>


      </div>
    </td>
  </tr>
</table>

3
  • De fato a lógica e a ideia são excelentes. No meu projeto atual não vai servir, mas já vi um excelente uso para outros que já possuo. No entanto, foi uma boa resposta para agregar. Só me incomoda o fato de ser necessário o uso de bibliotecas externas. Commented 25/11/2015 às 19:21
  • 1
    @CelsomTrindade disclaimer - eu sou o autor da biblioteca. Sinta-se à vontade para ler o código-fonte e estudar o fluxo, e é sempre um prazer ajudar!
    – OnoSendai
    Commented 25/11/2015 às 19:26
  • 1
    A sim, facilita mais. O que eu me refiro, é que muitas delas possuem falta de documentação ou muita amarração no uso. Mas como disse, vai ser útil em projetos futuros, onde ainda vou começar a desenvolver. Nesse caso em específico não serviu pois o projeto já tem um fluxo de trabalho. Mas o conhecimento foi excelente. Commented 25/11/2015 às 19:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .