AngularJS
Сервисы

Как создать службу

angular.module("app")
  .service("counterService", function(){

    var service = {
        number: 0
    };
    
    return service;
   });

Как пользоваться услугой

    angular.module("app")
        
        // Custom services are injected just like Angular's built-in services
        .controller("step1Controller", ['counterService', '$scope', function(counterService, $scope) {
            counterService.number++;
            // bind to object (by reference), not to value, for automatic sync
            $scope.counter = counterService;
        })

В шаблоне с использованием этого контроллера вы должны написать:

// editable
<input ng-model="counter.number" />

или же

// read-only
<span ng-bind="counter.number"></span>

Конечно, в реальном коде вы будете взаимодействовать с сервисом, используя методы на контроллере, которые, в свою очередь, делегируют услугу. Приведенный выше пример просто увеличивает значение счетчика каждый раз, когда контроллер используется в шаблоне.

Услуги в Angularjs - это одиночные игры:

Службы - это одноэлементные объекты, которые создаются только один раз на приложение (с помощью инжектора) и ленивы загружаются (создаются только при необходимости).

Singleton - это класс, который позволяет только создать один экземпляр для себя - и дает простой и легкий доступ к указанному экземпляру. Как указано здесь

Создание сервиса с использованием угловой.фабрики

Сначала определите сервис (в этом случае он использует заводскую модель):

.factory('dataService', function() {
    var dataObject = {};
    var service = {
        // define the getter method
        get data() {
            return dataObject;
        },
        // define the setter method
        set data(value) {
            dataObject = value || {};
        }
    };
    // return the "service" object to expose the getter/setter
    return service;
})

Теперь вы можете использовать службу для обмена данными между контроллерами:

.controller('controllerOne', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // create an object to store
    var someObject = {
        name: 'SomeObject',
        value: 1
    };
    // store the object
    this.dataService.data = someObject;
})

.controller('controllerTwo', function(dataService) {
    // create a local reference to the dataService
    this.dataService = dataService;
    // this will automatically update with any changes to the shared data object
    this.objectFromControllerOne = this.dataService.data;
})

$ sce - санировать и отображать контент и ресурсы в шаблонах

$ sce («Строгое контекстное экранирование») - это встроенная угловая служба, которая автоматически дезинфицирует контент и внутренние источники в шаблонах.

для ввода внешних источников и необработанного HTML в шаблон требуется ручная упаковка $sce .

