How to use angularjs services? Specific introduction to the use of angularjs services-JS Tutorial-php.cn

How to use angularjs services? Specific introduction to the use of angularjs services

寻∝梦

Release： 2018-09-08 11:54:53

Original

984 people have browsed it

This article mainly introduces you to the details about the services of angularjs, as well as the usage of angularjs built-in services. It contains usage examples of angularjs. Let’s take a look at this article together.

The essence of the service is a singleton object that provides data and objects.

Two major categories:

①Built-in service

##scope

window

##timeout etc.

Using built-in services Methods provided:

The first step is to inject the services you need into function(

location)

The second step is to call the method data provided in the service. .

Case:

Make a carousel through the built-in $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>

Copy after login

②Customized service

service The purpose is to encapsulate business logic and improve code reuse rate

Methods to customize services: app.factory ('Service name', function(){//Normal method return {}})
app.service('Service name', function(){//Constructor})
app.constant('Service name', {})//Create a constant service
app.value(' Service name', {})//Create variable service

Create service through app.factory ('Service name', function(){//Normal method 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>

Copy after login

Create a service through 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>

Copy after login

**Through app.constant('service Name', {})//Create constant service

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>

Copy after login

Notes:

Customized services need to use methods in other 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>

Copy after login

Okay , this article ends here (if you want to see more, go to the PHP Chinese website
AngularJS User Manual
to learn). If you have any questions, you can leave a message below.
The above is the detailed content of How to use angularjs services? Specific introduction to the use of angularjs services. For more information, please follow other related articles on the PHP Chinese website!