angular:angularjs:servisy:custom_service []

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.
===== Собственный сервис =====

В AngularJS вы можете сделать свой собственный сервис. Существует несколько способов создать собственный сервис.

  - использовать метод module.factory()
  - использовать module.service()
  - использование метода provider

====использовать метод module.factory()====

самый простой способ создать сервис - использовать метод module.factory()
этот метод принимает  2 аргумента : 
  - имя сервиса; 
  - фабричная функция которая возвращает объект сервиса;
Объект сервиса будет использоватся во всем приложении когда он будет нужен.

<note>
так же важно заметить
что объект создается только один раз(singleton) и все пользователи этого сервиса работают с одним и тем же объектом
</note>

<code javascript>
angular.module("additionalModule", [])    
.directive("triButton", function () {
    return {
        scope: { counter: "=counter" },
        link: function (scope, element, attrs) {
            element.on("click", function (event) {
                console.log("Button click: " + event.target.innerText);
                scope.$apply(function () {
                    scope.counter++;;
                });
            });
        }
    }
});
angular.module("customServices", [])
.factory(" ", function () {
    var messageCount = 0;
    return {
        log: function (msg) {
            console.log("(LOG + " + messageCount++ + ") " + msg);
        }
    };
});
</code>

для того чтобы использовать сервис нужно лишь указать ео в зависимостях
<code html>
<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>Services and modules</title>
    <script src="../../angular.min%20.js"></script>
    <link href="../../bootstrap-theme.css" rel="stylesheet" />
    <link href="../../bootstrap.css" rel="stylesheet" />    
    <script src="log_service.js"></script>
    <!--файл с модулем от которого зависит модуль studyModule следует поключить до создания этого модуля иначе будет ошибка-->
    <script>
        angular.module("studyModule", ["additionalModule", "customServices"])
        .controller("studyCtrl", function ($scope, logService) {
            //для того чтобы использовать сервис нужно лишь указать ео в зависимостях
            $scope.data = {
                cities: ["London", "New York", "Paris"],
                totalClicks: 0
            };
            $scope.$watch('data.totalClicks', function (newVal) {
                logService.log("Total click count: " + newVal);
                //и потом обратится к методу который существует у этого сервиса
                //преимущества сервиса очевидны: он предоставляет только API, например если метод log изменится 
                //то это никак не повлияет на те места где его вызывали это дает огромное преимущество при тестировании
            });
        });
    </script>    
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <div class="btn-group" tri-button counter="data.totalClicks" source="data.cities">
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total clicks: {{data.totalClicks}}</h5>
    </div>
</body>
</html>
</code>

{{ :angular:angularjs:сервисы:services1.png |}}

====использовать module.service()====

**module.service()** метод так же создает сервис только использует другой подход: AngularJS использует объект который возвращается функцией
как конструктор и за кулисами для его создания использует ключевое слово **new**

<code javascript>
angular.module("additionalModule", [])    
.directive("triButton", function () {
    return {
        scope: { counter: "=counter" },
        link: function (scope, element, attrs) {
            element.on("click", function (event) {
                console.log("Button click: " + event.target.innerText);
                scope.$apply(function () {
                    scope.counter++;;
                });
            });
        }
    }
});
angular.module("customServices", [])
.service("logService", function () {
    var messageCount = 0;    
    this.log = function (msg) {
      return  console.log("(LOG + " + messageCount++ + ") " + msg);
    };    
});
</code>
файл с модулем от которого зависит модуль studyModule следует поключить до создания этого модуля иначе будет ошибка
<code html>
<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>Services and modules</title>
    <script src="../../angular.min%20.js"></script>
    <link href="../../bootstrap-theme.css" rel="stylesheet" />
    <link href="../../bootstrap.css" rel="stylesheet" />    
    <script src="log_service.js"></script>
    <!--файл с модулем от которого зависит модуль studyModule следует поключить до создания этого модуля иначе будет ошибка-->
    <script>
        angular.module("studyModule", ["additionalModule", "customServices"])
        .controller("studyCtrl", function ($scope, logService) {
            $scope.data = {
                cities: ["London", "New York", "Paris"],
                totalClicks: 0
            };
            $scope.$watch('data.totalClicks', function (newVal) {
                logService.log("Total click count: " + newVal);
            });
        });
    </script>    
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <div class="btn-group" tri-button counter="data.totalClicks" source="data.cities">
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total clicks: {{data.totalClicks}}</h5>
    </div>