В этом примере мы создадим простой фильтр сателлитов $ sce: `.

демонстрация

.filter('sanitizer', ['$sce', [function($sce) {
     return function(content) {
          return $sce.trustAsResourceUrl(content);
      };
}]);

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

<div ng-repeat="item in items">
    
    // Sanitize external sources
    <ifrmae ng-src="{{item.youtube_url | sanitizer}}">
    
    // Sanitaize and render HTML 
    <div ng-bind-html="{{item.raw_html_content| sanitizer}}"></div>

</div>

Как создать службу с зависимостями с помощью «синтаксиса массива»

angular.module("app")
  .service("counterService", ["fooService", "barService", function(anotherService, barService){

    var service = {
        number: 0,
        foo: function () {
            return fooService.bazMethod(); // Use of 'fooService'
        },
        bar: function () {
            return barService.bazMethod(); // Use of 'barService'
        }
    };
    
    return service;
   }]);

Регистрация службы

Наиболее распространенный и гибкий способ создания сервиса использует фабрику API углового.module:

angular.module('myApp.services', []).factory('githubService', function() {       
   var serviceInstance = {};
   // Our first service
   return serviceInstance;
});

Функция фабрики услуг может быть либо функцией, либо массивом, точно так же, как мы создаем контроллеры:

// Creating the factory through using the
// bracket notation
angular.module('myApp.services', [])
.factory('githubService', [function($http) {
}]);

Чтобы разоблачить метод нашей службы, мы можем поместить его как атрибут в объект службы.

angular.module('myApp.services', [])
    .factory('githubService', function($http) {
        var githubUrl = 'https://api.github.com';
        var runUserRequest = function(username, path) {
        // Return the promise from the $http service
        // that calls the Github API using JSONP
        return $http({
            method: 'JSONP',
            url: githubUrl + '/users/' +
            username + '/' +
            path + '?callback=JSON_CALLBACK'
        });
    }
// Return the service object with a single function
// events
return {
    events: function(username) {
    return runUserRequest(username, 'events');
    }
};

Разница между сервисом и фабрикой

1) Услуги

Служба - это функция- constructor которая вызывается один раз во время выполнения с new , точно так же, как то, что мы будем делать с простым javascript, с той лишь разницей, что AngularJs вызывает new за кулисами.

В случае обслуживания есть одно правило большого пальца

1. Услуги - это конструкторы, которые называются new

Давайте посмотрим простой пример, в котором мы зарегистрировали бы службу, которая использует службу $http для получения сведений о студенте и использования ее в контроллере

function StudentDetailsService($http) {
  this.getStudentDetails = function getStudentDetails() {
    return $http.get('/details');
  };
}

angular.module('myapp').service('StudentDetailsService', StudentDetailsService);

Мы просто вводим эту услугу в контроллер

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

Когда использовать?

Используйте .service() везде, где вы хотите использовать конструктор. Обычно он используется для создания общедоступного API, как и для getStudentDetails() . Но если вы не хотите использовать конструктор и хотите использовать простой шаблон API, то в .service() нет большой гибкости.

2) Фабрика

Несмотря на то, что мы можем достичь всего, что использует .factory() которое мы использовали бы, используя .services() , он не делает .factory() «таким же, как« .service() . Он намного более мощный и гибкий, чем .service()

A .factory() - шаблон проектирования, который используется для возврата значения.

В случае фабрик есть два правила большого пальца

1. Возвращаемые значения фабрик
2. Заводы (могут) создавать объекты (Любой объект)

Давайте посмотрим некоторые примеры того, что мы можем сделать, используя .factory()

Литералы возвращающихся объектов

Давайте посмотрим пример, когда фабрика используется для возврата объекта с использованием шаблона базового модуля раскрытия

function StudentDetailsService($http) {
  function getStudentDetails() {
    return $http.get('/details');
  }
  return {
    getStudentDetails: getStudentDetails
  };
}

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

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

function StudentController(StudentDetailsService) {
  StudentDetailsService.getStudentDetails().then(function (response) {
      // handle response
    });
}
angular.module('app').controller('StudentController', StudentController);

Возвратные закрытия

Что такое закрытие?

Закрытие - это функции, которые относятся к переменным, которые используются локально, но определены в охватывающей области.

Ниже приведен пример закрытия

function closureFunction(name) {
  function innerClosureFunction(age) { // innerClosureFunction() is the inner function, a closure
    // Here you can manipulate 'age' AND 'name' variables both
  };
};

«Замечательная» часть состоит в том, что она может получить доступ к name которое находится в родительской области.

Давайте воспользуемся приведенным выше примером закрытия внутри .factory()

function StudentDetailsService($http) {
  function closureFunction(name) {
  function innerClosureFunction(age) {
    // Here you can manipulate 'age' AND 'name' variables
    };
  };
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

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

function StudentController(StudentDetailsService) {
  var myClosure = StudentDetailsService('Student Name'); // This now HAS the innerClosureFunction()
  var callMyClosure = myClosure(24); // This calls the innerClosureFunction()
};

angular.module('app').controller('StudentController', StudentController);

Создание конструкторов / экземпляров

.service() создает конструкторы с вызовом new как показано выше. .factory() также может создавать конструкторы с призывом к new

Давайте посмотрим пример того, как достичь этого.

function StudentDetailsService($http) {
  function Student() {
    this.age = function () {
        return 'This is my age';
    };
  }
  Student.prototype.address = function () {
        return 'This is my address';
  };
  return Student;
};

angular.module('myapp').factory('StudentDetailsService', StudentDetailsService);

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

function StudentController(StudentDetailsService) {
  var newStudent = new StudentDetailsService();
  
  //Now the instance has been created. Its properties can be accessed.

 newStudent.age();
 newStudent.address();
  
};

angular.module('app').controller('StudentController', StudentController);