ホームページ  >  記事  >  ウェブフロントエンド  >  angularjs サービスの使用方法? angularjs サービスの使用方法の具体的な紹介

angularjs サービスの使用方法? angularjs サービスの使用方法の具体的な紹介

寻∝梦
寻∝梦オリジナル
2018-09-08 11:54:53957ブラウズ

この記事では、angularjsのサービスの詳細と、angularjsの組み込みサービスの使い方を主に紹介します。 angularjsの使用例が含まれていますので、一緒に見てみましょう

サービスの本質はデータとオブジェクトを提供するシングルトンオブジェクトです。

2つの主要カテゴリ:

①組み込みサービス

スコープ

ウィンドウ

out など。

組み込みで提供されているメソッドを使用します。サービス中:


最初のステップは、必要なサービスを関数 (

location) に挿入することです

2 番目のステップは、サービスで提供されるメソッド データを呼び出すことです。 。

ケース:

組み込みの$intervalを使用してカルーセルチャートを作成します

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

②カスタマイズされたサービス

サービスの目的は、ビジネスロジックをカプセル化し、コードの再利用率を向上させることです サービスをカスタマイズする方法:
app .factory ('サービス名', function(){//通常のメソッド return {}})
app.service('サービス名', function(){//Constructor})
app.constant(' サービス名', {}) // 定数サービス
を作成します。 app.value ('サービス名', {}) // 変数サービス

を app.factory 経由で作成します ('サービス名', function() { // 通常のメソッド return {}}) サービス

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

を作成します 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>

** を作成します app.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>

** を作成します('サービス名' , {})//定数サービスを作成します

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

カスタマイズされたサービスは他のサービスのメソッドを使用する必要があります

rrreee さて、この記事はここまでです (もっと見たい場合は、ここで PHP 中国語 Web サイト

AngularJS ユーザーマニュアル🎜を学習してください)、ご質問がある場合は、以下にメッセージを残してください。 🎜

以上がangularjs サービスの使用方法? angularjs サービスの使用方法の具体的な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。