Сервисы

Последнее обновление: 26.04.2017

Сервисы AngularJS представляют специальные объекты или функции, выполняющие некоторые общие для всего приложения задачи. В AngularJS имеюся ряд встроенных сервисов, такие как $http, $q и ряд других. Кроме того, имеется возможность создавать свои сервисы для выполнения специфических задач.

Использование сервисов

Чтобы создать сервис, нам надо использовать метод factory. Данный метод, как говорит название, представляет фабрику для создания сервиса. Причем сервис реализует паттерн синглтон, что значит, что для всего приложения будет создан только один экземпляр, и из любого места приложения будет идти обращение к этому единичному объекту. Например, используя сервисы, мы можем определить данные в некотором внешнем источнике и из него уже затем эти данные подгружать. Но для начала создадим свой сервис, который будет определять данные для контроллера.

Посмотрим на примере. Создадим новый проект. Сначала в него добавим папку js. А в этой папке определим файл app.js со следующим кодом:

var questApp = angular.module('questApp', []);

То есть наше приложение будет называться questApp.

Также в папке js определим файл сервиса dataService.js со следующим содержанием:

questApp.factory('dataService', function(){
	return{
		question:{
			text: 'Какой js-фреймворк лучше использовать?',
			author: 'Иван Иванов',
			date: '20/10/2013',
			answers: 
			[{
				text: 'AngularJS!',
				author: 'Вова Сидоров',
				date: '20/10/2013',
				rate:2
			},{
				text: 'AngularJS лучше всех',
				author: 'Олег Кузнецов',
				date: '21/10/2013',
				rate:3
			}]
		}
	};
})

Здесь у модуля questApp мы вызвали метод factory, который в качестве первого параметра принимает название сервиса - 'dataService', а в качестве второго параметра служит функция, возвращающая объект question.

Теперь используем этот сервис. Для этого добавим в папку js каталог controllers/ А в этот каталог добави файл QuestionController.js со следующим контроллером:

questApp.controller('QuestionController', 
	function QuestionController($scope, dataService){
	
		$scope.question=dataService.question;
	
		$scope.voteUp = function (answer){
			answer.rate++;
		};
		$scope.voteDown = function (answer){
			answer.rate--;
		};
	}
)

Создаваемый сервис dataService будет передаваться в качестве параметра в контроллер. А из контроллера данные будут передаваться в представление.

Также в папке js определим каталог lib, в который добавим минимизированную главного файла angular.min.js.

И в корне проекта располагается главная страница index.html:

<!doctype html>
<html ng-app="questApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div  ng-controller="QuestionController">
<div class="quest">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers | orderBy:sortparam" class="answer">
<div class="vote">
    <a class="vote-up" ng-click="voteUp(answer)"></a>
    <span class="rate">{{answer.rate}}</span>
    <a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/dataService.js"></script>
<script src="js/controllers/QuestionController.js"></script>
</body>
</html>

В итоге весь проект будет выглядеть следующим образом:

Сервисы и их создание в Angular JS

Метод service

Кроме метода factory для создания сервиса можно также использовать метод Module.service. Его применение будет аналогично. Создадим в папке js новый файл questionService.js со следующим содержанием:

var questionFn = function(){
	return{
		question:{
			text: 'Какой js-фреймворк лучше использовать?',
			author: 'Иван Иванов',
			date: '20/10/2013',
			answers: 
			[{
				text: 'AngularJS!',
				author: 'Вова Сидоров',
				date: '20/10/2013',
				rate:2
			},{
				text: 'AngularJS лучше всех',
				author: 'Олег Кузнецов',
				date: '21/10/2013',
				rate:3
			}]
		}
	}
};

questApp.service('questionService', questionFn);

И также установим зависимость в контроллере:

questApp.controller('QuestionController',
    function QuestionController($scope, questionService){
     
        $scope.question=questionService.question;
     
        $scope.voteUp = function (answer){
            answer.rate++;
        };
        $scope.voteDown = function (answer){
            answer.rate--;
        };
    }
)

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850