angular:angularjs:servisy:spisok_vstroennyx_servisov []

Содержание

Сервисы встроенные в AngularJs
- $window
- $document
- $interval и $timeout
- $location
- $anchorScroll
- $log
- $parse
- $interpolate
- $compile

Сервисы встроенные в AngularJs

Название серивса	Описание
$anchorScroll	Используется для скролла окна браузера до определенного якоря
$animate	Используется для анимации
$compile	Обрабатывает фрагмент разметки для создания функции которая может генерировать контент
$controller	Является оберткой над $injector сервисом который инстанциирует контроллеры
$document	Представляет jqLite объект который содержит DOM объект window.document
$exceptionHandler	Используется для обработки ошибок которые возникают в приложении
$filter	Используется для создания фильтров
$http	Используется для создания и управления AJAX запросами
$injector	Создает экземпляр AngularJS компонента
$interpolate	Обрабатывает строку которая содержит выражение привязки для создания функции которая может использоватся для генерации контента
$interval	Обертка над window.setInterval функцией
$location	Обертка над объектом location
$log	Обертка над global console объектом
$parse	Обрабатывает выражение для создания функции которая может использоватся для генерации контента
$provide	Реализует множество методов которые представлены в Module
$q	Используется для работы с promises
$resource	Предоставляет возможность работы с RESTfull API
$rootElement	Предоставляет доступ к корневому элоементу DOM
$rootScope	Предоставляет доступ к корневому scope
$route	Используется для работы с путями и множеством view
$routeParams	Предоставляет информацию о URL
$sanitize	Заменяет небезопасные HTML символы на безопасные
$sce	Удаляет опасные элементы и аттрибуты из HTML строки чтобы сделать ее безопасной для отображения
$swipe	Используется для распознавания гестур
$timeout	Обертка над window.setTimeout()
$window	Предоставляет ссылку на DOM объект - window

$window

Предоставляет ссылку на DOM объект - window
Основная причина почему в AngularJS доступны сервисы для работы с DOM API global objects это юнит тестирование использование сервисов делает тестирование намного проще так как у вас появляется возможность протестировать только тот функционал который вам нужен и вы избавляетесь от проблем с зависимостями

<!DOCTYPE html>
 
<html ng-app="studyModule">
<head>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <title>DOM API Services</title>
</head>
<script>
    angular.module("studyModule", [])
    .controller("studyCtrl", function ($scope, $window) {
        $scope.showHint = function (message) {
            $window.alert(message);
        }
    });
</script>
<body ng-controller="studyCtrl" class="well">
    <button class="btn btn-primary" ng-click="showHint('Hint!')">Click me!</button>
</body>
</html>

$document

Представляет jqLite объект который содержит DOM объект window.document

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>DOM API Services</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
    angular.module("studyModule", [])
    .controller("studyCtrl", function ($scope, $window, $document) {
        $document.find("button").on("click", function (event) {
            $window.alert(event.target.innerText);
        })
    });
    </script>
</head>
<body ng-controller="studyCtrl" class="well">
    <button class="btn btn-primary">Click me!</button>
</body>
</html>

$interval и $timeout

$interval и $timeout сервисы являются обертками над функциями JavaScript window.setInterval() и window.setTimeout()
они принимают аргументы:

fn функция чье выполнение будет задержано
delay количество милисекунд до выполения функции
count количество раз когда выполнение функции будет повторятся ($interval), значение по умолчанию 0 и оно означает бесконечное повторение
invokeApply когда установлено true(это значение по default) функция будет выполнятся с применением scope.$apply метода

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $interval) {
            $interval(function () {
                $scope.time = new Date().toTimeString();
            }, 2000);
        })
    </script>
</head>
<body ng-controller="studyCtrl" class="well">
    <div class="panel panel-default">
        <h4 class="panel-heading">Time</h4>
        <div class="panel-body">
            The time is: {{time}}
        </div>
    </div>
</body>
</html>

$location

С помощью сервиса $location можно получить доступ к url но только к той ее части которая указана после # например http://mydomain.com/app.html#/citie/london?select=hotels#north
нет возможности с помощью этого сервиса изменить весь url так как если выполнится переход по другому url то текущее приложение будет выгружено
сервис $location содержит методы:

absUrl() возвращает полный url
hash()/hash(target) возвращает или устанавливает hash секцию url
host() возвращает имя хоста (mysite.com)
path()/path(target) возвращает или устанавливает path секцию url
port() возвращает номер порта (по умолчанию 80)
protocol() возвращет protocol (http)
replace() все изменения в текущем url заменяются записью из истории
search()/search(term, param) возвращает или устанавливает search секцию url
url()/url(target) возвращает или устанавливает path, query string, hash

так же сервис $location содержит несколько событий которые можно использовать для уведомления об изменении url из-за действий пользователя или програмно, обработчики на эти события можно указать используя метод $on, обработчик будет получать в качестве аргументов новый url и старый url

$locationChangeStart генерируется перед изменением url, обработав это событие можно препятствовать изменениям url
$locationChangeSuccess генерируется после изменения url

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script src="../angular.min%20.js"></script>
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $location) {
            $scope.$on("$locationChangeSuccess", function (event, newUrl) {
                $scope.url = newUrl;
            });
            $scope.setUrl = function (component) {
                switch (component) {
                    case "reset":
                        $location.path("");
                        $location.hash("");
                        $location.search("");
                        break;
                    case "path":
                        $location.path("/cities/london");
                        break;
                    case "hash":
                        $location.hash("north");
                        break;
                    case "search":
                        $location.search("select", "hotels");
                        break;
                    case "url":
                        $location.url("/cities/london?select=hotels#north");
                        break;
                }
           }
        })
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="panel panel-default">
        <h4 class="panel-heading">URL</h4>
        <div class="panel-body">
            <p>The url is : {{url}}</p>
            <div class="btn btn-group">
                <button class="btn btn-primary" ng-click="setUrl('reset')">Reset</button>
                <button class="btn btn-primary" ng-click="setUrl('path')">Path</button>
                <button class="btn btn-primary" ng-click="setUrl('hash')">Hash</button>
                <button class="btn btn-primary" ng-click="setUrl('search')">Search</button>
                <button class="btn btn-primary" ng-click="setUrl('url')">URL</button>
            </div>
        </div>
    </div>
