Компьютерапия

AngularJS - Службы

Категория: AngularJS
Просмотров: 2367

AngularJS поддерживает концепции «Разделение проблем» с использованием архитектуры сервисов. Услуги являются функциями javascript и несут ответственность за выполнение только определенных задач. Это делает их отдельными объектами, которые можно обслуживать и тестировать. Контроллеры, фильтры могут вызывать их по требованию. Услуги обычно вводятся с использованием механизма инъекции зависимостей AngularJS.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

AngularJS предоставляет множество встроенных сервисов, например, $http, $route, $window, $location и т.д. Каждая служба отвечает за конкретную задачу, например, $http используется для вызова ajax для получения данных сервера. $route используется для определения информации о маршрутизации и т. д. Встроенные сервисы всегда имеют префикс с символом $.

Существует два способа создания службы.

  • factory
  • service

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

Используя factory метод, сначала определяем factory, а затем присваиваем ей метод.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};
  
   factory.multiply = function(a, b) {
      return a * b
   }
  
   return factory;
});

Использование метода обслуживания

Используя метод сервиса, мы определяем службу и затем присваиваем ей метод. Мы также ввели уже имеющийся сервис.

mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

Пример

В следующем примере будут показаны все вышеупомянутые директивы.

<html>
 
   <head>
      <title>Angular JS Services</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
  
   <body>
      <h2>AngularJS Sample Application</h2>
     
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
     
      <script>
         var mainApp = angular.module("mainApp", []);
        
         mainApp.factory('MathService', function() {
            var factory = {};
           
            factory.multiply = function(a, b) {
               return a * b
            }
            return factory;
         });
        
         mainApp.service('CalcService', function(MathService){
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
        
         mainApp.controller('CalcController', function($scope, CalcService) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
     
   </body>
</html>

Результат

Откройте textAngularJS.htm в веб-браузере.




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok