Maison >interface Web >js tutoriel >Comment utiliser les services AngularJS ? Introduction spécifique à l'utilisation des services Angularjs

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

寻∝梦original: 2018-09-08 11:54:53983parcourir

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>

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

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>

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Angularjs ? Analyse détaillée des exemples de framework AngularJS (avec exemples complets)Article suivant：Comment utiliser Angularjs ? Analyse détaillée des exemples de framework AngularJS (avec exemples complets)

Articles Liés

Voir plus