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

本篇文章主要向大家介绍了关于angularjs的服务的详情,还有关于angularjs内置服务的用法介绍。里面带有angularjs的使用实例,接下来就让我们一起来看看这篇文章吧

服务的本质是一个单例对象,提供数据和对象。 

两大类:

①内置服务

scope

window

timeout等等

使用内置服务中提供的方法: 

   第一步 将需要用到的服务注入进来 function(

location)
   第二步 调用服务中提供的方法 数据。。

案例:通过内置的$interval做一个轮播图

nbsp;html>      

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

{{count}}

var app = angular.module('myApp', ['ng']); app.controller('myCtrl', function ($scope,$interval) { $scope.count = 0; timer = $interval(function () { $scope.count++; if($scope.count > 20) { $interval.cancel(timer) } },500) $scope.index = 0; $scope.imgList = ['1.jpg','2.jpg','3.jpg'] $interval(function () { $scope.index++; if($scope.index > 2) { $scope.index = 0; } },1000) });

登录后复制

②自定义的服务

服务的目的是为了封装业务逻辑,提高代码的复用率
自定义服务的方法:
app.factory (‘服务名称’,function(){//普通方法 return {}})
app.service(‘服务名称’,function(){//构造函数})
app.constant(‘服务名称’,{})//创建常量服务
app.value(‘服务名称’,{})//创建变量服务

通过app.factory (‘服务名称’,function(){//普通方法 return {}})创建服务

nbsp;html>      

  

var app = angular.module('myApp', ['ng']); //创建自定义服务 app.factory('$output', function () { return { print: function () { console.log('func in $output is called'); } } }) app.controller('myCtrl', function ($scope,$output) { $scope.handleClick = function () { //调用自定义服务所提供的方法 $output.print(); } });

登录后复制

通过app.service(‘服务名称’,function(){//构造函数})创建服务

  var app = angular.module('myApp', ['ng']);  //自定义服务  app.service('$student', function () {    this.study = function () {      console.log('we are learning...');    }    this.name = "zhangSan";  })  app.controller('myCtrl',    function ($scope, $student) {      $student.study();    });

登录后复制

以上就是angularjs的服务怎么使用?angularjs服务具体使用介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2741996.html

(0)
上一篇 2025年3月8日 02:43:39
下一篇 2025年3月8日 02:43:43

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论