Comment utiliser les services AngularJS ? Introduction spécifique à l'utilisation des services Angularjs-js tutoriel-php.cn

Comment utiliser les services AngularJS ? Introduction spécifique à l'utilisation des services Angularjs

寻∝梦

Libérer： 2018-09-08 11:54:53

original

984 Les gens l'ont consulté

Cet article vous présente principalement les détails des services de angularjs, ainsi que l'utilisation des services intégrés d'angularjs. Il contient des exemples d'utilisation d'angularjs, jetons un coup d'œil ensemble à cet article

L'essence du service est un objet singleton qui fournit des données et des objets.

Deux grandes catégories :

①Services intégrés

scope

fenêtre

timeout etc.

Utilisation de dans les services Méthodes fournies :

La première étape consiste à injecter les services dont vous avez besoin dans la fonction (

localisation)
La deuxième étape consiste à appeler les données de méthode fournies dans le service. .

Cas : Créer un carrousel via le $interval intégré

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

Copier après la connexion

②Service personnalisé

Le but de services consiste à encapsuler la logique métier et à améliorer le taux de réutilisation du code
Méthodes pour personnaliser les services :
app.factory ('service name', function(){//ordinary method return {} })
app.service('Service Name', function(){//Constructor})
app.constant('Service Name', {})//Créer un service constant
app.value ('Service name' , {})//Créer un service variable

Créer un service via app.factory ('Nom du service', fonction(){//Retour de la méthode normale {}})

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

Copier après la connexion

Créez un service via 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>

Copier après la connexion

** Passez app.constant(' nom du service', {})//Créer un service constant

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>

Copier après la connexion

Remarques :
Les services personnalisés doivent utiliser des méthodes dans d'autres services

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

Copier après la connexion

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel de l'utilisateur AngularJS pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!