AngularJS
Dienstleistungen

Wie erstelle ich einen Service?

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

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

Wie benutze ich einen Dienst?

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

In die Vorlage mit diesem Controller würden Sie dann schreiben:

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

oder

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

In echtem Code würden Sie natürlich mit dem Dienst über Methoden auf dem Controller interagieren, die wiederum an den Dienst delegieren. Das obige Beispiel erhöht den Zählerwert einfach jedes Mal, wenn der Controller in einer Vorlage verwendet wird.

Dienstleistungen in Angularjs sind Singletons:

Services sind Singleton-Objekte, die nur einmal pro App instanziiert werden (durch den $ injector) und faul geladen (nur bei Bedarf erstellt) werden.

Ein Singleton ist eine Klasse, die nur die Erstellung einer Instanz von sich selbst zulässt - und einen einfachen und einfachen Zugriff auf diese Instanz ermöglicht. Wie hier angegeben

Erstellen eines Dienstes mithilfe von angle.factory

Definieren Sie zuerst den Dienst (in diesem Fall wird das Werksmuster verwendet):

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

Jetzt können Sie den Dienst verwenden, um Daten zwischen Controllern gemeinsam zu nutzen:

.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 - Bereinigen und Rendern von Inhalten und Ressourcen in Vorlagen

$ sce ("Strict Contextual Escaping") ist ein integrierter Winkeldienst, der automatisch Inhalte und interne Quellen in Vorlagen bereinigt.

Das Einfügen von externen Quellen und rohem HTML- $sce in die Vorlage erfordert ein manuelles Wrapping von $sce .

In diesem Beispiel erstellen wir einen einfachen $ sce-Sanitationsfilter: `.

Demo

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

Verwendung in der Vorlage

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

So erstellen Sie einen Dienst mit Abhängigkeiten unter Verwendung der 'Array-Syntax'

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

Einen Service registrieren

Die gebräuchlichste und flexibelste Art, einen Dienst zu erstellen, verwendet die API-Factory von angle.module:

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

Die Service Factory-Funktion kann entweder eine Funktion oder ein Array sein, genauso wie wir Controller erstellen:

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

Um eine Methode für unseren Service verfügbar zu machen, können wir sie als Attribut für das Serviceobjekt platzieren.

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

Unterschied zwischen Service und Werk

1) Dienstleistungen

Ein Service ist eine constructor , die zur Laufzeit einmalig mit new aufgerufen wird, genau wie das, was wir mit einfachem Javascript tun würden, mit dem Unterschied, dass AngularJs das new hinter den Kulissen aufruft.

Es gibt eine Daumenregel, die Sie bei Services beachten sollten

1. Dienste sind Konstruktoren, die mit new aufgerufen werden

Sehen wir uns ein einfaches Beispiel an, bei dem wir einen Dienst registrieren, der den $http Dienst zum Abrufen von Studentendaten verwendet, und ihn im Controller verwenden

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

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

Wir injizieren diesen Dienst einfach in die Steuerung

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

Wann verwenden?

Verwenden Sie .service() wo immer Sie einen Konstruktor verwenden möchten. Sie wird normalerweise zum Erstellen öffentlicher APIs wie bei getStudentDetails() . Wenn Sie jedoch keinen Konstruktor verwenden möchten und stattdessen ein einfaches API-Muster verwenden möchten, gibt es in .service() keine große Flexibilität.

2) Fabrik

Obwohl wir alle Dinge mit .factory() was wir mit .services() machen würden, macht es .factory() "gleich" .service() . Es ist viel leistungsfähiger und flexibler als .service()

Eine .factory() ist ein Entwurfsmuster, mit dem ein Wert zurückgegeben wird.

Für Fabriken gibt es zwei Daumenregeln, die Sie beachten sollten

1. Fabriken geben Werte zurück
2. Fabriken (können) Objekte erstellen (Beliebiges Objekt)

.factory() wir uns einige Beispiele an, was wir mit .factory()

Rückgabe von Objekten Literalen

Sehen wir uns ein Beispiel an, in dem Factory verwendet wird, um ein Objekt unter Verwendung eines grundlegenden Revealing-Modulmusters zurückzugeben

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

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

Verwendung in einem Controller

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

Rückgabe von Verschlüssen

Was ist eine Schließung?

Closures sind Funktionen, die auf lokal verwendete Variablen verweisen, die jedoch in einem einschließenden Bereich definiert sind.

Folgendes ist ein Beispiel für eine Schließung

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

Der "wundervolle" Teil ist, dass er auf den name zugreifen kann, der sich im übergeordneten Bereich befindet.

Verwenden .factory() das obige Schließungsbeispiel in .factory()

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

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

Verwendung in einem Controller

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

Konstruktoren / Instanzen erstellen

.service() erstellt Konstruktoren mit einem Aufruf von new wie oben. .factory() kann auch Konstruktoren mit einem Aufruf von new erstellen

Sehen wir uns ein Beispiel dafür an

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

Verwendung in einem Controller

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