首頁 > 文章 > web前端 > angularjs的服務怎麼使用？ angularjs服務具體使用介紹

angularjs的服務怎麼使用？ angularjs服務具體使用介紹

寻∝梦原創: 2018-09-08 11:54:53957瀏覽

本篇文章主要向大家介紹了關於angularjs的服務的詳情，還有關於angularjs內建服務的用法介紹。裡面有angularjs的使用實例，接下來就讓我們一起來看看這篇文章吧

服務的本質是一個單例對象，提供資料和對象。

兩大類別：

①內建服務

##scope

window

#timeout等等

使用內建服務中提供的方法：

第一步將需要用到的服務注入進來function(

location)

第二步呼叫服務中提供的方法資料。。

案例：

透過內建的$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(){//建構子})
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('服務名稱',function(){//建構子})建立服務

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

好了，這篇文章到這就結束了（想看更多就到PHP中文網

AngularJS使用手冊中學習），有問題的可以在下方留言提問。

以上是angularjs的服務怎麼使用？ angularjs服務具體使用介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：angularjs的到底怎麼用的？ angularjs的框架實例詳細解析（附完整實例）下一篇：angularjs的到底怎麼用的？ angularjs的框架實例詳細解析（附完整實例）

看更多