AngularJS. Правильное использование сервисов

#javascript #angularjs

                    
В стайл-гайде по Ангуляру от Тода Мотто есть пример использования сервиса в контроллере
"Presentational logic only (MVVM)":

// recommended
function MainCtrl (UserService) {

  var vm = this;

  UserService
    .getUsers()
    .then(function (response) {
      vm.users = response;
    });

  vm.removeUser = function (user, index) {
    UserService
      .removeUser(user)
      .then(function (response) {
        vm.users.splice(index, 1);
      });
  };

}


Я давно подозревал, что делаю что-то крайне не модно, т.к. мои фабрики настолько
автономны, что контроллер остается почти без работы. Использую фабрики так:

function UserService () {

  var api = {
    loaded: false

    getData: getData
  }

  return api;

  function getData() {

    // Получение данных

    api.loaded = true;
  }
}

function MainCtrl (UserService) {

  var vm = this;

  vm.userService = UserService;

  // Использую api фабрики в контроллере, если нужно получить некие входные данные
  UserService.getData()

}


Дальше работаю с фабрикой напрямую в шаблоне, вызывая нужные методы в директивах(ng-click,
ng-mouseover, ng-hide, ...)
То есть получается просто пробрасываю фабрику во view через контроллер.

Помогите культивировать в мозгу логику по которой нужно отделять работу фабрики от
работы контроллера.
    

Ответы

Ответ 1

Попробую объяснить:   

Контроллеры предназначены для обрабатывания событий от пользователя (ng-click, ng-change,
и других ng директив, весь список здесь ).
Фабрики или сервисы синглтоны(а чем они отличаются читать тут) , которые предназначены
для получения необходимых данных с БД и кукисов, или же мы сами можем сохранять в них
необходимые данные, чтобы потом использовать их по нашему усмотрению.  

Ангуляр это MVW(Model-View-Whatever) фреймворк, это означает, что мы можем использовать
и MVC и MVVM паттерны(статья). Но структуру работы буду объяснять по MVC.

Основная схема:
Контроллер получает событие от пользователя, потом берет нам необходимые данные с
Фабрики, сохраняет все эти данные в $scope
контроллера, и после чего отображает все это в View.


Ответ 2

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


из сервиса получаются нужные данные, 
в зависимости от принятого в приложении подхода эти данные записываются либо в св-во
скоупа либо в св-во контроллера (Controller As syntax). 
И только потом к ним можно обратиться из шаблона.