Heim > Web-Frontend > js-Tutorial > Einführung in die Methoden zur Verwendung von Factory und Service in AngularJS_AngularJS

Einführung in die Methoden zur Verwendung von Factory und Service in AngularJS_AngularJS

WBOY
Freigeben: 2016-05-16 15:54:33
Original
1110 Leute haben es durchsucht

AngularJS unterstützt das Konzept der „Trennung von Belangen“ in einer Architektur, die Dienste nutzt. Dienste sind JavaScript-Funktionen und nur für die Ausführung einer bestimmten Aufgabe verantwortlich. Dies macht sie auch zu separaten Einheiten für Wartung und Tests. Controller und Filter können sie als Grundlage für Anforderungen aufrufen. Dienste werden normalerweise mithilfe des Abhängigkeitsinjektionsmechanismus von AngularJS injiziert.

AngularJS bietet viele intrinsische Dienste, wie zum Beispiel: $http, $route, $window, $location usw. Jeder Dienst ist für eine bestimmte Aufgabe verantwortlich. Beispielsweise wird $http verwendet, um AJAX-Aufrufe zu erstellen, um Daten vom Server abzurufen. $route wird zum Definieren von Routing-Informationen usw. verwendet. Integrierten Diensten wird immer ein $-Zeichen vorangestellt.

Es gibt zwei Möglichkeiten, einen Dienst zu erstellen.

  1. Fabrik
  2. Service

Factory-Methode verwenden

Mit Factory-Methoden definieren wir zunächst eine Factory und weisen ihr dann Methoden zu.

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

Nach dem Login kopieren

Service-Methode verwenden

Mithilfe von Servicemethoden definieren wir einen Service und weisen dann Methoden zu. Integrieren Sie auch bereits verfügbare Dienste.

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

Nach dem Login kopieren

Beispiel

Das folgende Beispiel demonstriert alle oben genannten Befehle.
testAngularJS.html



  Angular JS Forms

AngularJS Sample Application

Enter a number:

Result: {{result}}

<script> var mainApp = angular.module(&quot;mainApp&quot;, []); 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>
Nach dem Login kopieren

Ergebnisse

Öffnen Sie textAngularJS.html in Ihrem Webbrowser. Sehen Sie sich die Ergebnisse unten an.

2015617105555351.jpg (560×429)

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage