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.