首页 > 文章 > web前端 > angularjs的服务怎么使用？angularjs服务具体使用介绍

angularjs的服务怎么使用？angularjs服务具体使用介绍

寻∝梦原创: 2018-09-08 11:54:53918浏览

本篇文章主要向大家介绍了关于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的内置函数的介绍。

查看更多