</body>
</html>
</code>
{{ :angular:angularjs:сервисы:services2.png |}}
====использование метода provider====

аргументами метода provider являются 
  * название сервиса 
  * фабричная функция 
Фабричная функция должна возвращать объект **provider**
который содержит метод **$get** который в свою очередь используется для возврата service объекта
когда сервис запрашивают AngularJS использует фабричный метод для получения provider объекта 
а на нем в свою очередь вызывается метод **$get** для того чтобы получить //service объект//
преимуществом использования **provider** метода является то что вы можете добавить некую функцию в provider метод
которая далее может использоватся для конфигурации service объекта
<code javascript>
angular.module("additionalModule", [])
.directive("triButton", function () {
    return {
        scope: { counter: "=counter" },
        link: function (scope, element, attrs) {
            element.on("click", function (event) {
                console.log("Button click: " + event.target.innerText);
                scope.$apply(function () {
                    scope.counter++;;
                });
            });
        }
    }
});

angular.module("customServices", [])
.provider("logService", function () {
    var counter = true;
    var debug = true;
    return {
        messageCounterEnabled: function (setting) {
            if (angular.isDefined(setting)) {
                counter = setting;
                return this;
            } else {
                return counter;
            }
        },
        debugEnabled: function (setting) {
            if (angular.isDefined(setting)) {
                debug = setting;
                return this;
            } else {
                return debug;
            }
        },
        $get: function () {
            return {
                messageCount: 0,
                log: function (msg) {
                    if (debug) {
                        console.log("(LOG"
                            + (counter ? " + " + this.messageCount++ + ") " : ") ")
                            + msg);
                    }
                }
            };
        }
    }
});
</code>
ngularJS для provider объектов предоставляет возможность работать с Dependency Injection используя имя сервиса + слово Provider,
таким образом мы получаем provider объект, лучше всего использовать provider объект для настройки в config() методе так как 
он будет выполнятся только после того как все модули будут загуржены, в данном случае мы настраиваем service объект

<code html>
<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>Services and modules</title>
    <script src="../../angular.min%20.js"></script>
    <link href="../../bootstrap-theme.css" rel="stylesheet" />
    <link href="../../bootstrap.css" rel="stylesheet" />    
    <script src="log_service.js"></script>
    <!--файл с модулем от которого зависит модуль studyModule следует поключить до создания этого модуля иначе будет ошибка-->
    <script>
        angular.module("studyModule", ["additionalModule", "customServices"])
        .config(function (logServiceProvider) {
            logServiceProvider.debugEnabled(true).messageCounterEnabled(true);
            //AngularJS для provider объектов предоставляет возможность работать с Dependency Injection используя имя сервиса + слово Provider,
            //таким образом мы получаем provider объект, лучше всего использовать provider объект для настройки в config() методе так как 
            //он будет выполнятся только после того как все модули будут загуржены, в данном случае мы настраиваем service объект

        })
        .controller("studyCtrl", function ($scope, logService) {
            $scope.data = {
                cities: ["London", "New York", "Paris"],
                totalClicks: 0
            };
            $scope.$watch('data.totalClicks', function (newVal) {
                logService.log("Total click count: " + newVal);
            });
        });
    </script>    
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <div class="btn-group" tri-button counter="data.totalClicks" source="data.cities">
            <button class="btn btn-default" ng-repeat="city in data.cities">
                {{city}}
            </button>
        </div>
        <h5>Total clicks: {{data.totalClicks}}</h5>
    </div>
</body>
</html>

</code>

{{ :angular:angularjs:сервисы:services3.png |}}
Инструменты пользователя

Инструменты сайта

Инструменты страницы
