Estou prestes a começar a implementar uma solicitação de alteração no site interno da minha empresa, que verificará vários campos e os destacará se eles corresponderem a determinadas diretrizes. Por exemplo, se a data de nascimento for hoje, esse campo será descrito e a dica mostrará "Deseje-lhes um feliz aniversário!".
As especificações solicitam que este seja carregado após o término da renderização da página, para não aumentar o tempo de carregamento. Como sou novo no angularJS, não tenho certeza das maneiras 'apropriadas' de fazer isso.
Problemas:
Como isso inclui adicionar bordas, imagens e atributos de título (manipulação DOM), parece que eu deveria estar usando uma diretiva.
No entanto, isso não será reutilizável ou 'curto', como a maioria das diretivas parece ser.
Metade dos dados que preciso verificar serão retornados na chamada original no carregamento da página, portanto, gostaria de salvá-la e não desperdiçar outra chamada recebendo novamente, o que me faz pensar que um serviço seria bom para armazenar todos esses dados.
Eu sei como fazer isso tudo no controlador, mas isso é um código ruim: P
Alguma idéia sobre a melhor maneira de fazer isso? Basicamente, precisarei de uma chamada http para verificar todos os dados, que retornará um objeto com valores booleanos para cada tipo de 'Chamada' que preciso fazer. Depois, examinarei esta lista e, se o valor for verdadeiro, adicione uma borda, imagem e texto da dica de ferramenta.
Não tenho certeza se essa pergunta é clara o suficiente; se você quiser que eu adicione alguns detalhes, pergunte. Obrigado!
Respostas:
Você está certo, há muitas opções em jogo.
Um controlador é um bom lugar para começar a escrever algo novo em angular. Amarrar um controlador a uma parte da marcação permite usar a biblioteca de diretivas já existente da angular com os serviços existentes da angular.
Depois de muito pouco tempo vivendo com isso, você perceberá que seu controlador ficou muito grande. Bem, agora é hora de refatorar. Aqui estão as diretrizes gerais que tendem a seguir.
Então, você deseja enviar o código em uma das três direções:
O código do meu controlador é realmente logicamente outra parte dos dados / lógica da apresentação e deve ser dividido em outro controlador . Observe que, ao trabalhar com itens no $ scope, é melhor segregar partes pelas quais cada controlador é responsável em seus próprios objetos no $ scope. Por exemplo, $ scope.creditCard. [Blah] para um controlador vs $ scope.billingAddress. [Blah] para outro controlador. Isso ajuda a evitar problemas com o uso da herança de protótipo pelo angular no $ scope.
O código do meu controlador é uma parte da infraestrutura do aplicativo ou código do utilitário, que pode precisar ser compartilhada pelo aplicativo e deve ser dividida em um serviço
O código do meu controlador está muito preocupado com a organização DOM / apresentação e, portanto, deve ser dividido em sua própria diretiva
Um exemplo de 1. pode ser manipular a entrada / validação do cartão de crédito separadamente do restante do formulário de pagamento. Você tem um monte de lógica de cartão de crédito em um controlador separado da lógica para permitir que os usuários insiram endereços, para que eles sejam logicamente separados.
Um exemplo de 2 pode ser mover a parte que se comunica com o serviço de back-end do cartão de crédito para aceitar / recusar o pagamento. Ou outro exemplo pode ser um módulo que converse com o back-end para lidar com a API de criação do usuário.
Um exemplo de 3 pode ser o de criar algum tipo de funcionalidade de guia automática que move o cursor entre as 4 caixas de edição após a inserção dos 4 números no cartão de crédito.
Divida seu aplicativo de acordo.
fonte