Wie verwende ich AngularJS-Dienste? Spezifische Einführung in die Verwendung von AngularJS-Diensten-js-Tutorial-php.cn

Wie verwende ich AngularJS-Dienste? Spezifische Einführung in die Verwendung von AngularJS-Diensten

寻∝梦

Freigeben： 2018-09-08 11:54:53

Original

983 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die Details zu den Diensten von AngularJS sowie die Verwendung der integrierten AngularJS-Dienste vor. Es enthält Anwendungsbeispiele für AngularJS. Schauen wir uns diesen Artikel gemeinsam an

Die Essenz des Dienstes ist ein Singleton-Objekt, das Daten und Objekte bereitstellt.

Zwei Hauptkategorien:

①Integrierte Dienste

Geltungsbereich

Fenster

Timeout usw.

Verwendung integrierter in Services bereitgestellte Methoden:

Der erste Schritt besteht darin, die Services, die Sie benötigen, in die Funktion zu integrieren (

Standort)
Der zweite Schritt besteht darin, die im Dienst bereitgestellten Methodendaten aufzurufen. .

Fall: Erstellen Sie ein Karussell durch das integrierte $-Intervall

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
  <img ng-src="img/{{imgList[index]}}" alt=""/>
  <h1>{{count}}</h1></p><script>
  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);

  app.controller(&#39;myCtrl&#39;, function ($scope,$interval) {
    $scope.count = 0;
    timer = $interval(function () {
      $scope.count++;      if($scope.count > 20)
      {
        $interval.cancel(timer)
      }
    },500)

    $scope.index = 0;
    $scope.imgList = [&#39;1.jpg&#39;,&#39;2.jpg&#39;,&#39;3.jpg&#39;]
    $interval(function () {
      $scope.index++;      if($scope.index > 2)
      {
        $scope.index = 0;
      }
    },1000)

  });</script></body></html>

Nach dem Login kopieren

②Maßgeschneiderter Service

Service Der Zweck besteht darin, Geschäftslogik kapseln und Code-Wiederverwendungsrate verbessern
Benutzerdefinierte Dienstmethode:
app.factory ('service name', function(){//ordinary method return {}})
app.service( 'Service name', function(){//Constructor})
app.constant('Service name', {})//Erstellen Sie einen konstanten Service
app.value(' Service name', {}) //Variablendienst erstellen

Dienst < über app.factory erstellen ('Dienstname', Funktion(){//Gewöhnliche Methodenrückgabe {}}) 🎜>

<!DOCTYPE html><html ng-app="myApp"><head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.js"></script></head><body><p ng-controller="myCtrl">
  <button ng-click="handleClick()">clickMe</button></p><script>
  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);  //创建自定义服务
  app.factory(&#39;$output&#39;, function () {
    return {
      print: function () {
        console.log(&#39;func in $output is called&#39;);
      }
    }
  })
  app.controller(&#39;myCtrl&#39;, function ($scope,$output) {
    $scope.handleClick = function () {
      //调用自定义服务所提供的方法
      $output.print();
    }
  });</script></body></html>

Nach dem Login kopieren

Erstellen Sie einen Dienst über app.service('service name', function(){//constructor})

<script>
  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);  //自定义服务
  app.service(&#39;$student&#39;, function () {
    this.study = function () {
      console.log(&#39;we are learning...&#39;);
    }    this.name = "zhangSan";
  })

  app.controller(&#39;myCtrl&#39;,    function ($scope, $student) {
      $student.study();
    });</script></body></html>

Nach dem Login kopieren

** über app.constant('service Name', {})/ /Konstanten Dienst erstellen

app.value(&#39;服务名称&#39;，{})//创建变量服务**<script>  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);  //创建常量服务
  app.constant(&#39;$Author&#39;,{name:&#39;KKK&#39;,email:&#39;**@163.com&#39;})  //创建变量服务
  app.value(&#39;$Config&#39;,{version:1})


  app.controller(&#39;myCtrl&#39;, function ($scope,$Author,$Config) {
    console.log($Author.email);
    console.log($Config.version);

  });
</script>

Nach dem Login kopieren

Hinweise:

Benutzerdefinierte Dienste müssen Methoden in anderen Diensten verwenden

<body><p ng-controller="myCtrl">
  <button ng-click="start()">开始</button>
  <button ng-click="stop()">结束</button></p><script>
  var app = angular.module(&#39;myApp&#39;, [&#39;ng&#39;]);  //通过service方法去创建自定义服务
  app.service(&#39;$HeartBeat&#39;, function ($interval) {
    this.startBeat = function () {
      promise = $interval(function () {
        console.log(&#39;beat...&#39;);
      },1000);
    }    this.stopBeat = function () {
      $interval.cancel(promise);
    }
  })

  app.controller(&#39;myCtrl&#39;, function ($scope,$HeartBeat) {
    $scope.start = function () {
      $HeartBeat.startBeat();
    }

    $scope.stop = function () {
      $HeartBeat.stopBeat();
    }
  });</script>

Nach dem Login kopieren

Okay, dieser Artikel endet hier (falls Sie ihn sehen möchten Weitere Informationen finden Sie auf der chinesischen PHP-Website

AngularJS-Benutzerhandbuch . Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen.

Das obige ist der detaillierte Inhalt vonWie verwende ich AngularJS-Dienste? Spezifische Einführung in die Verwendung von AngularJS-Diensten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!