AngularJS: зачем директивы, сервисы, контроллеры

В начале работы с AngularJS не всегда бывает очевидно какую сущность фреймворка когда использовать.
С опытом это понимание, конечно, приходит, а пока его нет можно искать ответы у тех, кто сколько-либо уже продвинулся в этом направлении.

Пост вроде такого я хотела бы передать себе в прошлое 😉

Директива (directive)

Директивы вызывают, пожалуй, больше всего непонимания.
О них стоит вспомнить, если вам нужно как-то расширить html, сделать работу с ним более удобной, вставить какой-либо код только при определенном условии на лету и т.д.

Допустим вам не хватает тега с определенным свойством, поведением.
Например, чтоб тег выводил сколько времени назад произошло то или иное событие. Код, превращающий полученную дату в секундах в фразу «2 часа назад», находится внутри директивы.

Причем, вам эта директива может понадобиться и чтобы вывести сколько времени прошло с последнего захода пользователя, и сколько времени назад написано какое-либо сообщение.

Таким образом, директива спасает от повторного использования кода и выносит манипуляции с Dom в отдельную сущность — директиву.
Хорошие примеры директив можно изучить в списке уже встроенных в AngularJS: это, например, ng-show.
Рассмотрим:

В данном случае директива имеет тип — атрибут, в нее передается значение переменной pressed. Если значение true, то элемент показывается.
Как видите для того, чтобы осуществить скрытие и показ элемента нам не пришлось писать ни одной строчки js. А задача довольно распространенная. Также мы использовали и другую встроенную директиву ng-click. От обычного click она отличается связью только со своей областью действия.

Контроллер(Controller)

С контроллером все довольно однозначно — в нем находится бизнес-логика, т.е.зачастую весь основной код,  который необходим для конкретной части приложения.

Когда-то в контроллере считалось нормальным использовать $scope для связывания его с видом.
Но в последствии от $scope отказались, так как, например, через него можно было случайно изменить данные родительского контроллера в дочернем. В общем, для того, чтобы изолировать каждый контроллер лучше использовать controller as синтаксис. Это упрощает код.

Давайте добавим в наш простенький пример контроллера:

Теперь мы будем считать количество кликов и благодаря связи контроллера с видом выводить эти данные.

Сервис (Service)

Интересная тема — передача данных между контроллерами.
Вы, конечно, можете использовать для этого события ($on и $broadcast), но ими лучше не злоупотреблять
Любая необходимость общих данных, функций — причина для написания сервиса.
Сервис — это объект, со всеми необходимыми общими данными и функциями.

Его уже вы будете «инжектить» в контроллеры, директивы, другие сервисы.
Самый очевидный пример сервиса — это функция общения с сервером. Так как получить актуальную информацию о данных может понадобиться в различных местах приложения.

На этом у меня все, любые дополнения, вопросы крайне одобряются 🙂