AngularJS Directive vs Service vs Controller

Я збираюся розпочати реалізацію запиту на зміну на внутрішньому веб-сайті моїх компаній, який перевірить купу полів та виділить їх, якщо вони відповідають певним вказівкам. Наприклад, якщо дата народження є сьогодні, це поле буде окреслено, а підказка напише "Побажайте їм щасливого дня народження!".

Технічні характеристики просять, щоб це було завантажено після рендерингу сторінки, тому це не збільшить час завантаження. Оскільки я новачок у angularJS, я не впевнений у «правильних» способах цього зробити.

Проблеми:

Оскільки це включає додавання меж та атрибутів зображень та заголовків (маніпуляція DOM), здається, я повинен використовувати директиву.

Однак це не буде багаторазовим або «коротким», як здається, більшість директив.

Половина даних, які мені потрібно перевірити, буде повернуто в початковому дзвінку під час завантаження сторінки, тому я хотів би зберегти це, а не витрачати ще один дзвінок на його повторне звернення, що змушує мене вважати, що послуга буде корисною для зберігання всіх цих даних.

Я знаю, як це зробити у контролері, але це погано поганий код: P

Будь-які ідеї про найкращий спосіб зробити це? В основному, мені знадобиться http-дзвінок, щоб перевірити всі дані, які повернуть об’єкт зі значеннями bool для кожного типу "Виклик", який мені потрібно зробити. Тоді я перегляну цей список, і якщо значення буде істинним, додамо рамку, зображення та текст підказки.

Я не впевнений, чи це питання досить чітке, тому, якщо ви хочете, щоб я додавав деякі деталі, будь ласка, запитайте. Дякую!

Ви маєте рацію, в грі є багато варіантів.

Контролер - хороше місце, щоб почати писати щось нове в кутовому. Прив’язання контролера до фрагмента розмітки дозволяє використовувати вже наявну бібліотеку директивів angular із наявними послугами angular.

Після дуже короткого часу життя з цим ви зрозумієте, що ваш контролер став занадто великим. Ну а тепер прийшов час рефакторингу. Ось загальні рекомендації, до яких я схильний дотримуватися.

• Контролери: контролери додають та керують значеннями та функціональними можливостями, прив'язаними до області "$". У кінцевому рахунку $-сфера має тенденцію до сильної презентації . IE його модель перегляду.
• Послуги: послуги, як правило, пов'язані з інфраструктурою, заднім числом або іншими функціями браузера
• Директиви: директиви дозволяють інтегруватися з подіями / функціональними можливостями DOM, якими не займаються існуючі обробники.

Тож вам потрібно буде натиснути код в одному з трьох напрямків:

1. Код з мого контролера - це логічно інший фрагмент даних / логіки презентації, і його слід розділити на інший контролер . Зауважте, що при роботі з елементами в $ range, найкраще відокремлювати частини, за які відповідає кожен контролер, на власні об'єкти в $ range. Наприклад, $ range.creditCard. [Blah] для одного контролера проти $ range.billingAddress. [Bla] для іншого контролера. Це допомагає запобігти виникненню проблем з використанням у протоколі успадкування прототипу в області "$ range".

2. Код від мого контролера - це частина інфраструктури додатка або код утиліти, який, можливо, потрібно надсилати через додаток, і його слід розділити на службу

3. Код мого контролера сильно стосується організації презентації / DOM, і тому його слід розділити на власну директиву

Прикладом 1. може бути обробка кредитної картки, що вводить / підтверджує, окремо від решти форми оплати. У вас буде купа логіки кредитної картки в контролері, окремому від логіки надання користувачам введення адрес, тому вони будуть логічно окремими контролерами.

Прикладом 2 може бути переміщення частини, яка спілкується із сервісом резервного обслуговування кредитних карт, щоб прийняти / відхилити платіж. Або іншим прикладом може бути модуль, який спілкується з бекендом для обробки API створення користувачів.

Прикладом 3 може бути створення якоїсь функції автоматичної вкладки, яка переміщує курсор між 4 полями редагування після введення 4 номерів для кредитної картки.

Відповідно розділіть додаток.