4

Seguinte pessoal, estou desenvolvendo um webapp onde tenho uma área administrativa bem ampla, com diversas funções. Em um outro projeto que fechei a poucos dias foi solicitado também uma área administrativa com diversas funções que são semelhantes a esse que já estou desenvolvendo, como um sistema de ticket, por exemplo.

Comecei a desenvolver um novo módulo (primeira vez que tento um modulo que possa ser reutilizável) porém, não tenho experiência nisso e sei que pode ser melhorado.

O que eu possuo?

No momento eu tenho um código, já funcional, porém ele possui algumas dependências que sei que podem ser melhoradas. Este é um exemplo bem enxuto do código:

angular.module('agChecklist',[])
.run(['$rootScope','$stateParams','factList', function ($rootScope,$stateParams,factList) {
    //... algumas definições iniciais com $rootScope ...\\
}])

.factory('factList', ['localStorageService', function (localStorageService) {
    var _getCache = function() {
        return JSON.parse(localStorageService.get("list"));
    };

    return {
        getCache: _getCache
    };

    //... outras factorys ...\\
}])

.controller('ListCtrl',
['$rootScope','$scope','$stateParams',...[mais]...,
function($rootScope,$scope,$stateParams,...[mais]...) {
    $scope.addItem = function(event) {
        //adiciona item para a lista
    };

    $scope.removeItem = function(event) {
        //remove item da lista
    };

    //... mais funções que o usuário pode executar ...\\
}]);

Neste caso, seria um módulo que adiciona produtos à uma lista para fazer um checklist de ordem de serviço, etc.. Coisa simples.

O "problema"

Na verdade não chega a ser um problema, mas sim uma otimização de código.
Atualmente quando eu preciso utilizar esse checkList eu preciso definir o controller ListCtrl na ou nas views que eu precise dele.

O que acaba criando uma necessidade de verificações muito complexa, pois existem definições iniciais que um outro controller precisaria ler antes de ser iniciado. Por exemplo, ao dar refresh, ele recarrega o cookie e monta a lista de onde o usuário parou. Então essa definição deve acontecer antes de outro controller. Caso contrário a aplicação não funcionaria (no momento está ok).

Outro motivo é de que o módulo não é carregado ao iniciar o app. Estou utilizando o módulo ocLazyLoad que vai carregar todos os arquivos do módulo CheckList somente nas views que eu precise.

O que eu notei

Analisando outros módulos, notei que é bem utilizando o .run, .factory, .directive e .service.

  • .run: usado para definições iniciais, como array inicial vazio, etc;
  • .factory: para request de api externo (normalmente);
  • .directive: para criação dos módulos ui que irão criar a interação do usuário com o app;
  • .service: Para gerenciar as funções que o usuário chama, etc. Todo comportamento de funções e comunicação entre interação do usuário com a interface e respostas do app;

Com isso minha dúvida é a seguinte?

  • Como devo proceder para criar um módulo reusável em outros projetos a partir do código que já possuo?
  • Quais seriam os best practices para criação de módulos?
  • Este é mesmo o melhor caminho? Ou existem outros melhores/mais fáceis/mais corretos, etc..?

Qualquer consideração e/ou opinião que vocês venham ter, por favor, compartilhem! Quero muito melhorar esse desenvolvimento de código.

1 Resposta 1

3

Alguns pontos importantes sobre a definição de módulos reutilizáveis:

  • O nome do módulo não pode ser algo simplista que possa já existir na aplicação (isto geraria conflitos no angular), muitos desenvolvedores colocam seus sobrenomes no início do nome do módulo, como "trindade.agCheckList"
  • A mesma regra acima, vale para controllers, no final, eles são embalados todos juntos no Angular.

O fluxo do run é ideal para fazer checagens antes de iniciar um módulo, apesar que muitas dependência como cookies que não são criados por este módulo, incitam ao não reúso, o que é totalmente desaconselhável.

Sobre a definição de rotas, o seu módulo pode fazê-lo, sendo assim, ele já injetaria a rota previamente definida, mas particularmente, isso é bem estranho, pois haverão casos em que o sistema pode não utilizam o mesmo sistema de rotas, ou tão pouco lazyLoad.

Quanto a definição de service e factory, ela está parcialmente correta, a verdade é que esses dois no angular servem para praticamente a mesma coisa, tanto é que no Angular 2 serão juntados em apenas um.

Sobre a pergunta feita nos comentários com relação a controller vs diretivas, eu particularmente acredito que a ideia inicial não deve ser deturpada, diretivas são para componentes reutilizáveis, se você conseguir realmente extrair o comportamento daquele componente, de maneira que ele não dependa de nada mais do seu sistema, então certamente deve se tornar uma diretiva, se não conseguir, ele está intimamente ligado e provavelmente deve fazer parte de um controller. Claro que isso é opinião, o angular permite que controllers se tornem diretivas, pois elas tem controllers internamente, mas diretivas no Angular perdem em desempenho para controllers em muitos casos. Deixo o link do stack em inglês sobre o assunto: https://stackoverflow.com/questions/18757679/angularjs-directives-vs-controllers

4
  • Certo. Perfeito! Agora uma última dúvida. Já vi módulos que não utilizam .controller mas sim directives (com <i>templates</i> de UI - o 'visual' nem é o problema - ex.: botão de 'Adicionar item' que chama a função addItem) que são eles que fazem as 'chamadas' das funções e essas são executadas dentro de um .service. Esse fluxo fica melhor? O que notei com esse uso é a liberdade que temos de não precisar definir o controller no webApp, assim o módulo fica mais livre para ser usado em todo o app. 11/11/2015 às 13:11
  • Complementei a resposta com esta questão. 11/11/2015 às 13:19
  • Consegui entender a ideal geral. Em meu caso eu terei as 2 situações. Uma onde eu posso ficar independente de outras áreas, como o caso de um carrinho de compras e outra onde eu ficaria dependente, como um relatório de vendas. Mas ai, no caso do carrinho, como eu poderia criar um directive que chame uma função de um service? Apenas a parte da função mesmo que tenho dúvida. Exemplo: identificar que foi clicado e chamar a função passando alguns parâmetros, id, nome, valor, por exemplo. 11/11/2015 às 13:39
  • O seu template da diretiva, terá um evento onClick(), que acionará o controlador desta diretiva, ai é um fluxo normal, você apenas faz a chamada para o service injetado. 11/11/2015 às 13: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 .