Je suis sur le point de commencer à mettre en œuvre une demande de changement sur le site Web interne de mon entreprise, qui vérifiera un tas de champs et les mettra en évidence s'ils correspondent à certaines directives. Par exemple, si la date de naissance est aujourd'hui, ce champ sera indiqué et l'info-bulle dira "Souhaitez-leur un bon anniversaire!".
Les spécifications demandent que cela soit chargé une fois le reste de la page rendu, donc cela n'augmentera pas le temps de chargement. Étant donné que je suis nouveau sur angularJS, je ne suis pas sûr de la manière «appropriée» de procéder.
Problèmes:
Comme cela inclut l'ajout de bordures et d'images et d'attributs de titre (manipulation DOM), il semble que je devrais utiliser une directive.
Cependant, cela ne sera pas réutilisable ou «court» comme la plupart des directives semblent l'être.
La moitié des données que je dois vérifier seront retournées dans l'appel d'origine au chargement de la page, donc je voudrais enregistrer cela et ne pas perdre un autre appel à le récupérer, ce qui me fait penser qu'un service serait bien pour stocker toutes ces données.
Je sais comment faire tout cela dans le contrôleur, mais c'est du mauvais mauvais code: P
Avez-vous des idées sur la meilleure façon de procéder? Fondamentalement, j'aurai besoin d'un appel http pour vérifier toutes les données, ce qui retournera un objet avec des valeurs booléennes pour chaque type de «Call Out» que je dois faire. Ensuite, je vais parcourir cette liste et si la valeur est vraie, ajoutez une bordure, une image et un texte d'info-bulle.
Je ne sais pas si cette question est assez claire, donc si vous voulez que j'ajoute quelques détails, veuillez demander. Je vous remercie!
Réponses:
Vous avez raison, de nombreuses options sont en jeu.
Un contrôleur est un bon endroit pour commencer à écrire quelque chose de nouveau en angulaire. Lier un contrôleur à un élément de balisage vous permet d'utiliser la bibliothèque de directives existante d'angular avec les services existants d'angular.
Après une très courte période de vie avec cela, vous vous rendrez compte que votre contrôleur est devenu trop grand. Eh bien maintenant, il est temps de refactoriser. Voici les directives générales que j'ai tendance à suivre.
Vous voudrez donc pousser le code dans l'une des trois directions:
Le code de mon contrôleur est vraiment logiquement un autre élément de données / logique de présentation et doit être divisé en un autre contrôleur . Notez que lorsque vous travaillez avec des éléments sur $ scope, il est préférable de séparer les parties dont chaque contrôleur est responsable dans leurs propres objets sur $ scope. Par exemple, $ scope.creditCard. [Blah] pour un contrôleur vs $ scope.billingAddress. [Blah] pour un autre contrôleur. Cela permet d'éviter les problèmes liés à l'utilisation angulaire de l'héritage de prototype sur $ scope.
Le code de mon contrôleur est un élément d'infrastructure d'application ou de code utilitaire, qui peut devoir être partagé via l'application et doit être divisé en un service
Le code de mon contrôleur est fortement concerné par la présentation / l'organisation DOM, et doit donc être divisé en sa propre directive
Un exemple de 1. pourrait être de gérer la saisie / validation de la carte de crédit séparément du reste du formulaire de paiement. Vous auriez un tas de logique de carte de crédit dans un contrôleur distinct de la logique permettant aux utilisateurs de saisir des adresses, de sorte qu'ils seraient logiquement des contrôleurs séparés.
Un exemple de 2 pourrait être de déplacer la partie qui communique avec le service backend de carte de crédit pour accepter / refuser le paiement. Ou un autre exemple pourrait être un module qui parle au backend pour gérer l'API de création d'utilisateur.
Un exemple de 3 pourrait être de créer une sorte de fonctionnalité de tabulation automatique qui déplace le curseur entre les 4 zones d'édition après la saisie des 4 chiffres pour une carte de crédit.
Divisez votre application en conséquence.
la source