AngularJS unterstützt das Konzept der "Trennung von Bedenken" in der Architektur mithilfe von Diensten. Ein Dienst ist eine JavaScript -Funktion und ist für nur eine bestimmte Aufgabe verantwortlich. Dies macht sie auch zu einer separaten Einheit, die gewartet und getestet wird. Controller, Filter können sie als Grundlage für Anforderungen anrufen. Der Service verwendet den Abhängigkeitsinjektionsmechanismus von AngularJS, um ihn normal zu injizieren.
AngularJS bietet viele intrinsische Dienste an, wie z. $ route wird verwendet, um Routing-Informationen usw. zu definieren usw. Der integrierte Service wird immer mit dem $ -Symbol vorangestellt.
Es gibt zwei Möglichkeiten, einen Dienst zu erstellen.
Fabrik
Aufschlag
Verwenden von Fabrikmethoden
Mit der Fabrikmethode definieren wir zuerst eine Fabrik und weisen dann die Methode zu.
var mainApp = angular.module ("mainApp", []); mainApp.factory ('mathService', function () {var factory = {}; factory.multiply = function (a, b) {return a * b} return factory;});So nutzen Sie den Service
Mit der Servicemethode definieren wir einen Dienst und weisen dann die Methode zu. Auch injizieren Sie bereits verfügbare Dienste.
mainApp.service ('calcService', function (mathService) {this.square = function (a) {return MathService.multiply (a, a);}});Beispiel
Die folgenden Beispiele zeigen alle oben genannten Anweisungen.
testangularJs.html
<html><head> <title>Angular JS Forms</title></head><body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp" ng-controller="CalcController"> <p>Enter a number: <input type="number" ng-model="number" /> <button ng-klick = "square ()"> x <sup> 2 </sup> </button> <p> Ergebnis: {{result}} </p> </div> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js.js" 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', Funktion ($ scope, calcService) {$ scope.square = function () {$ scope.result = calcService.square ($ scope.number);}}); </script> </body> </html>Ergebnis
Öffnen Sie TextangularJs.html in einem Webbrowser. Die Ergebnisse sind wie folgt.
Das obige sind die grundlegenden Informationen für AngularJS -Dienste. Wir werden in Zukunft weiterhin relevante Informationen organisieren. Vielen Dank für Ihre Unterstützung für diese Seite!