Diretiva AngularJS x Serviço x Controlador

15

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!

Bobo
fonte
1
Por que você precisa usar apenas 1 dos 3? Parece-me que uma combinação de pelo menos diretivas e serviço / controlador seria melhor aqui.
Pete
Uma combinação também é boa, estou confuso sobre como isso deve funcionar.
Bobo
Desculpe, isso está nos comentários, não há tempo para uma resposta adequada. Sua ligação para criar dados provavelmente entraria em um serviço. Esse serviço deve ser injetado no seu controlador. Se você precisar fornecer alguma lógica para a visualização desses dados, ela será inserida no controlador. Por fim, sua visão deve usar suas diretivas que podem usar qualquer lógica que você possa ter exposto no controlador.
Pete

Respostas:

27

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.

  • Controladores: controladores anexam e gerenciam valores / funcionalidades vinculados ao escopo $. Por fim, o escopo $ tende a ser fortemente direcionado à apresentação . IE é um modelo de exibição.
  • Serviços: os serviços tendem a se vincular à infraestrutura, back-end ou outros recursos do navegador
  • Diretivas: as diretivas permitem a integração com eventos / funcionalidades do DOM não tratados pelos manipuladores existentes.

Então, você deseja enviar o código em uma das três direções:

  1. 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.

  2. 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

  3. 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.

Doug T.
fonte
Isso realmente me ajudou a entender mais sobre angular. Muito obrigado :)
Bobo