AngularJS
Usługi

Jak stworzyć usługę

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

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

Jak korzystać z usługi

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

W szablonie za pomocą tego kontrolera napiszesz:

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

lub

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

Oczywiście w prawdziwym kodzie można wchodzić w interakcje z usługą przy użyciu metod kontrolera, które z kolei delegują się do usługi. Powyższy przykład po prostu zwiększa wartość licznika za każdym razem, gdy kontroler jest używany w szablonie.

Usługi w Angularjs są singletonami:

Usługi są obiektami singletonowymi, które są tworzone tylko raz na aplikację (przez $ injector) i ładowane z opóźnieniem (tworzone tylko w razie potrzeby).

Singleton to klasa, która pozwala na utworzenie tylko jednej instancji samego siebie - i zapewnia prosty, łatwy dostęp do tej instancji. Jak stwierdzono tutaj

Tworzenie usługi za pomocą angular.factory

Najpierw zdefiniuj usługę (w tym przypadku używa ona wzoru fabrycznego):

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

Teraz możesz korzystać z usługi do udostępniania danych między kontrolerami:

.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 - dezynfekuj i renderuj treści i zasoby w szablonach

$ sce („Strict Contextual Escaping”) to wbudowana usługa kątowa, która automatycznie odkaża zawartość i wewnętrzne źródła w szablonach.

wstrzykiwanie zewnętrznych źródeł i surowego HTML do szablonu wymaga ręcznego zawijania $sce .

W tym przykładzie utworzymy prosty filtr sanitarny $ sce: `.

Próbny

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

Użycie w szablonie

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

Jak utworzyć usługę z zależnościami przy użyciu „składni tablicy”

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

Rejestracja usługi

Najpopularniejszym i najbardziej elastycznym sposobem tworzenia usługi jest fabryka API angular.module:

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

Fabryka usług może być funkcją lub tablicą, podobnie jak sposób tworzenia kontrolerów:

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

Aby udostępnić metodę w naszym serwisie, możemy umieścić ją jako atrybut na obiekcie usługi.

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

Różnica między usługą a fabryką

1) Usługi

Usługa jest funkcją constructor która jest wywoływana raz w środowisku wykonawczym z new , podobnie jak to, co robilibyśmy ze zwykłym javascript, z tą różnicą, że AngularJs wywołuje new za kulisami.

W przypadku usług należy pamiętać o jednej kciuku

1. Usługi są konstruktorami, które są wywoływane z new

Zobaczmy prosty przykład, w którym zarejestrowalibyśmy usługę, która korzysta z usługi $http celu pobrania danych studenta i wykorzystania jej w kontrolerze

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

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

Właśnie wstrzykujemy tę usługę do kontrolera

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

Kiedy użyć?

Użyj .service() wszędzie tam, gdzie chcesz użyć konstruktora. Zwykle służy do tworzenia publicznych interfejsów API, podobnie jak getStudentDetails() . Ale jeśli nie chcesz używać konstruktora i zamiast tego chcesz użyć prostego wzorca interfejsu API, oznacza to, że w .service() nie ma dużej elastyczności.

2) Fabryka

Mimo że możemy osiągnąć wszystkie rzeczy za pomocą .factory() co byśmy .services() , używając .services() , nie czyni to .factory() „takim samym jak” .service() . Jest znacznie bardziej wydajny i elastyczny niż .service()

.factory() to wzorzec projektowy, który służy do zwracania wartości.

W przypadku fabryk należy pamiętać o dwóch podstawowych zasadach

1. Fabryki zwracają wartości
2. Fabryki (mogą) tworzyć obiekty (Dowolny obiekt)

Zobaczmy kilka przykładów tego, co możemy zrobić za pomocą .factory()

Powracające literały przedmiotów

Zobaczmy przykład, w którym fabryka jest używana do zwracania obiektu za pomocą podstawowego wzorca modułu ujawniania

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

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

Użycie wewnątrz kontrolera

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

Powracające zamknięcia

Co to jest zamknięcie?

Zamknięcia to funkcje odnoszące się do zmiennych używanych lokalnie, ALE zdefiniowane w zakresie obejmującym.

Poniżej znajduje się przykład zamknięcia

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

„Wspaniałą” częścią jest to, że może uzyskać dostęp do name znajdującej się w zakresie nadrzędnym.

.factory() powyższego przykładu zamknięcia w .factory()

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

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

Użycie wewnątrz kontrolera

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

Tworzenie konstruktorów / instancji

.service() tworzy konstruktory z wywołaniem new jak pokazano powyżej. .factory() może również tworzyć konstruktory z wywołaniem new

Zobaczmy, jak to osiągnąć

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

Użycie wewnątrz kontrolera

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