</body>
</html>

$anchorScroll

$anchorScroll сервис выполняет прокрутку документа до того элемента id которого возвращается $location.hash() методом

при использовании сервиса $anchorScroll не нужно использовать service объект, просто нужно указать dependency когда объект сервиса уже создан он начинает следить за значением свойства hash $location сервиса и прокрутка выполняется автоматически когда значение свойства меняется

<!DOCTYPE html>
<!--$anchorScroll сервис выполняет прокрутку документа до того элемента id которого возвращается $location.hash() методом-->
<html ng-app="studyModule">
<head>
    <title>DOM API Service</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        //.config(function ($anchorScrollProvider) {
        //    $anchorScrollProvider.disableAutoScrolling();
        //})
        //используйте $anchorScrollProvider для устранение эффекта auto-scroll
        .controller("studyCtrl", function ($scope, $location, $anchorScroll) {
            $scope.itemCount = 50;
            $scope.items = [];
            for (var i = 0; i < $scope.itemCount; i++) {
                $scope.items[i] = "Item " + i;
            }
            $scope.show = function (id) {
                $location.hash(id);
                //if (id == 'bottom') {
                //    $anchorScroll();
                //}
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="panel panel-default">
        <h4 class="panel-heading">URL</h4>
        <div class="panel-body">
            <p id="top">This is the top</p>
            <button class="btn btn-primary" ng-click="show('bottom')">Go to bottom</button>
            <p>
                <ul>
                    <li ng-repeat="item in items">{{item}}</li>
                </ul>
            </p>
            <p id="bottom">This is the bottom</p>
            <button class="btn btn-primary" ng-click="show('top')">Go to TOP</button>
        </div>
    </div>
</body>
</html>

$log

$log Обертка над global console объектом

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title>DOM API Service</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope, $log) {
            $scope.log = function () {
                $log.log("Log message");
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl" class="well">
<button class="btn btn-primary" ng-click="log()">LOG!</button>
</body>
</html>

$parse

сервис $parse позволяет превращать angularjs выражения в функции которые могут обрабатывать данные

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.price = "100.23";
            $scope.data = [2,1,4,51];
        })
        .directive("evalExpression", function ($parse) {
            return function (scope, element, attrs) {
                scope.$watch(attrs["evalExpression"], function (newValue) {
                    try {
                        var expressionFn = $parse(scope.expr);
                        //с помощью сервиса $parse получаем значение свойства expr и превращаем его в функцию
 
                        var result = expressionFn(scope);
                        console.log(result);
                        //далее применяем эту функцию для scope
                        if (result == undefined) {
                            result = "No result";
                        }
                    } catch (err) {
                        result = "Cannot evaluate expression";
                    }
                    element.text(result);
                });
                scope.test = function(){
                    return 'method test';
                }
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="expr" /></p>
        <div>
            Result: <span eval-expression="expr"></span>
        </div>
    </div>
</body>
</html>

$interpolate

Сервис $interpolate по своей работе очень похож на $parse основная разница состоит в том что $interpolate работает со строками которые содержат выражения angularjs

<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
    <title>Expressions</title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("exampleApp", [])
        .controller("defaultCtrl", function ($scope) {
            $scope.dataValue = "100.23";
        })
        .directive("evalExpression", function ($interpolate) {
            var interpolationFn
            = $interpolate("The total is: {{amount | currency}} (including tax)");
            return {
                scope: {
                    amount: "=amount",
                    tax: "=tax"
                },
                link: function (scope, element, attrs) {
                    scope.$watch("amount", function (newValue) {
                        var localData = {
                            total: Number(newValue)
                            + (Number(newValue) * (Number(scope.tax) / 100))
                        }
                        element.text(interpolationFn(scope));
                    });
                }
            }
        });
    </script>
</head>
<body ng-controller="defaultCtrl">
    <div class="well">
        <p><input class="form-control" ng-model="dataValue" /></p>
        <div>
            <span eval-expression amount="dataValue" tax="10"></span>
        </div>
    </div>
</body>
</html>

$compile

сервис $compile обрабатывает фрагмент html разметки который содержит привязки или выражения angularjs и создает функцию которую далее можно использовать

<!DOCTYPE html>
<html ng-app="studyModule">
<head>
    <title></title>
    <script src="../angular.min%20.js"></script>
    <link href="../bootstrap-theme.css" rel="stylesheet" />
    <link href="../bootstrap.css" rel="stylesheet" />
    <script>
        angular.module("studyModule", [])
        .controller("studyCtrl", function ($scope) {
            $scope.cities = ["London", "Paris", "New York"];
        })
        .directive("evalExpression", function ($compile) {
            return function (scope, element, attrs) {
                var content = "<ul><li ng-repeat='city in cities'>{{city}}</li></ul>";
                var listElem = angular.element(content);
                var compileFn = $compile(listElem);               
                compileFn(scope);
                //вызывая функцию передаем туда scope который содержит массив элементов
                element.append(listElem);
                //модифицируем DOM
            }
        });
    </script>
</head>
<body ng-controller="studyCtrl">
    <div class="well">
        <span eval-expression></span>
    </div>
</body>
</html>

Инструменты пользователя

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

Боковая панель