angular:angularjs:servisy:custom

Содержание

Собственный сервис

Собственный сервис

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

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

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

самый простой способ создать сервис - использовать метод module.factory() этот метод принимает 2 аргумента :

имя сервиса;
фабричная функция которая возвращает объект сервиса;

Объект сервиса будет использоватся во всем приложении когда он будет нужен.

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

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);
        }
    };
});

для того чтобы использовать сервис нужно лишь указать ео в зависимостях

<!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>

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

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

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);
    };    
});

файл с модулем от которого зависит модуль studyModule следует поключить до создания этого модуля иначе будет ошибка

<!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>

использование метода provider

аргументами метода provider являются

название сервиса
фабричная функция

Фабричная функция должна возвращать объект provider который содержит метод $get который в свою очередь используется для возврата service объекта когда сервис запрашивают AngularJS использует фабричный метод для получения provider объекта а на нем в свою очередь вызывается метод $get для того чтобы получить service объект преимуществом использования provider метода является то что вы можете добавить некую функцию в provider метод которая далее может использоватся для конфигурации service объекта

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);
                    }
                }
            };
        }
    }
});

ngularJS для provider объектов предоставляет возможность работать с Dependency Injection используя имя сервиса + слово Provider, таким образом мы получаем provider объект, лучше всего использовать provider объект для настройки в config() методе так как он будет выполнятся только после того как все модули будут загуржены, в данном случае мы настраиваем service объект

<!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>