По просьбам трудящихся продолжаю серию постов на тему “С чего начать изучение AngularJS” (часть1, часть2). В этой части я постараюсь вкратце осветить применение сервисов в AngularJS.
UPD: Статья обновлена 1.11.2016
Итак, что такое сервисы? Это по большому случаю то, что не попадает под определение представления.
Основное предназначение сервисов:
- логика (бизнес логика) приложения
- коммуникация между виджетами
- уровень данных и запросы к серверу
- хранение состояния
Логика приложения
Приведу простейший пример: допустим нам нужно сделать приложение-калькулятор. Для этого в сервис поместим все операции по вычислению:
[javascript]
app.service(‘Calculator’, function(){
this.add = function(a, b){
return a + b;
};
this.subtract = function(a, b){
return a – b;
};
this.multiply = function(a, b){
return a * b;
};
this.divide = function(a, b){
return a / b;
};
});
[/javascript]
теперь мы можем подключить нашу зависимость – сервис Calculator – в контроллер компонента и использовать его методы:
[javascript]
controller: function(Calculator) {
this.result = Calculator.add(this.a, this.b);
});
[/javascript]
Полный пример можно посмотреть тут.
Коммуникация между виджетами
Передача данных между сущностями Ангуляра довольно подробно рассмотрена в этом посте. Ничего тут особого нет: в одном месте инжектим сервис, задаем значение, инжектим вдругом месте, читаем/меняем значение.
Уровень данных и запросы к серверу
Уровень данных( или наши модели данных), который включает ajax-запросы к серверу. Давайте напишем простую модельку User с двумя методами:
[javascript]
app.service(‘User’, function(){
var endpoint = ‘http://jsonplaceholder.typicode.com/users’;
this.get = function(id){
return $.get(endpoint + ‘/’ + id);
}
this.getAll = function(){
return $.get(endpoint);
}
});
[/javascript]
теперь мы можем получить пользователей сервера и передать их в контроллер компонента по средством нашего сервиса:
[javascript]
controller: function ($scope, User) {
User.get(9).then(user => {
this.title = {
selectedUser : user
}
$scope.$apply();
});
User.getAll().then(users => {
this.users = users;
$scope.$apply();
});
});
[/javascript]
С полным примером можно поиграться тут.
!Внимание: для получения даных с сервера был использован метод jQuery – $.get(). Это было сделано лишь с той целью, чтобы упростить пример и сфокусироваться больше на рассмотрении модели даных, а не способа их получения. В реальных проектах для получения данных лучше использовать сервис $http, а еще лучше его обертку типа Restangular или $resource.
Хранение состояния
Идея в том, что контроллеры могут быть перезагружены в процессе работы приложения, поэтому мы не можем гарантировать, что данные приложения сохраненные в контроллере сохранятся.
Простейший пример этому будет сервис авторизации и хранение значение авторизирован ли пользователь или нет:
[javascript]
app.service(‘Auth’, function(){
this.isAuthorized = false;
this.login = function(){
this.isAuthorized = true;
}
this.logout = function(){
this.isAuthorized = false;
}
});
[/javascript]
Полный пример тут.
Типы сервисов
AnguarJS уже содежит в себе большой набор сервисов, поэтому первой классификацией будет:
- нативные/встроенные сервисы AngularJS
- кастомные (написанные нами)
Если посмотреть с другой стороны, то мы можем охарактеризовать все сервисы по типу вызова провайдера:
Теперь пару слов о каждом, плюс примеры.
constant и value
Оба типа служат для хранения каких либо изначальных настроек, конфигурационных опций и параметров по умолчанию. Значением может быть как примитив так и объект.
Отличие между constant и value заключается в том, что значение константы задается при определении и не может быть изменено другим путем. Плюс константа может быть внедрена в config(), а value может быть использована, только в последующих стадиях (например run())
service, factory и provider
По сути одно и тоже. Уже было довольно подробно описаны тут и тут.
Если вы начинающий AngularJS разработчик (а этот пост именно для таковых) рекомендую ограничится пока только использованием service.
декораторы
Декораторы или декорирование сервис провайдеров создано для модификации, переопределения, расширения сервисов на этапе конфигурации. Как мне кажется, наилучшее для них применение – это модификация сторонних библиотек, которые мы не хотим править напрямую.
Рекомендую ознакомиться с вот этой статьей о внедрении зависимостей и месте декораторов в этом процессе.
Если что-то не понятно – пожалуйста задавайте вопросы в комментариях – я постараюсь обновить пост исходя из вопросов.